Headless Components

Definition

Composants qui fournissent la logique et l'accessibilite sans imposer de style ni de markup. L'utilisateur controle entierement le rendu.

Analogie

Comme un moteur de voiture vendu sans carrosserie : tu choisis la forme, il fournit la puissance.

Exemple de code

// Headless UI Combobox
<Combobox value={selected} onChange={setSelected}>
  <Combobox.Input onChange={e => setQuery(e.target.value)} />
  <Combobox.Options>
    {filtered.map(item => (
      <Combobox.Option key={item.id} value={item}>{item.name}</Combobox.Option>
    ))}
  </Combobox.Options>
</Combobox>

Cas d'usage

Design systems, librairies UI (Headless UI, Radix, Downshift) qui doivent etre stylisables sans contrainte.

Termes lies