Select

Use a select when the available options are known and the user should choose one value.

Booking status

Show codeCopy

Import

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@workshop1/ui/components/select"

Composition

Add a placeholder with SelectValue when no value is selected. Group related options with SelectGroup and add SelectLabel when the list needs headings.

Accessibility

Keep the trigger label clear and use a visible Label when the surrounding form does not already name the field. The select supports keyboard navigation and type-ahead search.

Best practices

• Keep short lists in a stable, meaningful order.
• Use a native select when platform behavior is more useful than a styled popover.
• Do not use a select for a binary choice; use a switch or checkbox instead.