---
title: "Checkbox"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Checkbox using native HTML inputs. Custom colors, sizes, indeterminate state, and full keyboard support for accessible multi-select forms."
url: https://frutjam.com/fr/components/checkbox
---

# Checkbox Component

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                                       |
| ------------------ | ------------ | ------------------------------------------------- |
| checkbox           | Base         | Entrée de case à cocher stylisée                  |
| checkbox-circle    | Style        | Case à cocher entièrement circulaire              |
| checkbox-rounded   | Style        | Case à cocher moyennement arrondie                |
| checkbox-square    | Style        | Case à cocher carrée sans arrondi                 |
| checkbox-disabled  | Modificateur | Apparence désactivée pour les éléments non saisis |
| checkbox-xs        | Taille       | Très petit                                        |
| checkbox-sm        | Taille       | Petit                                             |
| checkbox-md        | Taille       | Moyen (par défaut)                                |
| checkbox-lg        | Taille       | Grand                                             |
| checkbox-xl        | Taille       | Très grand                                        |
| checkbox-2xl       | Taille       | 2× très grand                                     |
| checkbox-primary   | Couleur      | Couleur du thème principal                        |
| checkbox-secondary | Couleur      | Couleur du thème secondaire                       |
| checkbox-accent    | Couleur      | Couleur du thème d'accentuation                   |
| checkbox-neutral   | Couleur      | Couleur du thème neutre                           |
| checkbox-info      | Couleur      | Couleur sémantique de l'information               |
| checkbox-success   | Couleur      | Couleur sémantique du succès                      |
| checkbox-warning   | Couleur      | Couleur sémantique d’avertissement                |
| checkbox-error     | Couleur      | Couleur sémantique des erreurs                    |

## Utilisation de base

## Tailles des cases à cocher

```html
<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
<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
<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
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">
```

## Cases à cocher avec étiquettes

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