Select

Native-feeling dropdown select, wrapping Radix Select, with full keyboard support.

Select wraps @radix-ui/react-select: type-ahead, arrow-key navigation, and an animated popover (bg-popover + surface + animate-scale-in). The trigger mirrors Input's treatment (surface bg-input/30).

Installation

import {
  Select, SelectTrigger, SelectValue, SelectContent,
  SelectItem, SelectGroup, SelectLabel, SelectSeparator,
} from "@iammikz/srui";

Usage

Props

Export	Notes
`Select`	Root; `value`/`onValueChange` for controlled use
`SelectTrigger`	Trigger — Radix Trigger props plus `size?: "sm" \| "default" \| "lg"` (h-8/h-9/h-10) and `invalid?: boolean` (destructive border + `aria-invalid`); styled like `Input`
`SelectValue`	Renders the selected label (or `placeholder`)
`SelectContent`	The popover; `bg-popover` + `surface` + `animate-scale-in`, `position="popper"` default
`SelectItem`	Option with check indicator
`SelectItemText`	The item's label part, for custom item layouts
`SelectGroup` / `SelectLabel`	Option grouping
`SelectSeparator`	Divider inside the list
`SelectScrollUpButton` / `SelectScrollDownButton`	Long-list scroll affordances (composed into `SelectContent` already)

Examples

Grouped with separators

Trigger sizes and invalid

size lands on the trigger ("sm" h-8 / "default" h-9 / "lg" h-10); invalid paints the destructive border and sets aria-invalid.

Accessibility

Radix provides the full pattern: the trigger is a combobox-role button, aria-expanded/aria-controls wiring, arrow-key and type-ahead item navigation, Home/End, and Escape to close. Selected items expose aria-selected; give the trigger an aria-label when it has no visible text label.