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.
Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.