Select

molecules

Native-feel select built on a button + popover. Search, multi-select, async load. Combobox pattern (WAI-ARIA 1.2).

ARIA Role: combobox

Demo

Demo for Select (molecules)

Native-feel select built on a button + popover. Search, multi-select, async load. Combobox pattern (WAI-ARIA 1.2).

Props

Prop	Type	Required	Default
`value`	`T \| T[]`	Yes	`—`
`onChange`	`(value: T \| T[]) => void`	Yes	`—`
`label`	`string`	Yes	`—`

TypeScript Interface

interface SelectProps<T> {
  value: T | T[];
  onChange: (value: T | T[]) => void;
  options: { value: T; label: string; disabled?: boolean }[];
  placeholder?: string;
  multiple?: boolean;
  searchable?: boolean;
  asyncLoad?: (query: string) => Promise<{ value: T; label: string }[]>;
  error?: string;
  label: string;
}

Assertions (NASA Rule 5)

[type]value and onChange required (controlled)(NASA Rule 5)
[aria]role='combobox' aria-expanded aria-controls=listboxId; input has aria-activedescendant(WAI-ARIA Combobox Pattern 1.2)

Usage

Import

import { Select } from '@epasslive/design-system'

Basic

<Select />

With Variants

<Select variant="primary" size="md" />