Checkbox
A checkbox with label and validation support built on Base UI
Loading...
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/checkbox.jsonnpx shadcn@latest add https://prototyper-ui.com/r/checkbox.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/checkbox.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/checkbox.jsonThis will add the following files to your project:
components/ui/checkbox.tsx
Usage
import {
Checkbox,
CheckboxControl,
CheckboxIndicator,
} from "@/components/ui/checkbox";
<Checkbox>
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
Accept terms and conditions
</Checkbox>;Anatomy
<Checkbox>
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
{/* label text */}
</Checkbox>| Sub-component | data-slot | Purpose | Required |
|---|---|---|---|
Checkbox | checkbox | Root provider, manages checked state | Yes |
CheckboxControl | checkbox-control | Visual box that displays the check indicator | Yes |
CheckboxIndicator | checkbox-indicator | Checkmark or indeterminate icon | Yes |
Examples
Disabled
Loading...
Indeterminate
Loading...
Read Only
Loading...
Validation
Loading...
Styling
Data Slots
Use data-slot attributes to target specific parts of the checkbox:
| Slot name | Element |
|---|---|
checkbox | Root wrapper (label + control container) |
checkbox-control | The visual box element |
checkbox-indicator | The checkmark / indeterminate icon |
Customization Examples
/* Make all checkbox controls larger */
[data-slot="checkbox-control"] {
@apply size-5 rounded-md;
}
/* Custom checked color */
[data-slot="checkbox-control"] {
@apply group-data-checked:bg-green-600 group-data-checked:border-green-600;
}{
/* Override styles via className */
}
<Checkbox className="gap-4">
<CheckboxControl className="size-5 rounded-md">
<CheckboxIndicator />
</CheckboxControl>
Larger checkbox
</Checkbox>;API Reference
Checkbox
Root component that manages checked/unchecked/indeterminate state and renders as a label.
Prop
Type
All Base UI Checkbox.Root props are forwarded via ...props.
CheckboxControl
The visual box element that displays the check indicator.
Prop
Type
All standard span props are forwarded via ...props.
CheckboxIndicator
The checkmark or indeterminate icon rendered inside the control.
Prop
Type
All Base UI Checkbox.Indicator props are forwarded via ...props.
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Space | Toggles the checkbox checked state |
Tab | Moves focus to / away from the checkbox |
ARIA Attributes
- Renders with
role="checkbox"via Base UI. aria-checkedis set totrue,false, ormixed(indeterminate) based on state.aria-disabledis set when the checkbox is disabled.aria-readonlyis set when the checkbox is read-only.aria-requiredis set when the checkbox is required.- Screen readers announce the checkbox label and its checked/unchecked/mixed state.
Compose
This component is available in @prototyperco/compose.
Catalog Definition
import { z } from "zod";
import { defineComponent } from "@prototyperco/compose/catalog";
export default defineComponent({
description: "A checkbox toggle for boolean values",
props: z.object({
label: z
.string()
.optional()
.describe("Label displayed next to the checkbox"),
checked: z.boolean().optional().describe("Whether the checkbox is checked"),
disabled: z
.boolean()
.optional()
.describe("Whether the checkbox is disabled"),
}),
events: ["change"],
example: { label: "I agree to the terms", checked: false },
});Example Spec
{
"root": "check",
"elements": {
"check": {
"type": "Checkbox",
"props": {
"label": "I agree to the terms",
"checked": false
},
"$bindState": { "path": "/agreed", "event": "change" }
}
}
}Learn more in the Compose documentation.