# Form Elements


## Text Field


  
    <form class="ui-form">
      <label for="first_name">First Name</label>
      <input id="first_name" type="text" placeholder="First Name">
    </form>
  



## Select  


  
    <form class="ui-form">
      <label for="select-example">Select</label>
      <select id="select-example">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </form>
  


## Floating Label


  
    <form class="ui-form">
      <div class="ui-floating-input">
        <input type="text" id="floating_example" placeholder=" ">
        <label for="floating_example">First Name</label>
      </div>
    </form>
  


## Textarea


  
    <form class="ui-form">  
      <textarea id="textarea_example" placeholder="Enter your message"></textarea>
    </form>
  


## Switch

Unlike other elements, switches can be used both inside and outside of a `.ui-form`


  
    <label class="ui-switch">
      <input type="checkbox">
      <span class="--slider"></span>
    </label>
  


## Checkbox 


  
    <input type="checkbox" id="terms">
    <label for="terms" class="font-normal">Accept terms and conditions</label>
  


## Date Picker 


  
    <form class="ui-form">
      <label for="date_picker_example">Date Picker</label>  
      <input type="date" id="date_picker_example" onclick="this.showPicker()">
    </form>
  


## Date Time Picker


  
    <form class="ui-form">
      <label for="date_time_picker_example">Date Time Picker</label>
      <input type="datetime-local" id="date_time_picker_example" onclick="this.showPicker()">
    </form>
  



## Color Picker


  
    <form class="ui-form">
      <label for="color_picker_example">Color Picker</label>
      <input type="color" id="color_picker_example" value="#2c79b3">
    </form>
  


## Input Group


  
    <form class="ui-form">
      <div class="ui-input-group">
        <input type="text" id="input_group_example" placeholder="First Name">
        <input type="text" id="input_group_example" placeholder="Last Name">
      </div>
    </form>
  




## Full Form 

  
    <form class="ui-form py-12">
      <div class="flex flex-col gap-y-1">
        <div class="grid grid-cols-2 gap-x-4">
          <div>
            <label for="first_name">First Name</label>
            <input id="first_name" type="text" placeholder="First Name">
          </div>
          <div>
            <label for="last_name">Last Name</label>
            <input id="last_name" type="text" placeholder="Last Name">
          </div>
        </div>
        <div>
          <label for="select-example">Select</label>
          <select id="select-example">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
        <div>
          <label for="options">Input Group</label>
          <div class="ui-input-group">
            <input id="first_name" type="text" placeholder="First Name">
            <input id="middle_name" type="text" placeholder="Middle Name">
            <input id="last_name" type="text" placeholder="Last Name">
          </div>
        </div>
        <div> 
          <label>Floating Labels</label>
          <div class="grid grid-cols-2 gap-x-2">
            <div class="ui-floating-input mt-2">
              <input type="text" id="floating_example" placeholder=" ">
              <label for="floating_example">First Name</label>
            </div>
            <div class="ui-floating-input mt-2">
              <input type="text" id="floating_example" placeholder=" ">
              <label for="floating_example">Last Name</label>
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-between mt-6">
        <div>
          <a class="ui-button --minimal --motion-backward">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m12 19-7-7 7-7"></path>
  <path d="M19 12H5"></path>
</svg>

            Back
          </a>
        </div>
        <div class="flex gap-x-2">
          <a class="ui-button">
            Save Draft
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path>
  <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path>
  <path d="M7 3v4a1 1 0 0 0 1 1h7"></path>
</svg>

          </a>
        </div>
      </div>
    </form>