Select

Alpha

An accessible dropdown select with keyboard navigation, type-ahead, and compound component API.

Import

import { Select } from "@compa11y/react";

Usage

Example.tsx

import { Select } from "@compa11y/react";

const options = [
  { value: "sm", label: "Small" },
  { value: "md", label: "Medium" },
  { value: "lg", label: "Large" },
];

function Example() {
  return (
    <Select
      options={options}
      placeholder="Choose a size"
    />
  );
}

Features

Full keyboard navigation
Type-ahead character search
Placeholder support
Compound component API
ARIA listbox pattern

Props

Select component props
Prop	Type	Default	Description
`options`*	`{ value: string; label: string }[]`	-	List of options
`value`	`string`	-	Controlled selected value
`onValueChange`	`(value: string) => void`	-	Called when selection changes
`placeholder`	`string`	`'Select...'`	Placeholder text
`disabled`	`boolean`	`false`	Disables the select

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Select
Key	Action
`Enter / Space`	Opens/closes the select
`ArrowDown`	Opens select / moves to next option
`ArrowUp`	Moves to previous option
`Home`	Moves to first option
`End`	Moves to last option
`Escape`	Closes the select
`Type characters`	Type-ahead to jump to option