forms

Select

A listbox with typeahead, roving focus and collision-aware positioning — not a native select.

Single choice

A listbox, not a native `<select>` — so it can be styled, but it still posts with a form through a hidden input.

Deploy region

Type a letter with the list open to jump to it.

Grouped options

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