Input

Text fields let users enter text into a UI

overviewguidelinesdeva11y
  • Make sure input fields look interactive
  • The field's state (blank, with input, error, etc) should be visible at a glance
  • Keep labels and error messages brief and easy to act on

Example

The Field component manages state and displays the label or helper/error messages.

Preview Playground

Resources

NameResourceStatus
FigmaDesign Kit (Figma)Private