Skip to content

Select

One choice from a styled list, with groups and disabled options. Reads its Field: label, hint, error.

Sourcecomponents/select.tsx

In a Field

Owners are set by billing.

Invalid

Usage

Select usage
import { Field, FieldLabel } from "@/components/field";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/select";
const roles = [  { label: "Viewer", value: "viewer" },  { label: "Editor", value: "editor" },  { label: "Owner", value: "owner" },];
export function SelectUsage() {  return (    <Field>      <FieldLabel>Role</FieldLabel>      <Select items={roles} defaultValue="viewer">        <SelectTrigger>          <SelectValue placeholder="Choose a role" />        </SelectTrigger>        <SelectContent>          {roles.map((role) => (            <SelectItem key={role.value} value={role.value}>              {role.label}            </SelectItem>          ))}        </SelectContent>      </Select>    </Field>  );}

When to use

Use when

One choice from a styled list, with groups and disabled options, inside a Field. Pass items so the trigger shows the label

Don’t use when

A short plain list (Native Select is lighter); a long list (use Combobox); actions (use Dropdown Menu)