# Select Selects one option from an overlay. The closed trigger carries a chevron. Category: forms Name: `select` Also known as: Select, Listbox, Dropdown select, Picker Page: https://vlak.dev/components/select/ ## When to use - One choice from a list of five or more when the labels are short. - Lists that benefit from type-ahead and a consistent overlay across platforms. - Use fullWidth in compound field layouts. name and form support native submission; required uses native validation and reset restores uncontrolled defaults. readOnly preserves the submitted selection. - Mark unavailable options disabled; they stay visible and are skipped by keyboard navigation. ## When not to - Free text or filtering; use Combobox. - A platform picker when it is specifically preferred; use NativeSelect. ## Install **React package.** Precompiled; no compiler to configure. ```sh npm install @noorddev/vlak-react ``` ```tsx import "@noorddev/vlak-react/css"; import { Select } from "@noorddev/vlak-react"; ``` **Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own. ```sh npx @noorddev/vlak-cli add select ``` **shadcn registry.** Same files, through the shadcn CLI. ```sh npx shadcn add https://vlak.dev/r/select.json ``` **CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`. ```html
Alkmaar
Amsterdam
``` ## Example ```tsx import { useState } from "react"; import { Select } from "@noorddev/vlak-react"; const [city, setCity] = useState("alkmaar");