Checkbox

Une case à cocher accessible.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

Accept terms and conditions

checkbox.tsx

'use client';import { Checkbox } from '@/components/ui/checkbox';import { Label } from '@/components/ui/label';export default function Demo() {  return (    <div className="flex items-center gap-2">      <Checkbox id="terms" />      <Label htmlFor="terms">Accept terms and conditions</Label>    </div>  );}

Animation

La coche apparaît avec un fondu et un léger zoom de 120 ms ; la couleur de fond et de bordure suit le même rythme.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add checkbox

Ou depuis le paquet npm :

import { Checkbox } from '@whoa-studio/ui/checkbox';

Exports : Checkbox.