Select

A customizable dropdown select component built on top of React Aria Components, providing accessible single-selection functionality with keyboard navigation and visual states.

Features

Single Selection: Currently supports single-item selection (based on react-aria limitations)
Accessible: Built with React Aria Components for full ARIA compliance and keyboard navigation
Visual States: Automatic styling for disabled, invalid, hover, pressed, and focused states
Custom Styling: Integrates with Tailwind CSS and CSS variables for theming
Icon Support: Includes chevron indicator and checkmark for selected items
Responsive: Popover width automatically matches trigger width

Props

Prop	Type	Required	Description
`options`	`{ label: string; value: string }[]`	Yes	Array of selectable options
`value`	`string \| number \| null`	No	Currently selected value (controlled)
`onChange`	`(key: string \| number \| null) => void`	No	Callback fired when selection changes
`label`	`string`	No	Label for the select (currently unused in implementation)
`className`	`string`	No	Additional CSS classes for the select

Basic Usage

tsx

<Select
  options={[
    { label: 'Option 1', value: 'opt1' },
    { label: 'Option 2', value: 'opt2' },
    { label: 'Option 3', value: 'opt3' },
  ]}
/>

Disabled

tsx

<Select isDisabled />

Disabled Options

tsx

function DisabledOption() {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <Select
      onChange={setSelected}
      value={selected}
      disabledKeys={['B']}
      options={[
        { label: 'A', value: 'A' },
        { label: 'BBBBBB', value: 'B' },
        { label: 'CCCCCC', value: 'C' },
      ]}
    />
  );
}

Styling

CSS Variables

The component uses the following CSS variables for theming:

--color-bg: Select background color
--color-font: Select text color
--hl-xs: Highlight for hover/active
--hl-sm: Standard border color
--color-danger: Error/invalid state color

You can customize these variables in your CSS to theme the select appearance.