Composants

SearchInput

Le champ de recherche du DS : loupe intégrée, bouton d'effacement, libellé a11y masqué. C'est une présentation pure et contrôlée — le debounce et la synchro ?q= restent à ta charge côté application.

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

const [q, setQ] = useState("");

<SearchInput value={q} onChange={setQ} placeholder="Rechercher une facture…" />

Tailles

<SearchInput size="sm" value={q} onChange={setQ} placeholder="Small" />
<SearchInput size="md" value={q} onChange={setQ} placeholder="Medium" />
<SearchInput size="lg" value={q} onChange={setQ} placeholder="Large" />

États

Dès que value n'est pas vide, le bouton d'effacement natif apparaît (hasClear, actif par défaut).

<SearchInput value={q} onChange={setQ} placeholder="Avec valeur (bouton effacer)" />
<SearchInput value="" onChange={() => {}} placeholder="Désactivé" isDisabled />

Props

Prop	Type	Défaut	Description
`value` *	`string`	—	Valeur contrôlée du champ.
`onChange` *	`(value: string) => void`	—	Appelé à chaque frappe.
`placeholder`	`string`	`"Rechercher…"`	Placeholder et libellé a11y (le label visuel est masqué).
`label`	`string`	—	Libellé a11y explicite s'il diffère du placeholder. À défaut : le placeholder, sinon « Rechercher ».
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille du champ.
`isDisabled`	`boolean`	—	Désactive le champ.
`hasAutoFocus`	`boolean`	—	Focus automatique au montage.
`hasClear`	`boolean`	`true`	Bouton d'effacement natif Astryx.
`onEnter`	`() => void`	—	Callback sur Entrée (ex. soumettre sans attendre le debounce).
`width`	`number \| string`	—	Largeur du champ.

Accessibilité

Le libellé visuel est toujours masqué : le nom accessible vient de label, sinon du placeholder, sinon du littéral « Rechercher ». Renseigne un label distinct si le placeholder est trop vague pour un lecteur d'écran. onEnter permet de déclencher la recherche immédiatement, sans attendre le debounce.

Do & Don't

✓ À faire

Garder le composant contrôlé et débouncer côté app. Un placeholder qui précise ce qu'on cherche.

✕ À éviter

Attendre du DS qu'il gère l'URL ou le debounce. Ajouter une loupe en startIcon (déjà intégrée).