forms
Select
A listbox with typeahead, roving focus and collision-aware positioning — not a native select.
Examples
Single choice
A listbox, not a native `<select>` — so it can be styled, but it still posts with a form through a hidden input.
Type a letter with the list open to jump to it.
Grouped options
Trigger shells
Thirteen shells over one listbox. `variant` and `size` carry the shape; `renderValue` is what puts an icon, a glyph or a status dot in front of the label. Every tile copies on its own.
Sizes
All five control sizes, then the same scale combined with shape overrides so a compact form and a hero form use one component.
Scale
Sizes with shape overrides
States
Placeholder, disabled, invalid and required — on the root, on individual options, and wired through `FieldRoot` for label and error text.
On the root
On options
With FieldRoot
Changing this prorates the current period.
Pick a tier before continuing.
Enterprise includes a named engineer.
Prefixes and suffixes
`renderValue` owns the trigger content, so a flag, an avatar, a count, a price or a keyboard hint all sit inside the same control.
Grouping
Groups with and without a leading ungrouped item, disabled sections, emoji labels, and lists wide enough to break out of the trigger.
Rich option rows
Two-line rows, avatars and trailing metadata. `textValue` keeps type-to-select working when the label is no longer plain text.
Placement
`side`, `align`, `sideOffset` and `collisionPadding` on the content, plus `matchTriggerWidth` against a free-width list.
side
align
sideOffset and collisionPadding
Width
Semantic tones
Neutral, accent, success, warning and danger — each as a subtle fill, a solid fill and an edge treatment, all from the token set.
Subtle and solid
Neutral, edges and rings
Controlled patterns
Dependent selects, mirrored state, reset and clear buttons, a controlled `open`, and two triggers bound to one value. Each tile copies with its own state.
value: mchanges: 0Forms
`name` posts through a hidden input. The rest is `FieldRoot` — labels, descriptions, errors, sizes and a real submit.
Routing for new tickets.
This field is required.
Locked by your administrator.
Long lists
Twenty-four timezones and thirty years. The size middleware caps the list to the space below the trigger; type a letter to jump.
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and field, internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add select writes them, follows the same dependency graph, and fixes up the imports.
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectRoot,
SelectTrigger,
selectTriggerVariants,
} from './select.js';
export type {
SelectContentProps,
SelectGroupProps,
SelectItemData,
SelectItemProps,
SelectProps,
SelectSize,
SelectTriggerProps,
SelectVariant,
} from './select.types.js';API reference
SelectProps
| Prop | Type | Description |
|---|---|---|
| value | string | — |
| defaultValue | string | — |
| onValueChange | (value: string) => void | — |
| open | boolean | — |
| defaultOpen | boolean | — |
| onOpenChange | (open: boolean) => void | — |
| name | string | Posts with the surrounding form under this name. |
| disabled | boolean | — |
| required | boolean | — |
| invalid | boolean | — |
| children | React.ReactNode | — |
SelectTriggerProps
Also accepts everything from Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>.
| Prop | Type | Description |
|---|---|---|
| variant | SelectVariant | — |
| size | SelectSize | — |
| placeholder | React.ReactNode | Shown when nothing is selected. |
| renderValue | (value: string | undefined) => React.ReactNode | Replaces the default rendering of the selected item's label. |
SelectContentProps
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
| Prop | Type | Description |
|---|---|---|
| side | Side | — |
| align | Align | — |
| sideOffset | number | — |
| collisionPadding | number | — |
| container | Element | null | — |
| matchTriggerWidth | boolean | Make the list at least as wide as the trigger. |
SelectItemProps
Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>.
| Prop | Type | Description |
|---|---|---|
| value* | string | — |
| disabled | boolean | — |
| children | React.ReactNode | The label. Read directly out of the element tree, so it must be plain enough to render inside the trigger too — text, or text with an icon. |
| textValue | string | Overrides the text used for type-to-select when children are not plain text. |
SelectGroupProps
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
| Prop | Type | Description |
|---|---|---|
| label | React.ReactNode | — |
SelectItemData
| Prop | Type | Description |
|---|---|---|
| value* | string | — |
| label* | React.ReactNode | — |
| textValue* | string | — |
| disabled* | boolean | — |