Checkbox

Toggle checkbox via Radix UI

Default

Usage

import { Checkbox } from '@tryvienna/ui'

<div className="flex items-center gap-2">
  <Checkbox id="default" />
  <Label htmlFor="default">Accept terms</Label>
</div>

Examples

Default

Default

<div className="flex items-center gap-2">
  <Checkbox id="default" />
  <Label htmlFor="default">Accept terms</Label>
</div>

Checked

Checked

<div className="flex items-center gap-2">
  <Checkbox id="checked" defaultChecked />
  <Label htmlFor="checked">Checked by default</Label>
</div>

Indeterminate

Indeterminate

<div className="flex items-center gap-2">
  <Checkbox id="indeterminate" checked="indeterminate" />
  <Label htmlFor="indeterminate">Indeterminate state</Label>
</div>

Disabled

Disabled

<div className="grid gap-4">
  <div className="flex items-center gap-2">
    <Checkbox id="disabled-unchecked" disabled />
    <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="disabled-checked" disabled defaultChecked />
    <Label htmlFor="disabled-checked">Disabled checked</Label>
  </div>
</div>

Checkbox Group

Checkbox Group

<div className="grid gap-3">
  <Label className="text-base font-semibold">Notification preferences</Label>
  <div className="flex items-center gap-2">
    <Checkbox id="email-notif" defaultChecked />
    <Label htmlFor="email-notif">Email notifications</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="push-notif" defaultChecked />
    <Label htmlFor="push-notif">Push notifications</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="sms-notif" />
    <Label htmlFor="sms-notif">SMS notifications</Label>
  </div>
</div>

API Reference

Checkbox

Also accepts all props from CheckboxPrimitive.Root.

Data Attributes

Component	data-slot
Checkbox	"checkbox"