Forms

Input

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

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

Datetime input#

Datetime inputs come with an icon.

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

Search input#

type="search" comes with a distinctive style.

<input
  type="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"
  placeholder="Disabled"
  aria-label="Disabled input"
  disabled
/>

Read-only input#

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

Validation states#

Validation states are provided with aria-invalid.

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

<input
  type="text"
  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!