Opens a list and returns the single option the user picks.
import { Select } from "@/fragments/ui";Source<Select label="Team" placeholder="Choose a team">
<Select.Trigger />
<Select.Content>
<Select.Item value="design">Design</Select.Item>
<Select.Item value="engineering">Engineering</Select.Item>
<Select.Item value="product">Product</Select.Item>npx @usefragments/cli add selectWrites src/fragments/ui/components/Select plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Select is a compound: import the root and reach its parts through dot notation.
Select.TriggerSelect.ContentSelect.ItemSelect.GroupSelect.GroupLabelLabel, placeholder, three options.
<Select label="Team" placeholder="Choose a team">
<Select.Trigger />
<Select.Content>
<Select.Item value="design">Design</Select.Item>
<Select.Item value="engineering">Engineering</Select.Item>
<Select.Item value="product">Product</Select.Item>
</Select.Content>
</Select>Headed sections separate related options.
<Select placeholder="Choose a country">
<Select.Trigger />
<Select.Content>
<Select.Group>
<Select.GroupLabel>Americas</Select.GroupLabel>
<Select.Item value="us">United States</Select.Item>Helper text explains what the choice affects.
<Select label="Timezone" helperText="Used for reminders and calendar notifications.">
<Select.Trigger placeholder="Select a timezone" />
<Select.Content>
<Select.Item value="pt">Pacific Time</Select.Item>
<Select.Item value="mt">Mountain Time</Select.Item>
<Select.Item value="ct">Central Time</Select.Item>Red border, and the message replaces helper text.
<Select label="Team" placeholder="Choose a team" error="Choose a team before continuing">
<Select.Trigger />
<Select.Content>
<Select.Item value="design">Design</Select.Item>
<Select.Item value="engineering">Engineering</Select.Item>
</Select.Content>Unavailable options stay visible but cannot be picked.
<Select placeholder="Select a plan">
<Select.Trigger />
<Select.Content>
<Select.Item value="free">Free</Select.Item>
<Select.Item value="pro">Pro</Select.Item>
<Select.Item value="enterprise" disabled>Caps at four rows and half-shows the fifth as a scroll hint.
<Select placeholder="Select a timezone">
<Select.Trigger />
<Select.Content maxVisibleItems={4}>
<Select.Item value="utc-8">Pacific Time (UTC-8)</Select.Item>
<Select.Item value="utc-7">Mountain Time (UTC-7)</Select.Item>
<Select.Item value="utc-6">Central Time (UTC-6)</Select.Item>maxVisibleItems raises the cap to six rows.
<Select placeholder="Select a color">
<Select.Trigger />
<Select.Content maxVisibleItems={6}>
<Select.Item value="red">Red</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
<Select.Item value="yellow">Yellow</Select.Item>Dimmed and cannot be opened.
<Select disabled placeholder="Select an option">
<Select.Trigger />
<Select.Content>
<Select.Item value="one">Option 1</Select.Item>
</Select.Content>
</Select>The options array replaces hand-written Select.Item children.
<Select
placeholder="Select a team"
options={[
{ value: "engineering", label: "Engineering" },
{ value: "design", label: "Design" },
{ value: "product", label: "Product" },The trigger grows to fit a long label instead of clipping it.
<Select label="Workspace region" placeholder="Choose a workspace region">
<Select.Trigger />
<Select.Content>
<Select.Item value="eu-central">
Central European workspace with localized administrator recovery requirements
</Select.Item>Prop | Type | Default | Description |
|---|---|---|---|
autoComplete | string | Not set | Browser autofill hint for the hidden input |
children | node | Not set | — |
className | string | Not set | Wrapper class name |
defaultOpen | boolean | Not set | Default open state |
defaultValue | string | Not set | Default value for uncontrolled usage |
disabled | boolean | Not set | Whether the field is disabled |
error | union | Not set | Show error styling. When a string is provided, it is displayed as an error message. |
form | string | Not set | ID of the form that owns the hidden input |
helperText | string | Not set | Helper text shown below the field |
inputRef | union | Not set | Ref to the hidden input element |
label | string | Not set | Visible label text |
name | string | Not set | Form field name |
onChange | function | Not set | Alias for onValueChange |
onOpenChange | function | Not set | Called when open state changes |
onValueChange | function | Not set | Called when selection changes |
open | boolean | Not set | Controlled open state |
options | array | Not set | Convenience API for simple selects (renders Select.Item entries when children are omitted) |
placeholder | string | Not set | Placeholder text when no value is selected |
readOnly | boolean | Not set | Whether the user cannot choose a different option |
required | boolean | Not set | Whether a selection is required |
size | enumsmmdlg | "md" | Size variant. |
value | string | Not set | Controlled selected value |
variant | enumoutlineghost | outline | Chrome. `outline` is the bordered field shell; `ghost` drops it for a compact, borderless control — for toolbars and dense rows, where a bordered field reads as a form. Pair with `size="sm"`. |
Do not use Select for a list of actions.
Don’t
<Select>Delete</Select>Do
<Select label="Choose a value" options={[{ value: "design", label: "Design" }]} />