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.
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. The aria-label for the clear button can be customised by providing a clearLabel prop.
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.
Providing a characterLimit will communicate when the input text approaches or exceeds the specified limit.To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.
To improve the user experience when entering text on mobile devices, the keyboard layout can be tailored to suit its content using the inputMode prop.Choose from the built-in inputmodes, for example: numeric, email, url, etc. and the device will show the appropriate keyboard layout.
Selected input mode:
numeric
Note: Keyboard change only visible on a mobile device
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.