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.
The height is defaulted to 3 lines. This can be overridden by passing a number to the lines prop.
Height set to 5 lines
By default, the field grows in height as the user types. You can set a limit to the number of lines by passing a number to the lineLimit prop.
Alternatively, this behaviour can be disabled by setting grow to "false".
Height limited to 6 lines
Specifying a characterLimit will communicate when the input text exceeds the limit. All characters entered beyond the specified limit will be visually highlighted. To reduce visual noise, the character count is only displayed when the user is approaching or exceeding the specified limit.
To prevent loss of information, exceeding the limit is permitted, however the count will present in a critical tone.
Chactacter limit of 50
To support targeted validations, specific character ranges can be highlighted as critical. The highlightRanges prop accepts and array of start and end character positions.
Characters 7-20 are highlighted
Critical message