Select

Displays a list of options for the user to pick from, triggered by a button, built on Radix UI's Select primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/select.json

Use Select when the user picks exactly one option from a list that doesn't comfortably fit on screen (more than ~5 options) or when the trigger needs to display the current value compactly. For short, always-visible option sets, prefer RadioGroup.

Compose Select from its sub-components: SelectTrigger (with SelectValue), SelectContent, and SelectItem. Group related items with SelectGroup + SelectLabel. Add visual breaks with SelectSeparator.

Preview

Default

Favourite fruit

Grouped with labels and a separator

Timezone

Disabled

Locked

Props

`Select`

Extends React.ComponentProps<typeof SelectPrimitive.Root>.

Prop	Type	Notes
`value`	`string`	Controlled selected value.
`defaultValue`	`string`	Initial value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	Fired when the user picks an item.
`disabled`	`boolean`	Disables the entire control.
`name`	`string`	Name attribute on the underlying form input.

`SelectTrigger`

Extends React.ComponentProps<typeof SelectPrimitive.Trigger> plus a size prop.

Prop	Type	Notes
`size`	`"sm" \| "default"`	Trigger height. Defaults to `"default"`.

`SelectItem`

Extends React.ComponentProps<typeof SelectPrimitive.Item>.

Prop	Type	Notes
`value`	`string`	The value selected when this item is picked. Required.
`disabled`	`boolean`	Disables this item only.