Selects capture one or more values from a list behind a compact trigger, in a family that spans search, counts, tags, and the platform picker.
Selects capture one or more values from a list behind a compact trigger, in a family that spans search, counts, tags, and the platform picker.
Change the props and copy the result. The two entries mirror the sheet’s frames: Select carries the full Type axis, with search and tags rendering the ComboBox and TagSelect members, and Multi-select brings its controlled wiring. Snippets always emit the real component with the props you set, never a simplified stand-in. The two controlled entries, MultiSelect and TagSelect, also emit their state wiring — a useState or useListData call — which belongs inside your own component rather than at the top level where the snippet shows it.
6 components, and every popover member shares one items contract: id, label, supporting text, and an icon or avatar per item. The single-value Select is the default; the others trade its trigger for search, counts, or tags, and NativeSelect swaps the popover for the OS picker with plain options.
| Component | Description | Import from |
|---|---|---|
| Select | The single-value dropdown field: label, trigger button, popover listbox, and hint. | @/components/base/select/select |
| SelectItem | One option row, also available as Select.Item; carries icons, avatars, supporting text, and the selection indicator. | @/components/base/select/select-item |
| ComboBox | The searchable select, also available as Select.ComboBox: a text input that filters the list as you type. | @/components/base/select/combobox |
| MultiSelect | Several values behind one compact trigger that reads “2 selected”; the popover carries search, checkboxes, and a footer. | @/components/base/select/multi-select |
| TagSelect | Several values shown as removable tags inside the field, filtered by typing. | @/components/base/select/tag-select |
| NativeSelect | A styled wrapper around the platform’s own select element; options open in the OS picker. | @/components/base/select/select-native |
The 3 sizes, read from the kit’s exported style object. Triggers measure 36, 40, and 44px tall, matching the same-named input and button sizes, so mixed rows sit flush. The popover follows the trigger’s width and caps its height per size.
| sm | md | lg |
|---|---|---|
| This is a hint text to help user. Team memberThis is a hint text to help user. | This is a hint text to help user. Team memberThis is a hint text to help user. | This is a hint text to help user. Team memberThis is a hint text to help user. |
Hover and focus states are live. Interact with any cell.
The 4 content forms of the closed field, mirroring the Figma component’s Type axis. The trigger echoes whatever the selected item carries: its icon, its avatar, or its supporting text. The dot form has no prop of its own; the item’s icon slot carries the foundations Dot, which is the audit-recorded gap between the sheet and the kit.
The option rows inside the popover, rendered here in the same React Aria listbox the popover wraps, so every treatment is the kit’s own painting. Selection defaults to a right-aligned checkmark; a checkbox indicator and an indicator-free form are opt-in per item. Hover any row, or click to move the selection.
Hover, focus, and selection share one shade
bg-primary_hover for hover and for focus, and for the selected state too, with one exception read from the source: a selected row takes the shade only when selectionIndicator is not "checkbox", so checkbox lists leave the selected row unshaded and let the box carry the state. Keyboard focus adds an inset ring on top. Where the shade is shared, only the checkmark tells a selected row from a hovered one.The searchable member: a text input in the field, the same items in the popover, filtered as you type. It opens on click or on the first keystroke, and the selected option’s supporting text is echoed inline after the typed value. The command-K badge is off by default and decorative; turn it on only where your app binds the key.
Several values behind one compact trigger: the count and its supporting text replace the value, and the popover carries a search field, checkbox rows, and a Reset and Select all footer. This specimen is fully wired; open it and change the selection.
Controlled or not
selectedKeys to own it, or defaultSelectedKeys to let the component hold it. Reset clears it and Select all picks every enabled item. The wiring lives on the Code tab.Several values as removable tags inside the field. Typing filters the remaining options, picking one appends a tag, and each tag’s close button removes it again; picked options leave the list while they are selected. The selection lives in a ListData you own.
Phoenix Baker
Olivia Rhye
Phoenix Baker
Olivia Rhye
Olivia Rhye
Olivia Rhye
The platform’s own select element wearing the family’s field styling. The options open in the OS picker rather than the DrumKit popover, so item icons, avatars, and supporting text do not apply here.
The option list arrives from the server, so the rows in the popover are skeletons at the row’s own height; the field, its label and the panel stay real.
Every treatment below comes from a real prop on the live component: the placeholder, a selected value, the required asterisk, and the disabled field. Focus and open are live states, not props; tab to any select on this page for the 2px brand ring, which most of the family paints for any focus and while the popover is open; MultiSelect reserves it for keyboard focus, as the callout below explains.
The focus ring is not focus-visible, except on MultiSelect
isFocused state, so it appears for mouse clicks as well as keyboard focus, measured in this page’s probe run. That is unusual: most of the kit reserves rings for focus-visible. MultiSelect is the exception here, and gates its ring on isFocusVisible or isPressed, so it behaves like the rest of the kit rather than like its own family.