Skip to Content
ComponentsCheckbox

Checkbox

A control that allows the user to toggle between checked and not checked.

By clicking this checkbox, you agree to the terms and conditions.

Installation

The Checkbox component is part of the Anya UI registry:

import { Checkbox } from "@/src/registry/anya/ui/checkbox";

Usage

<Checkbox />

Examples

Default

import { Checkbox } from "@/src/registry/anya/ui/checkbox";
import { Label } from "@/src/registry/anya/ui/label";
 
export function CheckboxDemo() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Checked

<Checkbox id="terms-checked" defaultChecked />

With Description

By clicking this checkbox, you agree to the terms and conditions.

<div className="flex items-start gap-3">
  <Checkbox id="terms-desc" defaultChecked />
  <div className="grid gap-2">
    <Label htmlFor="terms-desc">Accept terms and conditions</Label>
    <p className="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
  </div>
</div>

Disabled

<Checkbox id="toggle-disabled" disabled />

Card Style

<Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
  <Checkbox
    id="toggle-card"
    defaultChecked
    className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
  />
  <div className="grid gap-1.5 font-normal">
    <p className="text-sm leading-none font-medium">Enable notifications</p>
    <p className="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
  </div>
</Label>

API Reference

Checkbox

The Checkbox component is built on top of Radix UI’s checkbox primitive and provides consistent styling.

PropTypeDefaultDescription
checkedboolean-The controlled checked state
defaultCheckedbooleanfalseThe uncontrolled checked state
disabledbooleanfalseWhether the checkbox is disabled
requiredbooleanfalseWhether the checkbox is required
onCheckedChange(checked: boolean) => void-Callback fired when checked state changes
classstring-Additional CSS classes
...propsReact.ComponentProps<typeof CheckboxPrimitive.Root>-All Radix UI checkbox props

Exports

  • Checkbox - The main Checkbox component
Last updated on
ButtonInput