Forms

This page contains different styles for form inputs. Always use these instead of default styling.

<label class="input-select">
  <select name="select" class="rounded-lg">
    <option value="1">First a little more text</option>
    <option value="1">Second</option>
    <option value="1">Third</option>
  </select>
</label>
<label class="input-checkbox">
  <input type="checkbox" name="checkbox" value="1">
  <span>Text for checkbox</span>
</label>
<label class="input-radio">
  <input type="radio" name="radio" value="1">
  <span>Text for radio</span>
</label>
<label class="input-text inline-block border-2">
  <input type="text" name="text" placeholder="Enter a keyword" class="rounded-lg">
</label>
<div class="grid grid-flow-col items-center justify-start">
  <label class="input-text grid grid-flow-col justify-start rounded-lg rounded-r-none border-t-2 border-b-2 border-l-2"> 
    <i class="icon icon--search "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-search" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-search"></use></svg></i>
    <input type="text" name="text" placeholder="Enter a keyword">
  </label>
  <button class="btn btn--primary btn--icon self-stretch rounded-r-lg"><span>Search</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i></button>
</div>
© Raute Corporation 2021