Checkbox
A native checkbox styled with the design tokens, with color token support.
Usage
import { Checkbox, Label } from 'trivela-ui';
export function Example() {
return (
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>
</div>
);
}Examples
With label
Match htmlFor to the checkbox id so the caption is a click target too.
Colors
The color token drives the checked fill and the focus ring.
States
checked and disabled are native attributes, forwarded straight to the input.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'primary' | Color scale used by the component. |
| className | string | — | Merged with the generated classes via cn(). |
| ...props | InputHTMLAttributes<HTMLInputElement> | — | Native input attributes are forwarded. type is always 'checkbox'. |