Embossed UI

Search documentation

Search for a page or component.

Checkbox

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

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

export function CheckboxDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <div className="flex items-center gap-2">
        <Checkbox id="cb-terms" />
        <Label htmlFor="cb-terms">Accept terms</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="cb-checked" defaultChecked />
        <Label htmlFor="cb-checked">Checked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="cb-disabled" disabled />
        <Label htmlFor="cb-disabled">Disabled</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="cb-invalid" aria-invalid />
        <Label htmlFor="cb-invalid">Invalid</Label>
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/checkbox.json

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

Examples

With description

Keep titles, prices and stock in step with Shopify.

Import orders from the last 90 days.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"

export function CheckboxWithDescription() {
  return (
    <FieldGroup className="max-w-sm">
      <Field orientation="horizontal">
        <Checkbox id="cb-sync" defaultChecked />
        <FieldContent>
          <FieldLabel htmlFor="cb-sync">Sync products</FieldLabel>
          <FieldDescription>
            Keep titles, prices and stock in step with Shopify.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="cb-orders" />
        <FieldContent>
          <FieldLabel htmlFor="cb-orders">Sync orders</FieldLabel>
          <FieldDescription>
            Import orders from the last 90 days.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  )
}

Choice card

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"

export function CheckboxChoiceCard() {
  return (
    <FieldLabel className="max-w-sm">
      <Field orientation="horizontal">
        <Checkbox id="cb-card" defaultChecked />
        <FieldContent>
          <FieldTitle>Push enhanced images to Shopify</FieldTitle>
          <FieldDescription>
            Replace product photos with the edited versions.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
  )
}

API Reference

Checkbox is built on the Base UI Checkbox primitive. See the Base UI documentation for every prop.

CardCollapsible