MultiSelects

MultiSelect are typeable inputs with multiple selectable dropdown items. Selects Design Guidelines.

    Edit the code below to see your changes live!

    API

    MultiSelect

    Prop Name
    Type
    Default
    Description
    actionSelectAction

    Action option displayed at the end of the list.

    descriptionstring | FormControlDescription

    Append a description to the select field.

    disabledbooleanfalse

    Disables the MultiSelect component.

    errorstring

    Displays a form error around the field.

    filterablebooleantrue

    Allows you to filter the SelectOptions in the Select.

    inputRefReact.Ref<HTMLInputElement> | React.RefObject<HTMLInputElement>

    The provided ref will be used for the underlying input element used in the Select.

    labelstring | FormControlLabel

    Adds a label to the field.

    labelIdstring

    Adds a custom id to the label.

    maxHeightnumber250

    Sets a max-height to the dropdown.

    onOptionsChange *(value: [any], option: [SelectOption]) => void

    Callback called with value of selected option.

    options *Array<SelectOption>

    Accepts an array of SelectOption. See example for usage.

    placementauto-start | auto | auto-end | top-start | top | top-end | right-start | right | right-end | bottom-end | bottom | bottom-start | left-end | left | left-startbottom-start

    Determines the location in which the dropdown will be placed.

    positionFixedbooleanfalse

    If set, uses position: fixed instead of position: absolute to position the items.

    requiredboolean

    Sets the field as required.

    value[any]

    Modifies the current selected value of the field.

    Props ending with * are required

    SelectOption

    Prop Name
    Type
    Default
    Description
    disabledbooleanfalse

    Sets the SelectOption to disabled.'

    content *string

    'Sets the text content of the SelectOption.'

    descriptionstring

    Sets the content description of the SelectOption

    iconIcon

    Pass in an Icon component to display to the left of the text. Only available for single select.

    value *any

    'Stored value of the SelectOption.'

    Props ending with * are required

    SelectAction

    Prop Name
    Type
    Default
    Description
    actionTypenormal | destructivenormal

    'Indicates whether the SelectAction is of normal or destructive nature.'

    disabledbooleanfalse

    'Sets the SelectAction to disabled.'

    content *string

    'Sets the text content of the SelectAction .'

    descriptionstring

    Sets the content description of the SelectAction

    iconIcon

    Pass in an Icon component to display to the left of the text.

    onClick(inputText: string): void

    Returns the current text in the input.

    Props ending with * are required

    Examples

    Position

    MultiSelect can be anchored in different directions with the position property. It will automatically find a position if there's not enough space in the chosen direction.

            Edit the code below to see your changes live!

            Max Height

            Once the content is longer than the max-height, the Dropdown will be scrollable. It is possible to modify the dimension by passing a maxHeight property.

                  Edit the code below to see your changes live!

                  Disabled

                  It is possible to disable the entire select component, similar to how you would disable a native HTML select element, by using the disabled property.

                    Edit the code below to see your changes live!

                    Action

                    Accepts an action object to display at the end of the list.

                      Edit the code below to see your changes live!

                      Error

                      An error prop receives a string to display.

                        Need to choose a country before proceeding

                        Edit the code below to see your changes live!

                        Option & Action Description

                        It is possible to add a description for select options and actions.

                          Edit the code below to see your changes live!

                          Beta