Select

A select displays a collapsible list of options and allows a user to select one of them or multiple of them.

Source

View source code

Issues

Report an issue

Package

@rootui/select

Reference

React Aria docs

Preview

variant

selectionMode

size

isDisabled

1<Select
2  className="w-40"
3  placeholder="Choose an option..."
4>
5  <Select.Item>
6    Option 1
7  </Select.Item>
8  <Select.Item>
9    Option 2
10  </Select.Item>
11  <Select.Item>
12    Option 3
13  </Select.Item>
14</Select>

Anatomy

1<Select>
2  <Select.Item></Select.Item>
3</Select>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/select

Usage

1import { Select } from "@rootui/select";
2
3export default function Page() {
4  return (
5    <Select>
6      <Select.Item>my first item</Select.Item>
7      <Select.Item>my second item</Select.Item>
8    </Select>
9  )
10}

API Reference

See the React Aria documentation for more information.

Input

Prop	Type	Default
`variant`	`'filled' \| 'outlined' \| 'transparent'`	`'filled'`

`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

`placeholder`	`string`	`-`
Temporary text that occupies the select when it is empty.
`allowsEmptyCollection`	`Boolean`	`-`
Whether the select should be allowed to be open when the collection is empty.
`isDisabled`	`Boolean`	`-`
Whether the input is disabled.
`selectionMode`	`'single' \| 'multiple'`	`-`
Whether single or multiple selection is enabled.
`disabledKeys`	`Iterable<Key>`	`-`
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`value`	`ValueType<SelectionMode>`	`-`
The current value (controlled).
`defaultValue`	`ValueType<SelectionMode>`	`-`
The default value (uncontrolled).
`onChange`	`(value: ChangeValueType<SelectionMode>) => void`	`-`
Handler that is called when the value changes.
`isOpen`	`Boolean`	`-`
Sets the open state of the menu.
`defaultOpen`	`Boolean`	`-`
Sets the default open state of the menu.
`onOpenChange`	`(isOpen: boolean) => void`	`-`
Method that is called when the open state of the menu changes.

Attribute	Description
`data-focused`	Whether the select is focused, either via a mouse or keyboard.
`data-focus-visible`	Whether the select is keyboard focused.
`data-disabled`	Whether the select is disabled.
`data-open`	Whether the select is currently open.
`data-invalid`	Whether the select is invalid.
`data-required`	Whether the select is required.

Select.Value

Prop	Type	Default
`children`	`ReactNode \| (values: T & { defaultChildren: ReactNode \| undefined }) => ReactNode`	`-`
The children of the component. A function may be provided to alter the children based on component state.