Select

Usage

Select is a controlled listbox. Pass options with stable valuekeys and always wire onChange. The component owns focus management, aria-activedescendant, type-ahead, Escape-to-close, and outside-click dismissal — never reimplement those on top of a native <select>.

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

const COUNTRIES = [
  { value: 'ca', label: 'Canada' },
  { value: 'us', label: 'United States' },
  { value: 'fr', label: 'France' },
]

const [country, setCountry] = useState<string>('')

<Select
  label="Country"
  value={country}
  onChange={setCountry}
  options={COUNTRIES}
  placeholder="Pick a country"
  required
  hint="Used for tax calculation."
/>

Multi-select

Set multiple and pass an array as value. The component renders chips with individual remove buttons plus a "Clear all" affordance. The listbox receives aria-multiselectable="true" and each option renders a checkbox glyph.

const [tags, setTags] = useState<string[]>([])

<Select
  label="Audience"
  multiple
  value={tags}
  onChange={setTags}
  options={TAG_OPTIONS}
  placeholder="Add tags"
/>

Async loading

Provide an asyncLoad(query) function. The component debounces 300 ms and flips to a spinner state while in-flight. Stale responses are dropped (a cancelled-flag in the effect closure) so a slow earlier query never overwrites a newer one.

<Select
  label="Venue"
  value={venueId}
  onChange={setVenueId}
  options={[]}
  asyncLoad={async (q) => fetchVenues(q)}
  searchable
/>

Dark mode

The trigger swaps to ep-surface-card and the listbox to ep-surface-elevated with dark slate borders. The active-option highlight uses the teal token at 10% opacity so it stays readable on both themes. The chevron rotates 180° on open in both palettes.

Props