Select

A dropdown for choosing a single value from a predefined list.

Examples

Placeholder

Disabled

Groups

Overview

Select is a dropdown for picking a single value from a known set. Built on Base UI Select. For free-form filtering or large lists, use Combobox instead.

tsx

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

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Pick a fruit…" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>;

Usage

Groups

Use SelectGroup and SelectLabel to organize related items. Add SelectSeparator between groups for visual separation.

tsx

<SelectContent>
  <SelectGroup>
    <SelectLabel>Citrus</SelectLabel>
    <SelectItem value="orange">Orange</SelectItem>
    <SelectItem value="lemon">Lemon</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Berries</SelectLabel>
    <SelectItem value="strawberry">Strawberry</SelectItem>
  </SelectGroup>
</SelectContent>

Disabled

Disable the whole select via disabled on the root, or individual items via disabled on SelectItem.

tsx

<Select disabled>…</Select>

<SelectItem value="archived" disabled>Archived</SelectItem>

API

Select (Root)

Prop	Type	Default	Description
`value`	`string`	-	Controlled selected value
`defaultValue`	`string`	-	Uncontrolled initial value
`onValueChange`	`(value: string) => void`	-	Called when selection changes
`disabled`	`boolean`	`false`	Disable the entire select
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Called when open state changes

SelectTrigger

Renders a <button>. Accepts all standard button props plus className.

SelectValue

Displays the selected item label. Pass placeholder for empty state. Custom children override the auto-display.

SelectContent

Composes Portal, Positioner, Popup and List internally.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred positioning side
`sideOffset`	`number`	`4`	Gap between trigger and popup
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment along the side

SelectItem

Prop	Type	Default	Description
`value`	`string`	-	Item value (required)
`disabled`	`boolean`	`false`	Disable this item

Subcomponents

Component	Purpose
`SelectGroup`	Wraps a related set of `SelectItem`s.
`SelectLabel`	Visible label rendered inside a `SelectGroup`.
`SelectSeparator`	Divider between items or groups.

Guidelines

Do

Use Select when the user picks one value from a short, known list (3–10 options)
Provide a placeholder via SelectValue so empty state is obvious
Group related items with SelectGroup and SelectLabel
Disable individual items rather than hiding them when they're contextually unavailable

Don't

Don't use Select for free-form text. Use Input instead
Don't use Select for very long lists. Switch to Combobox with filtering
Don't use Select for true/false toggles. Use Checkbox or a switch
Don't disable an item without a reason the user can infer or read in a tooltip

PreviousScroll Area

NextSelectors