Select

A dropdown for choosing a single value from a predefined list. Built on Base UI Select.

Basic

Use SelectTrigger with SelectValue to display the current selection. SelectContent wraps the dropdown items.

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>

Groups

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

Disabled

The entire select can be disabled via the disabled prop on the root, or individual items can be disabled.

Disabled root

Disabled item

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 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

PreviousScroll Area

NextSlider