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", "caution", and "neutral".
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.
Providing a characterLimit will communicate when the input text approaches or exceeds the specified limit. All excess characters will be visually highlighted.
To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.
Character limit of 50
A long piece of text exceeding the specified character limit of 50
To support targeted validations, specific character ranges can be highlighted. The highlightRanges prop accepts an array of start and end character positions.
Supported highlight tones are critical and caution. Highlights follow the tone set on the field.
Additionally, when highlighting ranges you may choose to disable the built-in spell check to prevent colliding highlights. This can be done be setting spellCheck to false.
When combining characterLimit and highlightRanges, if the number of characters exceeds the limit, only the exceeding characters will be highlighted (using critical tone).
Once resolved, the provided highlightRanges will then be shown.
In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.
Custom field label
The label for this field is the Heading element before it.