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

                      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.

                      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

                            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

                              You can optionally display an overlay behind the field on mobile using the showMobileBackdrop prop. Note that, for this visual style to work, the field needs to be on a dark background.
                              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