Select

A labelled single-choice dropdown built on Radix Select, with a value that rolls when it changes.

When to use

• Picking one value from a short, known list (roughly 3 to 12 options).
• When users should not type: format, purpose, role, currency.
• For long or searchable lists use Combobox; for several values use MultiSelect; for 2 to 5 always-visible options use RadioGroup or SegmentedControl.

Usage

import { Select } from "@/components/iris/select/select";
h(Select, {
  label: "Purpose",
  defaultValue: "rental_seeker",
  description: "The policy table picks the checks.",
  options: [
    { value: "rental_seeker", label: "Rental seeker" },
    { value: "rental_lister", label: "Rental lister" },
    { value: "age_check", label: "Age check", disabled: true },
  ],
  onValueChange: (value) => console.log(value),
});

Props

Prop	Type	Default	Description
label	string	required	Visible label for the trigger.
options	{ value: string; label: string; disabled?: boolean }[]	required	The choices, in order.
value / defaultValue	string	–	Controlled or initial value (Radix Select root props).
onValueChange	(value: string) => void	–	Called with the chosen option's value.
placeholder	string	"Select an option"	Shown when nothing is selected.
description	string	–	Helper copy under the trigger.
disabled	boolean	–	Disables the trigger.
open / defaultOpen / onOpenChange	Radix Select root props	–	Control the menu's open state.
id / className	string	–	Trigger id and extra class on the trigger.

Notes

• Keyboard and screen-reader behaviour come from Radix Select: arrows, typeahead, Home/End, Escape; the real value stays in a visually hidden SelectPrimitive.Value.
• The menu portals to body, matches the trigger width and caps at 320px tall with scroll buttons.
• The shown value rolls up or down in list order; reduced motion swaps it with a short crossfade.
• Reads --surface, --hover, --line, --line-strong, --ink, --ink-3, --shadow-floating, --radius-control.