React SDK

Select

The Select component allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

Usage

Here's a basic usage of the Select component.

Editable Example

    Multiple

    Add the multiple prop to allow multiple item selection.

    Editable Example

      Disabled options

      Add the disabled prop to the option you want to disable.

      Editable Example

        Sizes

        Use the size prop to set the size of the select. The default is md.

        Editable Example

              Invalid

              Editable Example

                Disabled

                Editable Example

                  Text

                  By default the text for the button is 'Select an option' when no options are selected or 'X selected' where X is the number of options selected. This can be change via the text prop.

                  Editable Example

                    Option labels

                    An additional label can be added to an Option using the label prop.

                    Editable Example

                      Form usage

                      The name prop is submitted along with the control's value when the form data is submitted.

                      Editable Example

                        Props

                        The API for the Select and Option components are deliberately similar to their native equivalents (<select> and <option>).

                        Select Props

                        The Select composes the Box component so you can pass props for Box. These are props related to the Select component.

                        NameTypeDefaultDescription
                        idstringThe ID for associating a label to the input.
                        autofocusbooleanWhether the select should receive focus when mounted.
                        disabledbooleanWhether the select should be disabled.
                        invalidbooleanWhether the select should be marked invalid.
                        labelstringAn aria-label, also used for the placeholder if not specified.
                        multiplebooleanAllow multiple option selection.
                        namestringThe name for the select.
                        textReactText | (selected: string[]) => ReactTextThe text for the select's button.
                        size'sm' | 'md' | 'lg''md'The text size for the select.
                        onChange(values: string | Array<string>) => voidA callback for when the select value changes. Note: only the value is passed.
                        valueOptionProps['value'] | Array<OptionProps['value']>The selected value(s).

                        Option Props

                        NameTypeDefaultDescription
                        childrenstring | numberThe text to display for the option.
                        valuestring | numberThe value for the option.
                        labelstring | numberThe additional text to display for the option (useful for counts).
                        disabledbooleanWhether the option should be disabled.