Forms

Form elements are styled for accessibility and usability by default.

Text Inputs

<label>Name
  <input type="text" placeholder="Name">
</label>
<label>Message
  <textarea></textarea>
</label>

Select

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Multiple Select

<select multiple>
  <option>Item 1</option>
  ...
</select>

Checkboxes & Radios

<label><input type="checkbox" checked> Checkbox</label>
<label><input type="radio" name="g"> Radio</label>

Toggle Switch

<input type="checkbox" role="switch" checked>

Fancy Animated Checkbox

<input class="ui-checkbox" type="checkbox">

Range & Progress

<input type="range" value="70">
<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>