Forms

Select

An input-styled dropdown for picking one option from a short list, built on Radix Select.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

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

Choosing one option from roughly 4 to 15 known values, such as a plan, role or sort order.
Compact settings and toolbars where a radio group would take too much room.

For long lists people would rather search, use Combobox.
For two or three options that should all be visible, use a radio group or a segmented control.
For actions rather than values, use a dropdown menu.

Hold the value in state with value and onValueChange.

Set aria-invalid on the trigger and pass error to Field.

Disable the whole select, or single options with disabled on SelectItem.

Radix Select.Root. Holds the value; renders no markup of its own.

Prop	Type	Default	Description
value	string	-	Controlled selected value.
defaultValue	string	-	Initial value when uncontrolled.
onValueChange	(value: string) => void	-	Called when an option is picked.
disabled	boolean	-	Disables the whole select.
name	string	-	Submits the value with a surrounding form.
required	boolean	-	Marks the value as required for form validation.
open / onOpenChange	boolean / (open: boolean) => void	-	Control the open state yourself.

Input-styled button with a chevron. Extends Radix Select.Trigger props (id, aria-*, className).

Prop	Type	Default	Description
aria-invalid	boolean	-	Shows the error style.
aria-label	string	-	Accessible name when there is no linked Label.
className	string	-	Merged with the defaults. Full width by default; set a width such as w-44 for inline use.

Radix Select.Value. Shows the selected option's text inside the trigger.

Prop	Type	Default	Description
placeholder	React.ReactNode	-	Shown in muted text when nothing is selected.

The floating list, rendered in a portal. Extends Radix Select.Content props (side, align).

Prop	Type	Default	Description
position	"popper" \| "item-aligned"	"popper"	popper opens below the trigger; item-aligned overlaps it with the selected item in place.
sideOffset	number	6	Gap between trigger and list in pixels.

One option. The selected option reads in violet with a check.

Prop	Type	Default	Description
value	string	-	Required. The value passed to onValueChange.
disabled	boolean	-	Shows the option dimmed and skips it during keyboard navigation.
textValue	string	-	Text used for type-ahead when children are not plain text.

Built on Radix Select: the trigger is a combobox and the list a listbox with options and aria-selected.
Enter, Space or Arrow Down opens the list; arrows move, Enter selects, Escape closes and returns focus to the trigger.
Type-ahead jumps to the first option starting with the typed letters.
Field's label is not linked automatically: give SelectTrigger an aria-label, or an id with a Label htmlFor.
Set aria-invalid on SelectTrigger for the error state.