Brickslab.

@brickslab/ui-web

Case à cocher stylisée avec appearance:none et SVG background-image. Composant contrôlé — reçoit checked et onChange du parent. Supporte 3 tailles, état disabled et label React.ReactNode. Focus visible accessible.

États

unchecked · checked · disabled unchecked · disabled checked

unchecked
checked
disabled
disabled checked

Tailles

sm 14px · md 16px · lg 20px

sm
md
lg

Sans label

case seule — utile dans des tableaux ou des listes

Groupe contrôlé

plusieurs cases indépendantes gérées par useState

Label riche

label accepte React.ReactNode — liens, formatage

Props

PropTypeDéfautRequisDescription
checkedboolean——État coché — contrôlé par le parent.
defaultCheckedboolean——État coché initial — mode non-contrôlé.
onChange(checked: boolean) => void——Callback appelé à chaque changement d'état.
labelReact.ReactNode——Texte ou JSX affiché à droite de la case.
disabledbooleanfalse—Désactive l'interaction.
size"sm" | "md" | "lg""md"—Taille de la case à cocher (14 / 16 / 20 px).
idstring——Attribut id natif — utile pour associer un label externe.
namestring——Attribut name natif pour les formulaires.
valuestring——Valeur soumise dans un formulaire HTML.

Utilisation

tsx
import { Checkbox } from "@brickslab/ui-web";
import { useState } from "react";

// Contrôlé
const [checked, setChecked] = useState(false);
<Checkbox checked={checked} onChange={setChecked} label="Option A" />

// Non-contrôlé
<Checkbox defaultChecked label="Option B" />

// Tailles
<Checkbox size="sm" label="Small" />
<Checkbox size="md" label="Medium" />
<Checkbox size="lg" label="Large" />

// Disabled
<Checkbox disabled label="Non disponible" />
<Checkbox disabled checked label="Sélectionné non modifiable" />

// Sans label
<Checkbox checked onChange={() => {}} />

// Label riche
<Checkbox
  label={<span>J'accepte les <a href="/cgu">conditions d'utilisation</a></span>}
  checked={accepted}
  onChange={setAccepted}
/>