Multiple Select

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label.

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

ID of the trigger button element on the select

ID of element providing further context and description of the select

If 'error', enables error styling on select

A function that's called when an option in the select popover is clicked

The preselected value for the select component (controlled mode)

The default selected values for the select component (uncontrolled mode)

A function that's called when the selected value changes. Takes the changed value and a boolean indicating if the changed value is selected as parameters (controlled mode)

A boolean indicating whether the select popover is open or not (controlled mode).

Determines if the menu is open by default (uncontrolled mode).

A callback for when the open state is changed (controlled mode).

A callback function to handle keydown events on the select button trigger element.

Additional information for the select

An array of options to display in the Select, typically MultiSelectOption components

If true, visually hides the hint text (it will still be accessible to screen readers)

If true, show built-in tags for selected options

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Overrides for labels that have been defaulted in the component.

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

The value of the option, which can be different from the displayed value taken from the children prop

ID of the option

Flag to indicate that the field is in a warning state

Sets the aria-selected attribute

A function that's called when an option in the select popover is pressed with arrow up, arrow down, or space keys

A function that's called when an option in the select popover is clicked

The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

@ignore For DLS Internal use only. Indicates if the MultiSelect component as a whole is disabled, thereby making each option disabled

Props spread onto the dismissible tags