Select

Status picker

import { Select, SelectContent, SelectItem, SelectTrigger } from '@rookcom/monarch-react';

<Select defaultValue="open">
  <SelectTrigger aria-label="Status" placeholder="Status" style={{ width: '14rem' }} />
  <SelectContent>
    <SelectItem value="open">Open</SelectItem>
    <SelectItem value="pending">Pending</SelectItem>
    <SelectItem value="resolved">Resolved</SelectItem>
  </SelectContent>
</Select>

Usage examples

The example at the top of the page is the only one for this component.

Purpose

Picks one value from a short, known list. Built on Radix Select, which provides typeahead, arrow-key navigation and screen-reader semantics.

Use when

The list is short enough to scan without searching (statuses, priorities, roles).

Avoid when

The list is long or needs searching: use Combobox.
There are two to five options that should all be visible: a segmented control (planned) or radio choices.

Design principles

The trigger looks like an Input (.mn-input), so forms read as one family.
Menu items share the .mn-menu styles with DropdownMenu and Combobox.

API reference

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`Select`	component	client	`.mn-input`
`SelectContent`	component	client	`.mn-input`
`SelectGroup`	component	client	`.mn-input`
`SelectItem`	component	client	`.mn-input`
`SelectLabel`	component	client	`.mn-input`
`SelectSeparator`	component	client	`.mn-input`
`SelectTrigger`	component	client	`.mn-input`
`SelectValue`	component	client	`.mn-input`

Select, SelectGroup and SelectValue are the Radix primitives re-exported unchanged.

SelectTrigger, SelectContent, SelectItem, SelectLabel and SelectSeparator forward their refs to the Radix parts.

SelectContent renders in a portal with position="popper" and sideOffset={4} by default.

Generated from the TypeScript declarations of packages/react/src/components/forms/select.

Properties

`Select`

Single-value select built on Radix Select: typeahead, arrow-key navigation, and screen-reader semantics come from the primitive. <Select value={v} onValueChange={setV}> <SelectTrigger placeholder="Choose a status" /> <SelectContent> <SelectItem value="open">Open</SelectItem> </SelectContent> </Select>

Prop	Type	Description
`children`	`React.ReactNode`
`disabled`	`boolean`

`SelectContent`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

`SelectGroup`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

`SelectItem`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`disabled`	`boolean`
`id`	`string`

`SelectLabel`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

`SelectSeparator`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

`SelectTrigger`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`disabled`	`boolean`
`id`	`string`
`invalid`	`boolean`
`placeholder`	`string`
`size`	`"sm" \| "md" \| "lg"`

`SelectValue`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

Variants

Prop	Values	Description
`size (SelectTrigger)`	`'sm''md''lg'`	Trigger height, matching Input sizes. Default `md`. Exposed as `data-size`.

States

State	Exposed as	Behaviour
Placeholder	`data-placeholder`	The `placeholder` text shows in the subtle text colour until a value is chosen.
Invalid	`aria-invalid="true"`	Danger border, from `invalid` or the surrounding Field.
Highlighted item	`data-highlighted`	The item under the pointer or keyboard focus; the selected item shows a check.

Interaction behaviour

Clicking the trigger opens the list; choosing an item closes it and calls onValueChange.
The selected item is marked with a check indicator.

Keyboard support

This section is incomplete

Keyboard handling comes from Radix Select and is not covered by Monarch tests yet.

Radix Select provides typeahead and arrow-key navigation.

Accessibility

Role: combobox (trigger) with a listbox of options
Accessible name: A FieldLabel in the surrounding Field, or aria-label on SelectTrigger.

Inside a required Field the trigger gets aria-required, not required (invalid on a button).
Inside an invalid Field the trigger gets aria-invalid.

Responsive behaviour

This section is incomplete

No responsive behaviour is defined; the content is positioned by Radix.

Theme support

Trigger and menu colours are semantic tokens, so every theme applies automatically.

Do and don't

Do

Give the trigger a label through Field or aria-label.

Don't

Do not use Select for long lists that need searching; use Combobox.

Combobox: Searchable single-select for long lists.
DropdownMenu: Actions rather than a value.
Field: Label and error wiring.

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-selectreact`
Monarch components	Field

Testing coverage

Trigger inside an invalid required Field gets aria-invalid and aria-required, not required.
A labelled trigger renders without axe violations.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual baselines: /__gallery; Cross-browser axe: /components/select

Tests: packages/react/src/components/forms/select