Case à cocher
checkbox() rend un <label> qui enveloppe un vrai <input type="checkbox"> et la case que vous voyez. L’input est masqué visuellement mais bien présent : il reçoit le focus, il est soumis, et tout le libellé est une cible cliquable — la coche est dessinée à partir de l’état :checked de l’input lui-même, sans le moindre script.
Case de base
stack({ direction: 'row', gap: 'lg' },
checkbox({ label: 'M’envoyer les nouveautés par e-mail', name: 'updates' }),
checkbox({ label: 'Cochée', name: 'checked', checked: true }),
)Couleurs
stack({ direction: 'row', gap: 'lg', wrap: true },
checkbox({ label: 'Primary', checked: true, color: 'primary' }),
checkbox({ label: 'Neutral', checked: true, color: 'neutral' }),
checkbox({ label: 'Success', checked: true, color: 'success' }),
checkbox({ label: 'Warning', checked: true, color: 'warning' }),
checkbox({ label: 'Danger', checked: true, color: 'danger' }),
)Désactivé
stack({ direction: 'row', gap: 'lg' },
checkbox({ label: 'Indisponible', disabled: true }),
checkbox({ label: 'Activée et verrouillée', checked: true, disabled: true }),
)Libellés longs
La case reste alignée sur la première ligne au lieu de se centrer face à un paragraphe.
checkbox({
label: 'Lancer un audit Lighthouse après chaque build, et faire échouer le build quand un score passe sous son seuil.',
name: 'lighthouse',
checked: true,
})Groupes
choiceGroup() construit un jeu de cases à partir de données, avec une légende et un name partagés. Passez un tableau en value pour en cocher plusieurs.
choiceGroup({
legend: 'Générer',
name: 'generate',
type: 'checkbox',
value: ['sitemap', 'rss'],
options: [
{ value: 'sitemap', label: 'sitemap.xml' },
{ value: 'rss', label: 'rss.xml' },
{ value: 'pagefind', label: 'Index Pagefind' },
],
help: 'Chacun est écrit dans dist/ à la fin du build.',
})En ligne
choiceGroup({
legend: 'Catégories',
name: 'categories',
type: 'checkbox',
direction: 'row',
value: ['performance'],
options: ['performance', 'accessibility', 'seo'],
})Avec un field
Une case isolée a rarement besoin d’un libellé au-dessus en plus. Quand un groupe en a besoin, field() lui donne le même traitement de libellé, d’aide et d’erreur qu’un champ de texte.
field({ label: 'Conditions', error: 'Vous devez accepter les conditions pour continuer.' },
checkbox({ label: 'J’accepte les conditions', name: 'terms', color: 'danger' }),
)Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
label | Child | — | Texte à côté de la case. Omettez-le pour un contrôle nu. |
color | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'primary' | Couleur quand elle est cochée. |
checked | boolean | false | Si elle démarre cochée. |
name | string | — | Nom du champ de formulaire. |
value | string | number | — | Valeur soumise quand elle est cochée. |
disabled | boolean | false | Désactive l’input et atténue le libellé. |
Tout le reste atterrit sur l’<input>, pas sur le label — donc required, onchange et data-* vont là où vous l’attendez. Utilisez class pour styler le libellé lui-même.
Pour un jeu construit à partir de données, voyez choiceGroup() sur la page Groupe de boutons radio — il prend les mêmes options des deux côtés, basculées par type: 'checkbox'.