Input

A bordered text input, styled to match Select exactly. Usually wrapped in Field for its label and hint.

Basic

<input> is the component — styled bare, no class. Nothing else on this site uses a text input, so there is nothing for the selector to clash with.

<input type="text" placeholder="Dishwasher manual" style="max-width: 20rem;" />

Focus and disabled

<input type="text" value="Focused" autofocus style="max-width: 20rem;" />
<input type="text" value="Disabled" disabled="" style="max-width: 20rem;" />

Invalid

Invalid state is expressed on the control itself, so it works with native form validation, plus an error line below. role="alert" is a real live-region role for validation text, so it doubles as the selector that turns a <small> hint red.

<label class="field" style="max-width: 20rem;">
  Accent hex
  <input type="text" value="not-a-color" aria-invalid="true" />
  <small role="alert">Not a valid hex color.</small>
</label>

API