✨ If you like Ebon UI, please give us a star on GitHub.

Checkbox

A fully customizable, theme-aware checkbox component built with Tailwind CSS and React. Perfect for accessible and elegant form controls.

Open in

	Name	Status	Actions
	Grok Premium	active
	API Access	active
	Team Plan	inactive
	Enterprise	active

0 of 4 selected

// app/examples/checkbox-table-example.tsx
"use client"

import { useState } from "react"
import { Checkbox } from "registry/ebonui/checkbox"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

export function CheckboxTableExample() {
  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
    {}
  )

  const items = [
    { id: "1", name: "Grok Premium", status: "active" },
    { id: "2", name: "API Access", status: "active" },
    { id: "3", name: "Team Plan", status: "inactive" },
    { id: "4", name: "Enterprise", status: "active" },
  ]

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[50px]"></TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.map((item) => (
              <TableRow key={item.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedItems[item.id] || false}
                    onCheckedChange={(checked) =>
                      setSelectedItems((prev) => ({
                        ...prev,
                        [item.id]: !!checked,
                      }))
                    }
                  />
                </TableCell>
                <TableCell className="font-medium">{item.name}</TableCell>
                <TableCell>
                  <Badge
                    variant={item.status === "active" ? "default" : "secondary"}
                  >
                    {item.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <Button variant="ghost" size="sm">
                    Edit
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <div className="flex items-center justify-between pt-0">
        <div className="text-muted-foreground space-x-2 text-sm">
          {Object.values(selectedItems).filter(Boolean).length} of{" "}
          {items.length} selected
        </div>
        <div className="space-x-2">
          <Button
            variant="outline"
            size="sm"
            disabled={Object.keys(selectedItems).length === 0}
          >
            Export Selected
          </Button>
          <Button
            size="sm"
            variant="destructive"
            disabled={Object.keys(selectedItems).length === 0}
          >
            Delete Selected
          </Button>
        </div>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @ebonui/checkbox

Usage

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

<Checkbox />

Props

Prop	Type	Default	Description
`id`	`string`	–	Optional ID for the checkbox element. Auto-generated if omitted.
`className`	`string`	`""`	Additional classes for the outer box.
`disabled`	`boolean`	`false`	Disables the checkbox.
`checked`	`boolean`	–	Controls the checkbox state (used in controlled components).
`defaultChecked`	`boolean`	–	Initial checked state (for uncontrolled components).
`...props`	`React.InputHTMLAttributes<HTMLInputElement>`	–	All other native checkbox attributes like `onChange`, `name`, etc.

Styling

Fully theme-aware using Tailwind CSS classes like peer-checked:bg-primary.
Uses your design tokens (border, primary, etc.) to match your global theme.
Customize size, colors, or icons easily via Tailwind utility overrides.

Card Custom Cursor

On This Page

Installation Usage Props Styling

Contribute

Checkbox

A fully customizable, theme-aware checkbox component built with Tailwind CSS and React. Perfect for accessible and elegant form controls.

Open in

	Name	Status	Actions
	Grok Premium	active
	API Access	active
	Team Plan	inactive
	Enterprise	active

0 of 4 selected

// app/examples/checkbox-table-example.tsx
"use client"

import { useState } from "react"
import { Checkbox } from "registry/ebonui/checkbox"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

export function CheckboxTableExample() {
  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
    {}
  )

  const items = [
    { id: "1", name: "Grok Premium", status: "active" },
    { id: "2", name: "API Access", status: "active" },
    { id: "3", name: "Team Plan", status: "inactive" },
    { id: "4", name: "Enterprise", status: "active" },
  ]

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[50px]"></TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.map((item) => (
              <TableRow key={item.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedItems[item.id] || false}
                    onCheckedChange={(checked) =>
                      setSelectedItems((prev) => ({
                        ...prev,
                        [item.id]: !!checked,
                      }))
                    }
                  />
                </TableCell>
                <TableCell className="font-medium">{item.name}</TableCell>
                <TableCell>
                  <Badge
                    variant={item.status === "active" ? "default" : "secondary"}
                  >
                    {item.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-right">
                  <Button variant="ghost" size="sm">
                    Edit
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <div className="flex items-center justify-between pt-0">
        <div className="text-muted-foreground space-x-2 text-sm">
          {Object.values(selectedItems).filter(Boolean).length} of{" "}
          {items.length} selected
        </div>
        <div className="space-x-2">
          <Button
            variant="outline"
            size="sm"
            disabled={Object.keys(selectedItems).length === 0}
          >
            Export Selected
          </Button>
          <Button
            size="sm"
            variant="destructive"
            disabled={Object.keys(selectedItems).length === 0}
          >
            Delete Selected
          </Button>
        </div>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @ebonui/checkbox

Usage

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

<Checkbox />

Props

Prop	Type	Default	Description
`id`	`string`	–	Optional ID for the checkbox element. Auto-generated if omitted.
`className`	`string`	`""`	Additional classes for the outer box.
`disabled`	`boolean`	`false`	Disables the checkbox.
`checked`	`boolean`	–	Controls the checkbox state (used in controlled components).
`defaultChecked`	`boolean`	–	Initial checked state (for uncontrolled components).
`...props`	`React.InputHTMLAttributes<HTMLInputElement>`	–	All other native checkbox attributes like `onChange`, `name`, etc.

Styling

Fully theme-aware using Tailwind CSS classes like peer-checked:bg-primary.
Uses your design tokens (border, primary, etc.) to match your global theme.
Customize size, colors, or icons easily via Tailwind utility overrides.

Card Custom Cursor

On This Page

Installation Usage Props Styling

Contribute