Yami

Checkbox

A control that toggles between checked and not checked.

Installation

Add the checkbox component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/checkbox.json

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex flex-col gap-2">
  <div className="flex items-center gap-2">
    <Checkbox id="c1" defaultChecked />
    <Label htmlFor="c1">Checked</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="c2" />
    <Label htmlFor="c2">Unchecked</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="c3" disabled />
    <Label htmlFor="c3">Disabled</Label>
  </div>
</div>

Examples

Default

Code

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex flex-col gap-2">
  <div className="flex items-center gap-2">
    <Checkbox id="c1" defaultChecked />
    <Label htmlFor="c1">Checked</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="c2" />
    <Label htmlFor="c2">Unchecked</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="c3" disabled />
    <Label htmlFor="c3">Disabled</Label>
  </div>
</div>