Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Checkbox Component

CSS-only Tailwind CSS checkbox with primary, secondary, accent, and semantic color variants. Sizes xs–xl, indeterminate state. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Les composants de case à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options dans un ensemble. Construites avec des éléments d'entrée HTML natifs et améliorées avec Tailwind CSS, les cases à cocher prennent en charge plusieurs tailles, couleurs et états. Entièrement accessibles grâce à la navigation au clavier et à la prise en charge du lecteur d'écran, les cases à cocher fonctionnent de manière transparente dans les formulaires, les options de filtrage et les interfaces de gestion des autorisations.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
checkboxBaseEntrée de case à cocher stylisée
checkbox-circleStyleCase à cocher entièrement circulaire
checkbox-roundedStyleCase à cocher moyennement arrondie
checkbox-squareStyleCase à cocher carrée sans arrondi
checkbox-disabledModificateurApparence désactivée pour les éléments non saisis
checkbox-xsTailleTrès petit
checkbox-smTaillePetit
checkbox-mdTailleMoyen (par défaut)
checkbox-lgTailleGrand
checkbox-xlTailleTrès grand
checkbox-2xlTaille2× très grand
checkbox-primaryCouleurCouleur du thème principal
checkbox-secondaryCouleurCouleur du thème secondaire
checkbox-accentCouleurCouleur du thème d'accentuation
checkbox-neutralCouleurCouleur du thème neutre
checkbox-infoCouleurCouleur sémantique de l'information
checkbox-successCouleurCouleur sémantique du succès
checkbox-warningCouleurCouleur sémantique d’avertissement
checkbox-errorCouleurCouleur sémantique des erreurs

Utilisation de base

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Tailles des cases à cocher

html 
1
2
3
4
5
6
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">

Couleurs des cases à cocher

html 
1
2
3
4
5
6
7
8
9
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Cases à cocher désactivées

html 
1
2
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Formes de cases à cocher

Case à cocher carrée

html 
<input type="checkbox" class="checkbox checkbox-square" checked="checked">

Case à cocher Cercle / Arrondi

Les deux classes checkbox-circle et checkbox-rounded donnent le même style visuel, permettant des conventions de dénomination flexibles.

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Cases à cocher avec étiquettes

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>