ns-ui
Single-select whose frosted-glass trigger and listbox sit over drifting caustic light pools; hovering or arrow-keying an option bends the caustics toward that row so the highlight reads as pressed into the glass.
Use when a short flat single-select that must be a real form control with listbox keyboard semantics, where the highlight should read as pressed into glass rather than as a filled row; pick dropdown-drape instead when it is a nav menu rather than a form field, listbox-sticky-groups when the list is long and grouped, or search-winnow when the user needs to type to narrow it.
Install
npx shadcn add https://design.helpmarq.comns-ui / select-caustic
Where serverless functions execute. The select is frosted glass — open it and watch the caustics pool under the active row.
functions → fra1
Open with Enter, Space, or the arrow keys. Arrow through the options and the light lens follows; type to jump by name; Esc closes and returns focus to the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
| options? | CausticSelectOption[] | DEFAULT_OPTIONS | — |
| value? | string | — | controlled value; omit for uncontrolled |
| defaultValue? | string | — | — |
| onValueChange? | (value: string) => void | — | — |
| label? | string | "Region" | field label rendered above the trigger |
| placeholder? | string | "Select a region" | — |
| disabled? | boolean | false | — |
| name? | string | — | when set, renders a hidden input for form posts |
| className? | string | — | — |