Composants

FormeSelect

Le sélecteur à liste déroulante. Enrobe le Selector d'Astryx. Les options sont fournies en données via SelectOption[], et le libellé a11y passe par ariaLabel (le Selector exige toujours un nom).

Type SelectOption : { value: string; label: string; isDisabled?: boolean }. L'isDisabled d'une option est remappé sur le disabled d'Astryx.

import { FormeSelect } from "@forme-ch/ui/controls";

const [value, setValue] = useState("envoyee");

<FormeSelect
  ariaLabel="Statut de la facture"
  value={value}
  onChange={setValue}
  options={[
    { value: "brouillon", label: "Brouillon" },
    { value: "envoyee", label: "Envoyée" },
    { value: "payee", label: "Payée" },
    { value: "annulee", label: "Annulée", isDisabled: true },
  ]}
/>

Option vide (placeholder)

emptyValue insère une option vide en tête — pratique pour un filtre « tous » ou un champ non encore renseigné.

<FormeSelect
  ariaLabel="Statut"
  placeholder="Choisir un statut"
  emptyValue="— Tous —"
  value={value}
  onChange={setValue}
  options={options}
/>

États

<FormeSelect ariaLabel="Requis" isRequired options={options} />
<FormeSelect ariaLabel="Désactivé" isDisabled options={options} />

Props

Prop	Type	Défaut	Description
`options` *	`SelectOption[]`	—	Liste des options : `{ value, label, isDisabled? }`.
`name`	`string`	—	Nom du champ dans un `<form>` (mappé sur `htmlName`).
`placeholder`	`string`	—	Texte affiché quand rien n'est sélectionné.
`value`	`string`	—	Mode contrôlé.
`defaultValue`	`string`	—	Mode non-contrôlé.
`onChange`	`(value: string) => void`	—	Callback à la sélection.
`ariaLabel`	`string`	—	Libellé a11y (mappé sur le `label` masqué exigé par Selector).
`isDisabled`	`boolean`	—	Désactive le sélecteur.
`isRequired`	`boolean`	—	Marque le champ requis.
`autoFocus`	`boolean`	—	Focus au montage.
`emptyValue`	`string`	—	Place une option vide (`value: ""`) en tête de liste.

Accepte aussi className et style.

Accessibilité

Le Selector Astryx exige un nom accessible : fournis toujours ariaLabel (sinon Forme retombe sur placeholder, puis sur le littéral « Selection »). Le libellé reste masqué visuellement mais lu par les lecteurs d'écran. Une option marquée isDisabled reste annoncée mais n'est pas sélectionnable.

Do & Don't

✓ À faire

Fournir un ariaLabel explicite. Utiliser emptyValue pour un état « aucune sélection ».

✕ À éviter

Compter sur le seul placeholder comme nom accessible. Mettre des dizaines d'options — préférer une recherche.