Supports all three levels of FieldLabel:
  • label — primary title of the field,
  • secondaryLabel — additional context, typically used to indicate optionality of a field,
  • tertiaryLabel — further context, typically used for providing assistance with a field.
A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.
The supported tones are: "critical", "positive", and "neutral".
Critical message
Positive message
Neutral message
Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Extra information about the field
Mark the field as disabled by passing true to the disabled prop.
Providing a placeholder will display as a prompt to the user no value is selected.
A clear icon button will appear in the field when the user has entered text. You must pass a function to the onClear prop, which will be called when the button is clicked.
For decoration and help disguinishing fields an icon can be provided. This will be placed in the left of the field and is not interactive.
The prefix prop allows you to prepend read-only content on the left-hand side of the field. This is typically used for currency symbols, country codes, etc.