Select
InputsDropdown selector built on Radix UI Select for accessibility.
Accessible single-value picker composed from sub-components: SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator.
Usage
import { Select, SelectTrigger, SelectContent, SelectItem } from "nosible-ux"
export default function Example() {
return (
<Select>
<SelectTrigger placeholder="Select region" />
<SelectContent>
<SelectItem value="us">United States</SelectItem>
<SelectItem value="eu">European Union</SelectItem>
<SelectItem value="apac">Asia-Pacific</SelectItem>
</SelectContent>
</Select>
)
}Examples
Grouped options
Sizes
Accessibility
Built on Radix Select: keyboard navigation (Up/Down/Home/End), type-ahead, and focus management are handled. Selected item shows a Neo Green left accent border.
Props
| Name | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | undefined | — | |
alignOffset | number | undefined | — | |
arrowPadding | number | undefined | — | |
asChild | boolean | undefined | — | |
avoidCollisions | boolean | undefined | — | |
collisionBoundary | Boundary | Boundary[] | undefined | — | |
collisionPadding | number | Partial<Record<"top" | "bottom" | "left" | "right", number>> | undefined | — | |
hideWhenDetached | boolean | undefined | — | |
onCloseAutoFocus | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on close. Can be prevented. |
onEscapeKeyDown | ((event: KeyboardEvent) => void) | undefined | — | Event handler called when the escape key is down. Can be prevented. |
onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | undefined | — | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
position | "item-aligned" | "popper" | undefined | — | |
side | "top" | "bottom" | "left" | "right" | undefined | — | |
sideOffset | number | undefined | — | |
sticky | "partial" | "always" | undefined | — | |
updatePositionStrategy | "always" | "optimized" | undefined | — |