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".
Critical message
Suggestions will appear below the field as you type
Positive message
Suggestions will appear below the field as you type
Caution message
Suggestions will appear below the field as you type
Neutral message
Suggestions will appear below the field as you type
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
Suggestions will appear below the field as you type
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.
Suggestions will appear below the field as you type
You can automatically select the first suggestion when blurring the field using the automaticSelection prop. Note that this only occurs when text has been entered into the field to prevent irrelevant suggestions being selected.This is designed for scenarios where you’re effectively selecting an item from a list rather than entering free text, e.g. selecting a location.
Suggestions will appear below the field as you type
Suggestion items can be highlighted based on the input value using the suggestionHighlight prop. Choose between highlighting the matching or remaining portion of each suggestion.
Highlight matchingApples and Bananas
Highlight remainingApples and Bananas
If suggestionHighlight is not suitable for your use case, you can provide explicit highlight ranges for each suggestion.
Suggestions will appear below the field as you type
The logic for filtering suggestions typically lives on the server rather than the client because it’s impractical to send all possible suggestions over the network. However, when prototyping in Playroom or working with smaller datasets, you may want to perform this filtering on the client instead.For this case, we provide a filterSuggestions function to make this as painless as possible. This also handles highlights for you, using suggestionHighlight set to matching.If filtering is being performed on the server, this can be safely omitted.
Most examples on this page use the filterSuggestions function to demonstrate real-world filtering behaviour.
Suggestion items can be made clearable using the onClear property on suggestion objects. This is particularly useful for giving users the ability to clear recent entries. The aria-label for the clear suggestion button can be customised by providing a clearLabel in the suggestion object.
Suggestions will appear below the field as you type
An overlay can optionally be displayed behind the field on mobile using the showMobileBackdrop prop.Additionally, you can also scroll the field to the top of the viewport on focus using the scrollToTopOnMobile prop.
Suggestions will appear below the field as you type
If no suggestions are available and you’d like to provide messaging to the user, you can provide it via the noSuggestionsMessage prop.A simple message can be shown by providing a single piece of text. Alternatively, a more structured prompt can be shown by providing an object containing title and description.
Focus the field to see a simple message
Suggestions will appear below the field as you type
Focus the field to see more structured prompt
Suggestions will appear below the field as you type
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
Suggestions will appear below the field as you type
Suggestions will appear below the field as you type
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.