Select
Accessible, composable listbox primitives that follow the Radix-style API while using Floating UI for positioning.
Anatomy
Import the building blocks and compose them to match your UI.
API Reference
Root
Provides context, manages controlled/uncontrolled selection and open state, wires dismissal handlers, portals the list, and syncs form values when a
name is provided.| Prop | Type | Default |
|---|---|---|
| value | string | undefined | - |
| defaultValue | string | - |
| onValueChange | function | - |
| open | boolean | - |
| defaultOpen | boolean | false |
| onOpenChange | function | - |
| disabled | boolean | false |
| closeOnEscape | boolean | true |
| closeOnOutside | boolean | true |
| offset | number | 6 |
| disableLockScroll | boolean | true |
| container | Element | DocumentFragment | null | document.body |
| name | string | - |
| id | string | auto-generated |
Trigger
The interactive button that toggles the dropdown. Inherits every button prop and exposes
data-state for styling.| Prop | Type | Default |
|---|---|---|
| type | string | button |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
Value
Displays the currently selected item or a
placeholder, and updates via context whenever Select.Item is chosen.| Prop | Type | Default |
|---|---|---|
| placeholder | ReactNode | null |
| children | ReactNode | - |
Content
The floating list. Rendered inside a portal derived from
Select.Root, supports forceMount for exit animations, and exposes placement/state attributes from Floating UI.| Prop | Type | Default |
|---|---|---|
| forceMount | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-placement | "top" | "bottom" |
Item
Individual option within the list. Registers its label with the root, updates selection on click, and exposes
data-state / data-disabled for styling.| Prop | Type | Default |
|---|---|---|
| value | string | - |
| disabled | boolean | false |
| textValue | ReactNode | children |
| Data Attribute | Value |
|---|---|
| data-state | "selected" | "unselected" |
| data-disabled | "" |