For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
1
Sponsor

Checkbox

PreviousNext

A standalone checkbox with a drawn check and mixed state.

Preview

Accept termsI agree to the terms of service.

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/checkbox.json

Usage

import { CheckboxItem } from "@/components/ui/checkbox";
 
<CheckboxItem name="terms" label="Accept terms" required />;

API Reference

CheckboxItem combines Checkbox with a label and optional description. Its entire row receives the selected or mixed background. CheckboxGroup uses this same component. Use Checkbox directly when only the small checkbox control is needed.

checked / defaultChecked: boolean. onCheckedChange receives the next boolean and Base UI event details. indeterminate controls the mixed state separately. size: default or compact, inherited from SizeProvider when omitted. disabled, readOnly, required, name, value, inputRef and ARIA props follow Base UI. Use a wrapping label or aria-label. Space toggles the focused checkbox. Reduced motion skips the check drawing transition.

The outline, size and check color match CheckboxGroup. The drawn-check animation is inspired by Nexvyn Checkbox, using Ketyap UI motion.