Select
20 partsAnatomy
Import the parts and compose them. Each part forwards attributes to its underlying element.
import {
SelectRoot,
SelectTrigger,
SelectValue,
SelectIcon,
SelectPortal,
SelectContent,
SelectContentImpl,
SelectItemAlignedPosition,
SelectPopperPosition,
SelectViewport,
SelectScrollUpButton,
SelectScrollDownButton,
SelectGroup,
SelectLabel,
SelectItem,
SelectItemText,
SelectItemIndicator,
SelectSeparator,
SelectArrow,
SelectScrollButtonImpl,
} from '@robonen/primitives/select';
<SelectRoot>
<SelectTrigger />
<SelectValue />
<SelectIcon />
<SelectPortal />
<SelectContent />
<SelectContentImpl />
<SelectItemAlignedPosition />
<SelectPopperPosition />
<SelectViewport />
<SelectScrollUpButton />
<SelectScrollDownButton />
<SelectGroup />
<SelectLabel />
<SelectItem />
<SelectItemText />
<SelectItemIndicator />
<SelectSeparator />
<SelectArrow />
<SelectScrollButtonImpl />
</SelectRoot>API Reference
SelectRoot
Root| Prop | Type | Description |
|---|---|---|
dir? | Direction | Reading direction. Falls back to ConfigProvider. |
disabled? | boolean | Disable the whole select. |
required? | boolean | Mark field as required for native form validation. |
name? | string | Native input name for form submission. |
defaultValue? | string | Uncontrolled default value. |
defaultOpen? | boolean | Uncontrolled default open state. |
autocomplete? | string | Native autocomplete attribute forwarded to the hidden input. |
SelectTrigger
Trigger| Prop | Type | Description |
|---|---|---|
disabled? | boolean | Disable this trigger independently from the root. |
SelectValue
Value| Prop | Type | Description |
|---|---|---|
placeholder? | string | Text shown when no option is selected. |
SelectIcon
IconNo props or events — renders its element and forwards attributes.
SelectPortal
PortalNo props or events — renders its element and forwards attributes.
SelectContent
ContentNo props or events — renders its element and forwards attributes.
SelectContentImpl
ContentImpl| Prop | Type | Description |
|---|---|---|
position? | 'item-aligned' | 'popper' | Position mode. |
disableOutsidePointerEvents? | boolean | Block outside pointer events. |
SelectItemAlignedPosition
ItemAlignedPosition| Prop | Type | Description |
|---|---|---|
dir? | string | — |
SelectPopperPosition
PopperPositionNo props or events — renders its element and forwards attributes.
SelectViewport
ViewportNo props or events — renders its element and forwards attributes.
SelectGroup
GroupNo props or events — renders its element and forwards attributes.
SelectLabel
LabelNo props or events — renders its element and forwards attributes.
SelectItem
Item| Prop | Type | Description |
|---|---|---|
value | string | The option value. |
disabled? | boolean | Disable this item. |
SelectItemText
ItemTextNo props or events — renders its element and forwards attributes.
SelectItemIndicator
ItemIndicatorNo props or events — renders its element and forwards attributes.
SelectSeparator
SeparatorNo props or events — renders its element and forwards attributes.
SelectArrow
ArrowNo props or events — renders its element and forwards attributes.