<input>

The <input> element accepts user data in many formats defined by its type attribute — text, email, password, date, color, and more.

Always pair inputs with a <label> or aria-label so screen readers can identify the field.

For associating labels with inputs see <label>.

For validation states see [aria-invalid].

For helper text below inputs see <small>.

Basic Inputs

<input type="text" name="text" placeholder="Text" aria-label="Text" />
<input type="email" name="email" placeholder="Email" aria-label="Email" autocomplete="email" />
<input type="number" name="number" placeholder="Number" aria-label="Number" />
<input type="password" name="password" placeholder="Password" aria-label="Password" />
<input type="tel" name="tel" placeholder="Tel" aria-label="Tel" autocomplete="tel" />
<input type="url" name="url" placeholder="Url" aria-label="Url" />

Datetime Input

Datetime inputs come with an icon.

<input type="date" name="date" aria-label="Date" />
<input type="datetime-local" name="datetime-local" aria-label="Datetime local" />
<input type="month" name="month" aria-label="Month" />
<input type="time" name="time" aria-label="Time" />

Search Input

type="search" comes with a distinctive style.

<input type="search" name="search" placeholder="Search" aria-label="Search" />

Color Input

type="color" is also consistent with the other input types.

<input type="color" value="#ff9500" aria-label="Color picker" />

File Input

Input type file button has a secondary button style.

<input type="file" />

Checkboxes

The native <input type="checkbox"> with a custom and responsive style.

Basic Checkbox

<fieldset>
  <legend>Language preferences:</legend>
  <label>
    <input type="checkbox" name="english" checked />
    English
  </label>
  <label>
    <input type="checkbox" name="mandarin" />
    Mandarin
  </label>
  <label aria-disabled="true">
    <input type="checkbox" name="dothraki" disabled />
    Dothraki
  </label>
</fieldset>

Horizontal Stacking

<fieldset>
  <legend>Language preferences:</legend>
  <input type="checkbox" id="hindi" name="hindi" checked />
  <label for="hindi">Hindi</label>
  <input type="checkbox" id="swahili" name="swahili" />
  <label for="swahili">Swahili</label>
  <input type="checkbox" id="navi" name="navi" disabled />
  <label for="navi" aria-disabled="true">Na'vi</label>
</fieldset>

Single Checkbox

<label>
  <input type="checkbox" name="agree">
  I agree to the terms
</label>

Radios

The native <input type="radio"> with a custom and responsive style.

Basic Radio

<fieldset>
  <legend>Language preference:</legend>
  <label>
    <input type="radio" name="language" checked value="english" />
    English
  </label>
  <label>
    <input type="radio" name="language" value="mandarin" />
    Mandarin
  </label>
  <label aria-disabled="true">
    <input type="radio" name="language" value="dothraki" disabled />
    Dothraki
  </label>
</fieldset>

Horizontal Stacking

<fieldset>
  <legend>Second language:</legend>
  <input type="radio" id="hindi" name="second-language" checked value="hindi" />
  <label for="hindi">Hindi</label>
  <input type="radio" id="swahili" name="second-language" value="swahili" />
  <label for="swahili">Swahili</label>
  <input type="radio" id="navi" name="second-language" value="navi" disabled />
  <label for="navi" aria-disabled="true">Na'vi</label>
</fieldset>

Range

The native <input type="range"> with a custom and responsive style.

Basic Range

<label>
  Brightness
  <input type="range" />
</label>

<label>
  Contrast
  <input type="range" value="40" />
</label>

With Min and Max

<label>
  Volume
  <input type="range" min="0" max="100" value="50" />
</label>

With Step

<label>
  Rating (0-10)
  <input type="range" min="0" max="10" step="1" value="5" />
</label>

Switch

The native <input type="checkbox"> styled as a switch, using the role="switch" for accessibility.

Basic Switch

<fieldset>
  <label>
    <input name="terms" type="checkbox" role="switch" />
    I agree to the Terms
  </label>
  <label>
    <input name="opt-in" type="checkbox" role="switch" checked />
    Receive news and offers
  </label>
</fieldset>