Components

Inputs & forms

Text fields, textareas and their labels, with a soft indigo focus glow and inline validation that never shifts the layout.

Inputs & forms
As it appears to customers
Enter a valid email address
<Field label="Business name" help="As it appears to customers">
  <Input placeholder="Acme Ltd" />
</Field>

<Field label="Email address" error="Enter a valid email address">
  <Input defaultValue="not-an-email" invalid />
</Field>

<Field label="Notes">
  <Textarea rows={3} placeholder="Anything we should know" />
</Field>

Props

PropTypeDescription
invalidbooleanMarks the field in the danger tokens.
disabledbooleanInactive, non-interactive.
label / help / errorstringOn the Field wrapper. The error line reserves its own height.

Guidelines

Do
  • Group related fields into a card with a clear heading, not a flat list.
  • Show validation inline as the user goes.
  • Reserve the helper and error line height so messages never push the form down.
Do not
  • Do not shake a field on error. Change the border colour quietly.
  • Do not rely on placeholder text as the label.