Skip to content

Forms

All form elements are styled automatically. Validation states use :user-valid and :user-invalid.

Text inputs

Personal info 
<form>
  <fieldset>
    <legend>Personal info</legend>
    <label for="name">Full name</label>
    <input type="text" id="name" placeholder="Jane Smith">
    <label for="email">Email address</label>
    <input type="email" id="email" placeholder="[email protected]">
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="••••••••">
  </fieldset>
</form>

Select & Textarea

<label for="country">Country</label>
<select id="country">
  <option value="">Select a country…</option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
</select>

<label for="bio">Bio</label>
<textarea id="bio" placeholder="Tell us about yourself…"></textarea>

Range & Color

<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="100" value="60">

<label for="color">Accent color</label>
<input type="color" id="color" value="#0172ad">

Checkboxes & Radios

Options 
<fieldset>
  <legend>Options</legend>
  <label><input type="checkbox"> Subscribe to newsletter</label>
  <label><input type="checkbox" checked> I agree to the terms</label>
  <label><input type="radio" name="plan" value="free"> Free plan</label>
  <label><input type="radio" name="plan" value="pro" checked> Pro plan</label>
</fieldset>

File, Search & Datalist

<label for="file-upload">Upload a file</label>
<input type="file" id="file-upload">

<label for="search">Search</label>
<input type="search" id="search" placeholder="Search…">

<label for="framework">Framework (datalist)</label>
<input type="text" id="framework" list="frameworks">
<datalist id="frameworks">
  <option value="FAP CSS">
  <option value="Bootstrap">
</datalist>

Submit & Reset

<button type="submit">Submit</button>
<button type="reset">Reset</button>