Pick one option from a dropdown

At a glanceCopy Anchor Link

• Who: Form builders offering 4+ exclusive options in little space.
• What: Accessible dropdown select with trigger, value and items; empty lists render a disabled message item.
• Use when: For long option lists where radio groups would sprawl.
• Avoid when: For 2–3 visible options — use radio inputs or OptionCards instead.
• See also: Toggle a checkbox or a switch, Guide a multi-step flow with selectable option cards

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.3.0 (via changesets).

ExampleCopy Anchor Link

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@zedtech/zedkit-ui";
const items = regions.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>);
<Select onValueChange={setRegion}>
<SelectTrigger><SelectValue placeholder="Pick a region" /></SelectTrigger>
<SelectContent>{items.length === 0 ? <SelectItem value="none" disabled>No regions available</SelectItem> : items}</SelectContent>

Wraps: @radix-ui/react-select