Select

stable

Dropdown selection with Radix-powered accessible listbox

Data EntryInteractive/Storybook ↗

import { Select } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`variant`	`"default" \| "ghost" \| "outline"`	"default"	Trigger border style
`size`	`"default" \| "sm" \| "lg"`	"default"	Trigger height and text size
`placeholder`	`string`	—	Placeholder text when no value selected
`options`req	`Array<{ value: string; label: string }>`	—	MultiSelect / SearchableSelect option list
`value`	`string[] \| string`	—	Selected value(s)
`onChange`req	`(value) => void`	—	Selection change handler
`disabled`	`boolean`	false	Disable all interaction

variant

Type "default" | "ghost" | "outline"Default "default"

Trigger border style

size

Type "default" | "sm" | "lg"Default "default"

Trigger height and text size

placeholder

Type stringDefault —

Placeholder text when no value selected

optionsrequired

Type Array<{ value: string; label: string }>Default —

MultiSelect / SearchableSelect option list

value

Type string[] | stringDefault —

Selected value(s)

onChangerequired

Type (value) => voidDefault —

Selection change handler

disabled

Type booleanDefault false

Disable all interaction

MobileTouch Target

Select triggers native OS picker on mobile — this is intentional and correct. Ensure the select row is at least 44px tall.

Design Rationale

This component was designed to express:

Text input with label, hint, and error states

Single-selection radio button group

Was this helpful?