BRAID
Braid Logo
 

Autosuggest

    Suggestions will appear below the field as you type
    Open in Playroom

    Alternatives

    Accessibility

    Follows the WAI-ARIA Combobox Pattern.

    Additional labels

    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.
     Help
      Suggestions will appear below the field as you type
      Open in Playroom

      Message and tone

      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
              Open in Playroom

              Field description

              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
                Open in Playroom

                Disabled field

                Mark the field as disabled by passing true to the disabled prop.
                  Suggestions will appear below the field as you type
                  Open in Playroom

                  Placeholder prompt

                  Providing a placeholder will display as a prompt to the user when no value is selected.
                    Suggestions will appear below the field as you type
                    Open in Playroom

                    Clearing the field

                    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.
                    Translation hint The aria-label for the clear button can be customised by providing a clearLabel prop.
                      Suggestions will appear below the field as you type
                      Open in Playroom

                      Automatic selection

                      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
                        Open in Playroom

                        Grouped suggestions

                        Suggestion items can optionally be nested into groups.
                          Suggestions will appear below the field as you type
                          Open in Playroom

                          Suggestion descriptions

                          Suggestion items can optionally contain a description.
                            Suggestions will appear below the field as you type
                            Open in Playroom

                            Suggestion highlights

                            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 matching
                            Apples and Bananas
                            Highlight remaining
                            Apples 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
                              Open in Playroom

                              Client-side filtering

                              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.

                              Clearable suggestions

                              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.
                              Translation hint 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
                                Open in Playroom

                                Mobile support

                                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
                                  Open in Playroom

                                  Messaging when no suggestions are available

                                  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
                                      Open in Playroom

                                      Indirect or hidden field labels

                                      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
                                          Open in Playroom