Select
Displays a list of options for the user to pick from—triggered by a button.
Installation
npm i @huin-core/react-selectAPI Reference
Select
| Prop | Type | Description |
|---|---|---|
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| defaultOpen | boolean | Determines whether the component should be open by default when it is initially rendered. |
| open | boolean | Controls the open state of the component. When set to true, the component is displayed; when false, it is hidden. |
| defaultValue | "banana" | "blueberry" | "grapes" | "pineapple" | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| value | "banana" | "blueberry" | "grapes" | "pineapple" | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
| dir | "ltr" | "rtl" | The reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
| name | string | The name of the piece. |
| required | boolean | When true, indicates that the user must check the switch before the owning form can be submitted. |
SelectTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
SelectValue
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| placeholder | string | The content that will be rendered inside the Select.Value when no value or defaultValue is set. |
SelectIcon
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectContent
| Prop | Type | Description |
|---|---|---|
| position | "item-aligned" | "popper" | The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu. |
| side | "top" | "right" | "bottom" | "left" | The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. |
| align | "center" | "start" | "end" | Defines the alignment of the component, determining its position relative to other elements or within its container. |
| sticky | "partial" | "always" | The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| onCloseAutoFocus | function | Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| avoidCollisions | boolean | When true, overrides the side andalign preferences to prevent collisions with boundary edges. |
| hideWhenDetached | boolean | Whether to hide the content when the trigger becomes fully occluded. |
| sideOffset | number | The distance in pixels from the anchor. |
| alignOffset | number | An offset in pixels from the 'start' or 'end' alignment options. |
| collisionPadding | number | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
| arrowPadding | number | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. |
SelectViewport
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| textValue | string | Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside. |
SelectItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectItemText
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectItemIndicator
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectScrollUpButton
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectScrollDownButton
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectGroup
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectLabel
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectSeparator
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SelectArrow
| Prop | Type | Description |
|---|---|---|
| width | number | The width of the piece in pixels. |
| height | number | The width of the height in pixels. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Opens the select, or picks the highlighted item. |
ArrowDown | Highlights the next item. |
ArrowUp | Highlights the previous item. |
Esc | Closes the select and returns focus to the trigger. |