Select

A dropdown for choosing a predefined value, or several.

Select a fruit

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple'},
        1: {value: 'banana', label: 'Banana'},
        2: {value: 'cherry', label: 'Cherry'}
    }"
    as="collection" />

<ui:select.root collection="{collection}">
    <ui:select.label>Select a fruit</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose a fruit" />
    </ui:select.control>
    <ui:select.content>
        <ui:select.list>
            <f:for each="{collection.items}" as="item">
                <ui:select.item item="{item}">
                    <ui:select.itemText>{item.label}</ui:select.itemText>
                    <ui:select.itemIndicator />
                </ui:select.item>
            </f:for>
        </ui:select.list>
    </ui:select.content>
</ui:select.root>

Features

Single and multiple selection
Typeahead focuses items as you type
Keyboard navigation with arrow keys, home and end
Disabled items and groups
Hosts other widgets, like tabs, next to the list with the dialog popup type
Works with the Field component
Custom positioning

Anatomy

Place the options inside list, which carries the listbox semantics, focus and scrolling. content wraps it and is announced as a dialog with the dialog popup type. The styled ui:select.content combines positioner and content in one part, so you nest ui:select.list in it yourself:

<ui:select.content>
    <ui:select.list>
        <ui:select.item>...</ui:select.item>
    </ui:select.list>
</ui:select.content>

<primitives:select.root>
    <primitives:select.label />
    <primitives:select.control>
        <primitives:select.trigger>
            <primitives:select.valueText />
            <primitives:select.indicator />
        </primitives:select.trigger>
        <primitives:select.clearTrigger />
    </primitives:select.control>
    <primitives:select.positioner>
        <primitives:select.content>
            <primitives:select.list>
                <primitives:select.item>
                    <primitives:select.itemText />
                    <primitives:select.itemIndicator />
                </primitives:select.item>
                <primitives:select.itemGroup>
                    <primitives:select.itemGroupLabel />
                </primitives:select.itemGroup>
            </primitives:select.list>
        </primitives:select.content>
    </primitives:select.positioner>
    <primitives:select.hiddenSelect />
</primitives:select.root>

Installation

typo3 ui:add select

Read more about installing Components and Primitives.

Examples

Default value

Pass defaultValue as a list to preselect an item. The demo opens with Banana selected.

Select a fruit

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple'},
        1: {value: 'banana', label: 'Banana'},
        2: {value: 'cherry', label: 'Cherry'}
    }"
    as="collection" />

<ui:select.root collection="{collection}" defaultValue="{0: 'banana'}">
    <ui:select.label>Select a fruit</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose a fruit" />
    </ui:select.control>
    <ui:select.content>
        <ui:select.list>
            <f:for each="{collection.items}" as="item">
                <ui:select.item item="{item}">
                    <ui:select.itemText>{item.label}</ui:select.itemText>
                    <ui:select.itemIndicator />
                </ui:select.item>
            </f:for>
        </ui:select.list>
    </ui:select.content>
</ui:select.root>

Multiple selection

Set multiple="{true}" to select several items.

Select frameworks

<ui:listCollection
    items="{
        0: {value: 'react', label: 'React'},
        1: {value: 'vue', label: 'Vue'},
        2: {value: 'angular', label: 'Angular'},
        3: {value: 'svelte', label: 'Svelte'}
    }"
    as="collection" />

<ui:select.root collection="{collection}" multiple="{true}">
    <ui:select.label>Select frameworks</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose frameworks" />
    </ui:select.control>
    <ui:select.content>
        <ui:select.list>
            <f:for each="{collection.items}" as="item">
                <ui:select.item item="{item}">
                    <ui:select.itemText>{item.label}</ui:select.itemText>
                    <ui:select.itemIndicator />
                </ui:select.item>
            </f:for>
        </ui:select.list>
    </ui:select.content>
</ui:select.root>

Disabled items

Set disabled: true on an item of the collection to make it unselectable.

Select an option

<ui:listCollection
    items="{
        0: {value: 'available', label: 'Available Option'},
        1: {value: 'unavailable', label: 'Unavailable Option', disabled: true},
        2: {value: 'another', label: 'Another Option'}
    }"
    as="collection" />

<ui:select.root collection="{collection}">
    <ui:select.label>Select an option</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose an option" />
    </ui:select.control>
    <ui:select.content>
        <ui:select.list>
            <f:for each="{collection.items}" as="item">
                <ui:select.item item="{item}">
                    <ui:select.itemText>{item.label}</ui:select.itemText>
                    <ui:select.itemIndicator />
                </ui:select.item>
            </f:for>
        </ui:select.list>
    </ui:select.content>
</ui:select.root>

With item groups

Set groupByKey on ui:listCollection to group the items, here by their type, and render an itemGroup with its label per group.

Select produce

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple', type: 'Fruits'},
        1: {value: 'banana', label: 'Banana', type: 'Fruits'},
        2: {value: 'carrot', label: 'Carrot', type: 'Vegetables'},
        3: {value: 'broccoli', label: 'Broccoli', type: 'Vegetables'}
    }"
    groupByKey="type"
    as="collection" />

<ui:select.root collection="{collection}">
    <ui:select.label>Select produce</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose produce" />
    </ui:select.control>
    <ui:select.content>
        <ui:select.list>
            <f:for each="{collection.group}" as="group" key="type">
                <ui:select.itemGroup value="{type}">
                    <ui:select.itemGroupLabel>{type}</ui:select.itemGroupLabel>
                    <f:for each="{group}" as="item">
                        <ui:select.item item="{item}">
                            <ui:select.itemText>{item.label}</ui:select.itemText>
                            <ui:select.itemIndicator />
                        </ui:select.item>
                    </f:for>
                </ui:select.itemGroup>
            </f:for>
        </ui:select.list>
    </ui:select.content>
</ui:select.root>

With form field

Wrap the select in ui:field.root so it takes the field's name, required and invalid state. The demo is a country select for a shipping address.

Country

<ui:listCollection
    items="{
        0: {value: 'us', label: 'United States'},
        1: {value: 'uk', label: 'United Kingdom'},
        2: {value: 'de', label: 'Germany'}
    }"
    as="collection" />

<ui:field.root name="country" required="{true}">
    <ui:select.root collection="{collection}">
        <ui:select.label>Country</ui:select.label>
        <ui:select.control class="min-w-48">
            <ui:select.trigger placeholder="Select your country" />
        </ui:select.control>
        <ui:select.content>
            <ui:select.list>
                <f:for each="{collection.items}" as="item">
                    <ui:select.item item="{item}">
                        <ui:select.itemText>{item.label}</ui:select.itemText>
                        <ui:select.itemIndicator />
                    </ui:select.item>
                </f:for>
            </ui:select.list>
        </ui:select.content>
    </ui:select.root>
    <ui:field.errorText />
</ui:field.root>

With tabs

Set popupType="{f:constant(name: 'Jramke\FluidPrimitives\Enum\PopupType::Dialog')}" when the popup holds more than the list. content is then announced as a dialog, list stays the listbox, and you place the other widgets next to the list inside content. In the demo, tabs narrow the produce down to fruits or vegetables.

Select produce

<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple', category: 'fruit'},
        1: {value: 'banana', label: 'Banana', category: 'fruit'},
        2: {value: 'cherry', label: 'Cherry', category: 'fruit'},
        3: {value: 'carrot', label: 'Carrot', category: 'vegetable'},
        4: {value: 'broccoli', label: 'Broccoli', category: 'vegetable'},
        5: {value: 'spinach', label: 'Spinach', category: 'vegetable'}
    }"
    as="collection" />

<ui:select.root
    collection="{collection}"
    popupType="{f:constant(name: 'Jramke\FluidPrimitives\Enum\PopupType::Dialog')}"
    autoMount="{false}"
    rootId="select-with-tabs">
    <ui:select.label>Select produce</ui:select.label>
    <ui:select.control class="min-w-48">
        <ui:select.trigger placeholder="Choose produce" />
    </ui:select.control>
    <ui:select.content>
        <ui:tabs.root defaultValue="all" autoMount="{false}" rootId="select-with-tabs-tabs">
            <ui:tabs.list class="px-3 flex">
                <ui:tabs.trigger class="text-sm" value="all">All</ui:tabs.trigger>
                <ui:tabs.trigger class="text-sm" value="fruit">Fruits</ui:tabs.trigger>
                <ui:tabs.trigger class="text-sm" value="vegetable">Vegetables</ui:tabs.trigger>
            </ui:tabs.list>
            <ui:tabs.content value="all">
                <ui:select.list>
                    <f:for each="{collection.items}" as="item">
                        <ui:select.item item="{item}">
                            <ui:select.itemText>{item.label}</ui:select.itemText>
                            <ui:select.itemIndicator />
                        </ui:select.item>
                    </f:for>
                </ui:select.list>
            </ui:tabs.content>
            <ui:tabs.content value="fruit" />
            <ui:tabs.content value="vegetable" />
        </ui:tabs.root>
    </ui:select.content>
</ui:select.root>

<vite:asset entry="EXT:docs/Resources/Private/Components/ui/SelectExamples/WithTabs.entry.ts" />

import { mount } from 'fluid-primitives';
import { Select } from 'fluid-primitives/select';
import { Tabs } from 'fluid-primitives/tabs';

mount('ui:select', 'select-with-tabs', ({ props }) => {
    const select = new Select(props);
    select.init();

    // The select keeps a single listbox, so the tabs share it: the list moves into the active
    // panel, and its keyboard navigation has to skip what the tab hides - swap the machine's
    // collection and hide the rest of the items to match.
    const source = select.api.collection;

    function showCategory(tabs: Tabs, category: string) {
        const panel = tabs.hydrator.queryAll('content').find(el => el.dataset.value === category);
        const listEl = select.hydrator.query('list');
        if (panel && listEl) panel.append(listEl);

        const collection =
            category === 'all'
                ? source
                : source.filter((_itemString, _index, item) => item.category === category);

        select.updateProps({ collection });
        select.hydrator.queryAll('item').forEach(itemEl => {
            itemEl.hidden = !collection.has(itemEl.dataset.value ?? null);
        });
    }

    mount('ui:tabs', 'select-with-tabs-tabs', ({ props }) => {
        const tabs = new Tabs({
            ...props,
            onValueChange: ({ value }) => showCategory(tabs, value),
        });
        tabs.init();
        return tabs;
    });

    return select;
});

Localization

The label of the clear button ships in the language file and follows the site language. Pass translations to override it for one select.

<ui:select.root
    collection="{countries}"
    translations="{
        clearTriggerLabel: f:translate(key: 'LLL:EXT:my_extension/Resources/Private/Language/locallang.xlf:select.clear')
    }"
>
    ...
</ui:select.root>

A screen reader announces the highlighted item through a live region, and the texts ship in the language file too. itemAnnouncement sets that text and itemAnnouncementSelected the one for the selected item, both with %label% and %value% placeholders, e.g. itemAnnouncementSelected: '%label%, ausgewählt'. A client script passes itemAnnouncement as a function of { value, label, selected } instead.

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

select.root

Provides shared select state and wraps all related parts. Renders a <div> element.

Name	Description	Required	Default
`collection`	`Domain\Dto\ListCollection` The item collection.	Yes	-
`name`	`string` The `name` attribute of the underlying select. Inherited from a surrounding field when available.	No	-
`form`	`string` The associate form of the underlying select.	No	-
`disabled`	`boolean` Whether the select is disabled. Inherited from a surrounding field when available.	No	-
`invalid`	`boolean` Whether the select is invalid. Inherited from a surrounding field when available.	No	-
`readOnly`	`boolean` Whether the select is read-only. Inherited from a surrounding field when available.	No	-
`required`	`boolean` Whether the select is required. Inherited from a surrounding field when available.	No	-
`closeOnSelect`	`boolean` Whether the select should close after an item is selected.	No	true
`positioning`	`array` The positioning options of the menu.	No	{ "placement": "bottom-start", "gutter": 8 }
`defaultValue`	`string\|string[]` The initial default value of the select when rendered. Use when you don't need to control the value of the select. Inherited from a surrounding field when available.	No	-
`defaultHighlightedValue`	`string` The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.	No	-
`loopFocus`	`boolean` Whether to loop the keyboard navigation through the options.	No	false
`multiple`	`boolean` Whether to allow multiple selection.	No	-
`defaultOpen`	`boolean` Whether the select's open state is controlled by the user.	No	false
`popupType`	`Enum\PopupType` The kind of popup the select's content is: `listbox` for a regular select, `dialog` when it holds other interactive content.	No	Listbox
`deselectable`	`boolean` Whether the value can be cleared by clicking the selected item.	No	-
`translations`	`array` Localized select labels. `itemAnnouncement` (the live region text of a highlighted item) and `itemAnnouncementSelected` (the same for a selected item) take `%label%` and `%value%` placeholders, and `itemAnnouncement` is a function of the item in a client script. Use `f:translate` for per-template localization overrides when needed.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`rootId`	`string` The root ID of the component, used for hydration and identification.	No	-
`ids`	`array` The IDs of of the component parts for composition.	No	[]
`autoMount`	`boolean` Whether the client initializes the component on its own. Set it to false to mount it yourself with `mount()`	No	true
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-root`	<uid>
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only

select.label

Labels the select. Renders a <label> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-label`	<uid>
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-required`	Present when required

select.control

Groups the trigger and optional clear button. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-control`	<uid>
`data-state`	"open" \| "closed"
`data-focus`	Present when focused
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid

select.trigger

Opens and closes the select menu. Renders a <button> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-trigger`	<uid>
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-placement`	The placement of the trigger
`data-align-with-trigger`
`data-side`	The side of the trigger that the trigger is positioned on
`data-placeholder-shown`	Present when placeholder is shown

select.valueText

Displays the selected value or placeholder text. Renders a <span> element.

Name	Description	Required	Default
`placeholder`	`string` The placeholder text to render when no value is selected.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-value-text`	<uid>
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-focus`	Present when focused

select.indicator

Displays a decorative indicator for the trigger. Renders a <span> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-indicator`	<uid>
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only

select.clearTrigger

Clears the current selection. Renders a <button> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-clear-trigger`	<uid>
`data-invalid`	Present when invalid

select.positioner

Positions the floating select content. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-positioner`	<uid>
`data-nested`	Present when the positioner is nested within another {{widget}}
`data-has-nested`	Present when the positioner has nested {{widget}}s

select.content

The popup surface, positioned by positioner. Holds the list and, with popupTypedialog, other widgets next to it. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-content`	<uid>
`data-state`	"open" \| "closed"
`data-placement`	The placement of the content
`data-align-with-trigger`
`data-side`	The side of the trigger that the content is positioned on
`data-nested`	listbox
`data-has-nested`	listbox

select.list

The listbox inside content that holds the options - it takes focus, scrolls and tracks the active option. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-list`	<uid>
`data-activedescendant`	The id the active descendant of the list

select.itemGroup

Groups related options together. Renders a <div> element.

Name	Description	Required	Default
`value`	`string` The value identifier of the item group.	Yes	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-item-group`	<uid>
`data-disabled`	Present when disabled

select.itemGroupLabel

Labels a group of related options. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

select.item

Represents a selectable option. Renders a <div> element.

Name	Description	Required	Default
`item`	`mixed` The item to render.	Yes	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-item`	<uid>
`data-value`	The value of the item
`data-state`	"checked" \| "unchecked"
`data-highlighted`	Present when highlighted
`data-disabled`	Present when disabled

select.itemText

Displays the text content of an option. Renders a <span> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-item-text`	<uid>
`data-state`	"checked" \| "unchecked"
`data-disabled`	Present when disabled
`data-highlighted`	Present when highlighted

select.itemIndicator

Displays the selected-state indicator for an option. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-select-item-indicator`	<uid>
`data-state`	"checked" \| "unchecked"

select.hiddenSelect

Provides the native <select> element for form submission. Renders a <select> element, with the empty-value input that submits '' while nothing is selected in front of it.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Machine JavaScript API

Name	Type	Description
`scrollArrowVisibility`	`"none" \| "top" \| "bottom" \| "both"`	Which scroll arrows should be visible based on the content's scroll position. - `"none"`: content fits, no scrolling needed - `"top"`: scrolled past the top (top arrow visible) - `"bottom"`: more content below (bottom arrow visible) - `"both"`: scrolled somewhere in the middle (both arrows visible)
`focused`	`boolean`	Whether the select is focused
`open`	`boolean`	Whether the select is open
`empty`	`boolean`	Whether the select value is empty
`highlightedValue`	`string \| null`	The value of the highlighted item
`highlightedItem`	`V \| null`	The highlighted item
`setHighlightValue`	`(value: string) => void`	Function to highlight a value
`clearHighlightValue`	`VoidFunction`	Function to clear the highlighted value
`selectedItems`	`V[]`	The selected items
`hasSelectedItems`	`boolean`	Whether there's a selected option
`value`	`string[]`	The selected item keys
`valueAsString`	`string`	The string representation of the selected items
`selectValue`	`(value: string) => void`	Function to select a value
`selectAll`	`VoidFunction`	Function to select all values
`setValue`	`(value: string[]) => void`	Function to set the value of the select
`clearValue`	`(value?: string) => void`	Function to clear the value of the select. If a value is provided, it will only clear that value, otherwise, it will clear all values.
`focus`	`VoidFunction`	Function to focus on the select input
`getItemState`	`(props: ItemProps) => ItemState`	Returns the state of a select item
`setOpen`	`(open: boolean) => void`	Function to open or close the select
`collection`	`ListCollection<V>`	Function to toggle the select
`reposition`	`(options?: Partial<PositioningOptions>) => void`	Function to set the positioning options of the select
`multiple`	`boolean`	Whether the select allows multiple selections
`disabled`	`boolean`	Whether the select is disabled
`getRootState`	`() => RootState`	Returns the state of the root
`getTriggerState`	`() => TriggerState`	Returns the state of the trigger
`getContentState`	`() => ContentState`	Returns the state of the content

Accessibility

Key	Description
`Space`	When focus is on trigger, opens the select and focuses the first selected item. When focus is on the content, selects the highlighted item.
`Enter`	When focus is on trigger, opens the select and focuses the first selected item. When focus is on content, selects the focused item.
`ArrowDown`	When focus is on trigger, opens the select. When focus is on content, moves focus to the next item.
`ArrowUp`	When focus is on trigger, opens the select. When focus is on content, moves focus to the previous item.
`Esc`	Closes the select and moves focus to trigger.
`A-Za-z`	When focus is on trigger, selects the item whose label starts with the typed character. When focus is on the listbox, moves focus to the next item with a label that starts with the typed character.