# Select

- Page: <https://kznlabs.github.io/labsUI/components/select>

## Select (`select`, component)

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.

- Install: `npx @kznlabs/labsui add select`
- Docs: <https://kznlabs.github.io/labsUI/components/select>
- Brings: field, input, label, list, platform, use-anchor, use-controllable-state, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<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`.

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

### Usage

```tsx
<Select id="role" name="role" options={[{ value: "admin", label: "Admin" }]} value={v} onValueChange={setV} placeholder="Pick a role" />
```

### Example: role-picker.tsx

```tsx
"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>
  );
}
```