Reddot UI Library

Docs
Checkbox

Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/checkbox.json

Utilisation

import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label
        htmlFor="terms"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  )
}

Avec texte

import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxWithText() {
  return (
    <div className="items-top flex space-x-2">
      <Checkbox id="terms1" />
      <div className="grid gap-1.5 leading-none">
        <label
          htmlFor="terms1"
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Accept terms and conditions
        </label>
        <p className="text-sm text-muted-foreground">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  )
}

Désactivé

import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxDisabled() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms2" disabled />
      <label
        htmlFor="terms2"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  )
}

API Reference

Checkbox

PropTypeDefaultDescription
checkedboolean-The checked state of the checkbox
defaultCheckedboolean-The default checked state when initially rendered
onCheckedChange(checked: boolean) => void-Event handler called when the checked state changes
disabledbooleanfalseWhen true, prevents the user from interacting with the checkbox
requiredbooleanfalseWhen true, indicates that the user must check the checkbox before submitting

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-checkbox

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité WAI-ARIA
  • Supporte les interactions clavier
  • Compatible avec les librairies de formulaire comme React Hook Form