Select

A fully accessible single-select dropdown built on Radix UI Select. Handles positioning, keyboard navigation, search, and ARIA attributes automatically.

Built on Radix UI.

✓Keyboard navigable — Arrow keys, Home, End, type-to-search
✓Portal-based dropdown — renders outside the DOM flow
✓Scroll buttons when content overflows
✓Groups with labels via SelectGroup + SelectLabel
✓Separator support via SelectSeparator
✓Controlled and uncontrolled

import { Select }from "@aetherstack/ui"

select.tsx

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

export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-48">
        <SelectValue placeholder="Select a framework" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="remix">Remix</SelectItem>
        <SelectItem value="vite">Vite</SelectItem>
        <SelectItem value="astro">Astro</SelectItem>
      </SelectContent>
    </Select>
  )
}

Usage

With label

Framework

Grouped options

Use SelectGroup and SelectLabel to group related options.

Controlled

Disabled items

Props

Prop	Type	Default	Description

Select (Root)

Prop	Type	Default	Description
value	string	—	Controlled selected value.
defaultValue	string	—	Uncontrolled initial value.
onValueChange	(value: string) => void	—	Callback when selection changes.
disabled	boolean	false	Disables the entire select.
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.

SelectTrigger

Prop	Type	Default	Description
className	string	—	Use w-* to control width. Defaults to w-full.

SelectItem

Prop	Type	Default	Description
value*	string	—	The item value.
disabled	boolean	false	Disables this specific item.

SelectContent

Prop	Type	Default	Description
position	"popper" \| "item-aligned"	"popper"	Positioning strategy.
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side to open.
sideOffset	number	4	Distance from trigger in px.

* Required props

Accessibility

→Uses the combobox ARIA pattern — trigger has role='combobox', options have role='option'.
→Type characters to jump to matching options.
→Arrow keys navigate options. Enter or Space selects. Escape closes.
→Always associate with a Label via htmlFor on the SelectTrigger id.