Brickslab.Toolsv2.1.5

@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.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  checked={true}
  defaultChecked={true}
  onChange={true}
  label={<span>...</span>}
  disabled={false}
  size="md"
  id="..."
  name="..."
  // +1 autres props disponibles
/>
checkeddefaultCheckedonChangelabeldisabledsizeidnamevalue

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}
/>