Select

Selects let users choose one or more values from a predefined list inside a compact trigger and popup listbox.

Try it

Usage

Pass options for a simple API, or compose RuiSelectControl, RuiSelectTrigger, RuiSelectValue, and RuiSelectListbox for full control.

import { RuiSelect } from '@ecopages/radiant-ui/select';
import { RuiLabel } from '@ecopages/radiant-ui/label';
 
<RuiLabel>Animal</RuiLabel>
<RuiSelect
  value="cat"
  placeholder="Select an animal"
  options={[
    { value: 'cat', label: 'Cat' },
    { value: 'dog', label: 'Dog' },
  ]}
/>

Multiple selection

Set selectionMode="multiple" for multi-select. Selected values appear as tags via RuiTagGroup.

Searchable lists

Add RuiSelectSearch inside the listbox for long option sets that benefit from filtering.

Theming

Select surfaces map to semantic surface roles, never Tailwind palette steps:

Geometry shares control tokens (--size-control-*, --radius-control, --space-control-*) with RuiInput and RuiButton so form rows align. Override roles at the theme layer, not in component CSS.

Accessibility

• The trigger exposes aria-expanded and aria-haspopup="listbox".
• Selected values are reflected in RuiSelectValue for screen readers.
• Provide a visible label; the placeholder is not a substitute.

API

RuiSelect is a custom element (<rui-select>) wrapping a button trigger and an embedded RuiListbox. Pass options for the simple API, or compose the view helpers for full control.

Attributes (<rui-select>)

Events

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles