Case à cocher

"use client"

import { Checkbox } from "@/components/ui/checkbox"

La case à cocher est le contrôle standard des choix binaires — cochée, décochée, ou indéterminée pour les sélections partielles. Construite sur la primitive Base UI Checkbox et habillée du style néobrutaliste : bordures épaisses, ombres marquées et typographie affirmée.

À privilégier pour :

• Conditions et consentement — la case « J’accepte » des parcours d’inscription et de paiement, envoyée avec le formulaire.
• Filtres multi-sélection — catégories, tags ou fourchettes de prix dans une barre latérale où toute combinaison est valable.
• Sélection en masse dans les tableaux — des cases par ligne plus un « tout sélectionner » indéterminé dans l’en-tête.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
npx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
Copier

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Copier

"use client"

import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-5 shrink-0 items-center justify-center rounded border-2 bg-input shadow-sm transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-checked:border-border data-checked:bg-primary data-checked:text-primary-foreground",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

Utilisation#

Copierimport { Checkbox } from "@/components/ui/checkbox"

Copier<Checkbox />

État coché#

Utilisez defaultChecked pour des cases non contrôlées, ou checked et onCheckedChange pour contrôler l’état.

Copierimport * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

État invalide#

Définissez aria-invalid sur la case et data-invalid sur le conteneur du champ pour afficher les styles d’erreur.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Exemples#

Simple#

Associez la case à Field et FieldLabel pour une mise en page et un étiquetage corrects.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Description#

Utilisez FieldContent et FieldDescription pour le texte d’aide.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

Désactivé#

Utilisez la prop disabled pour empêcher l’interaction et ajoutez l’attribut data-disabled au composant <Field> pour les styles désactivés.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Groupe#

Utilisez plusieurs champs pour créer une liste de cases à cocher.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

Tableau#

"use client"

import * as React from "react"

RTL#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

La case à cocher suit le modèle WAI-ARIA Checkbox : la primitive rend un élément role="checkbox" avec aria-checked (y compris "mixed" pour l’état indéterminé) et synchronise un champ natif masqué pour que la valeur soit soumise avec les formulaires.

Interactions clavier :

Enter ne bascule pas une case à cocher — c’est conforme au modèle ARIA, pas un bug.

Référence API#

Consultez la documentation Base UI pour en savoir plus.