Checkbox

A high-fidelity checkbox component with multiple variants and interactive states.

Preview & Interactive Laboratory

Variants Grid

States & Interaction

Receive deep insights into user behavior and conversion rates.

Premium Examples

Enhanced Protection

Low Latency Enabled

Usage & Implementation

<div className="flex items-center gap-2">
  <Checkbox id="terms" variant="glass" />
  <Label htmlFor="terms">Accept terms</Label>
</div>
React / Tailwind

Granular Customization

1

Checkbox Root

The main checkbox container.

className={`className`}
2

Indicator

The checkmark icon container.

className={`CheckboxPrimitive.Indicator className='...'`}
3

Variants

Choose between default, outline, glass, etc.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'outline' | 'secondary' | 'destructive' | 'glass''default'The visual style of the checkbox.
checkedboolean | 'indeterminate'falseThe checked state of the checkbox.
disabledbooleanfalseDisables interaction.