Select
Choose one or several options from a list. A field that opens the kit Dropdown. Looks like Input.
Master
Click the field to open the list. Toggle multiple to pick several. Switch size, label position and message.
Usage
Use Select to pick a value from a fixed list in a form or filter: country, status, owner, tags. One pick closes the menu; with multiple the menu stays open and each pick toggles. The field shows the picked labels; with maxVisible it shows the first few and a +N badge. Label, hint, error, help, required and sizes work like Input. For 2 to 5 options that should stay visible, use RadioGroup. See contracts/select.json for the full contract. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- Picking one value from a fixed list, like a country or status.
- Picking several values, like tags or owners (multiple).
- A long list, like countries or customers (searchable).
- A value in a table row (Cell type select).
Don'ts
- Do not use a native select.
- Do not invent SelectTrigger, SelectContent, SelectItem, MultiSelect, Combobox or Tag.
- Do not use for actions from a button. Use Dropdown.
- Do not use for 2 to 5 options that should stay visible. Use RadioGroup.
- Do not use for search across the app. Use GlobalSearch.
- Do not use raw hex.
<Select
label="Country"
options={[
{ value: "australia", label: "Australia" },
{ value: "austria", label: "Austria" },
{ value: "belgium", label: "Belgium" },
{ value: "brazil", label: "Brazil" },
{ value: "canada", label: "Canada" },
{ value: "croatia", label: "Croatia" },
{ value: "denmark", label: "Denmark" },
{ value: "france", label: "France" },
{ value: "germany", label: "Germany" },
{ value: "india", label: "India" },
{ value: "ireland", label: "Ireland" },
{ value: "italy", label: "Italy" },
{ value: "japan", label: "Japan" },
{ value: "serbia", label: "Serbia" },
{ value: "spain", label: "Spain" },
{ value: "united-kingdom", label: "United Kingdom" },
{ value: "united-states", label: "United States" },
]}
size="md"
labelPosition="top"
placeholder="Select a country"
menuWidth="default"
/>