Select

Single-choice listbox styled like Input, with groups, icons and disabled options. Native-select keyboard (arrows, typeahead even while closed), flips above the trigger near the viewport edge, submits via a hidden input.

npx @kznlabs/labsui add select

"use client";import { useState } from "react";import { Field } from "@/components/ui/field";import { Select } from "@/components/ui/select";const roles = [  { value: "admin", label: "Admin" },  { value: "moderator", label: "Moderator" },  { value: "member", label: "Member" },];export function RolePicker() {  const [role, setRole] = useState("member");  return (    <Field label="Role">      <Select        name="role"        options={roles}        value={role}        onValueChange={setRole}      />    </Field>  );}

<Select>

Single-choice listbox styled like Input. Keyboard matches a native select: Up, Down, Home, End, typeahead (also while closed), Enter or Space to pick, Esc to cancel.

options*
SelectGroup[] | SelectOption[]
Flat options, or labeled groups of options.
aria-describedby
string
Ids of hint or error text; Field fills it in.
aria-invalid
boolean
Error styling; Field sets it from error.
aria-label
string
Accessible name when there is no visible label.
defaultValue
string
Value at first render (uncontrolled).
disabled
boolean
Blocks opening.
id
string
Pair with <Label htmlFor>, or let <Field> fill it in.
name
string
Submits the value with a form, through a hidden input.
onValueChange
(value: string) => void
Called with the picked value.
placeholder
string
Trigger text when nothing is picked.
required
boolean
Form submit needs a value.
value
string
Controlled value; pair with onValueChange.

Prop	Type	Default
`options*` Flat options, or labeled groups of options.	`SelectGroup[] \| SelectOption[]`	—
`aria-describedby` Ids of hint or error text; Field fills it in.	`string`	—
`aria-invalid` Error styling; Field sets it from `error`.	`boolean`	—
`aria-label` Accessible name when there is no visible label.	`string`	—
`defaultValue` Value at first render (uncontrolled).	`string`	—
`disabled` Blocks opening.	`boolean`	—
`id` Pair with <Label htmlFor>, or let <Field> fill it in.	`string`	—
`name` Submits the value with a form, through a hidden input.	`string`	—
`onValueChange` Called with the picked value.	`(value: string) => void`	—
`placeholder` Trigger text when nothing is picked.	`string`	—
`required` Form submit needs a value.	`boolean`	—
`value` Controlled value; pair with `onValueChange`.	`string`	—

type SelectOption: { value: string; label: string; icon?: ReactNode; disabled?: boolean }
type SelectGroup: { label: string; options: SelectOption[] }

* required. Every component also takes className.