Forms

Input

All input types are consistently styled and come with validation states.

<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">

Disabled input#

<input
  type="text"
  name="text"
  placeholder="Disabled"
  aria-label="Disabled input"
  disabled
>

Read-only input#

<input
  type="text"
  name="text"
  value="Read-only"
  aria-label="Read-only input"
  readonly
>

Validation states#

Validation states are provided with aria-invalid.

<input
  type="text"
  name="valid"
  value="Valid"
  aria-invalid="false"
>

<input
  type="text"
  name="invalid"
  value="Invalid"
  aria-invalid="true"
>

Helper texts, defined with <small> below the form element, inherit the validation state color.

Looks good!Please provide a valid value!
<input
  type="text"
  name="valid"
  value="Valid"
  aria-invalid="false"
  aria-describedby="valid-helper"
>
<small id="valid-helper">Looks good!</small>

<input
  type="text"
  name="invalid"
  value="Invalid"
  aria-invalid="true"
  aria-describedby="invalid-helper"
>
<small id="invalid-helper">
  Please provide a valid value!
</small>

Edit this page on GitHub