Composants

Segmented

Un sélecteur de vue ou de filtre à choix unique, façon interrupteur segmenté. Contrôlé de bout en bout via value / onChange, générique sur T extends string.

Nouveau. Le bon composant pour un choix exclusif court (2 à 5 options) qui doit rester visible en permanence — préférable à un FormeSelect pour basculer entre des vues.

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

const [vue, setVue] = useState("liste");

<Segmented
  ariaLabel="Type de vue"
  value={vue}
  onChange={setVue}
  options={[
    { value: "liste", label: "Liste" },
    { value: "grille", label: "Grille" },
    { value: "tableau", label: "Tableau" },
  ]}
/>

Pleine largeur (fluid)

fluid répartit les segments sur toute la largeur du conteneur (layout « fill »).

<Segmented
  fluid
  ariaLabel="Période"
  value={periode}
  onChange={setPeriode}
  options={[
    { value: "jour", label: "Jour" },
    { value: "semaine", label: "Semaine" },
    { value: "mois", label: "Mois" },
    { value: "annee", label: "Année" },
  ]}
/>

Tailles

<Segmented size="sm" … />
<Segmented size="md" … />
<Segmented size="lg" … />

Avec indices (hint)

Le hint d'une option devient l'attribut title natif du segment (tooltip navigateur).

<Segmented
  ariaLabel="Filtrer par statut"
  value={statut}
  onChange={setStatut}
  options={[
    { value: "tous", label: "Tous", hint: "Tous les clients" },
    { value: "actifs", label: "Actifs", hint: "Clients avec un contrat en cours" },
    { value: "archives", label: "Archivés", hint: "Clients sans contrat actif" },
  ]}
/>

Props

Prop	Type	Défaut	Description
`options` *	`SegmentedOption<T>[]`	—	Segments : `{ value, label, hint? }`.
`value` *	`T`	—	Valeur sélectionnée (contrôlé).
`onChange` *	`(value: T) => void`	—	Appelé au changement de segment.
`name`	`string`	—	Émet la valeur dans un `input hidden` (soumission de formulaire).
`ariaLabel`	`string`	—	Libellé a11y du groupe. À défaut : « Sélection ».
`disabled`	`boolean`	`false`	Désactive tout le contrôle.
`fluid`	`boolean`	`false`	Segments équirépartis sur toute la largeur (layout « fill »).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille des segments.

SegmentedOption<T> = { value: T; label: string; hint?: string }.

Accessibilité

Fournis un ariaLabel décrivant la nature du choix (« Type de vue », « Période ») : c'est le nom accessible du groupe. Le composant expose un vrai groupe de boutons radio ; la navigation clavier (flèches) est gérée par Astryx. Les hint sont des tooltips de confort, pas un substitut à un label clair.

Do & Don't

✓ À faire

2 à 5 options courtes et mutuellement exclusives. fluid quand le contrôle occupe une barre pleine largeur.

✕ À éviter

Une longue liste (utilise FormeSelect). Une sélection multiple (utilise ToggleButtonGroup type="multiple").