Select
BetaL3 — Overlay react-aria-components (Select/ListBox/Popover) : liste déroulante accessible, typeahead, clavier complet. "use client". Statut beta — validation visuelle navigateur en attente (ADR-LYRA-V3-PRIMITIVES-001).
import { Select } from "@lyra/tokens/components";Playground
Compte
Démo interactive — réglages du playground (props ajustables en direct) à venir.
<Select
label="Compte"
options={[{ id: "celi", label: "CELI" }, { id: "reer", label: "REER" }]}
value={accountId}
onChange={setAccountId}
/>Documentation
Aperçu unique — pas de variantes documentées.
label, options, value, defaultValue, onChange, placeholder, description, error, disabled, required, name<Select
label="Compte"
options={[{ id: "celi", label: "CELI" }, { id: "reer", label: "REER" }]}
value={accountId}
onChange={setAccountId}
/>- Déclencheur '<'button'>' : aria-haspopup='listbox', aria-expanded reflète l'état.
- Navigation clavier complète : flèches, Home/End, typeahead (react-aria-components).
- Options : role='option' + aria-selected ; option disabled → aria-disabled, retirée du typeahead.
- description/erreur chaînées en aria-describedby (slots Text RAC — même pattern qu'Input).
- Dismiss Échap + clic-extérieur automatique (Popover RAC).
- Élément '<'select'>' natif caché rendu par RAC (soumission de formulaire / autofill).