Select

Custom-styled, fully accessible select built on Radix's Select primitive — correct listbox semantics, typeahead, and keyboard navigation.

<Select
  label="Timezone"
  defaultValue="utc"
  options={[
    { value: "utc", label: "UTC" },
    { value: "est", label: "Eastern (US)" },
    { value: "pst", label: "Pacific (US)" },
  ]}
/>

Editable — change the code above and the preview updates live.

Installation

import { Select } from "@labanaat/ui/select";

Props

Prop	Type	Default	Description
options	{ value, label, disabled? }[]	—	The selectable options
value / defaultValue	string	—	Controlled / uncontrolled selected value
onValueChange	(value) => void	—	Change handler
label	string	—	Field label
placeholder	string	—	Shown when no value is selected
disabled	boolean	false	Disables interaction