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

CheckboxGroup

PreviousNext

Multiple choices with connected selected rows and fluid hover.

Preview

Controlled selection

FictionScienceHistoryExplore the pastPoetry

Selected: fiction, science

Select all and indeterminate

Select all
DesignDevelopment

Compact and disabled

FictionHistory
Disabled group

Installation

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

Usage

import { CheckboxGroup, CheckboxItem } from "@/components/ui/checkbox-group";
 
<CheckboxGroup aria-label="Interests" defaultValue={["science"]}>
  <CheckboxItem value="science" label="Science" description="New discoveries" />
  <CheckboxItem value="history" label="History" />
</CheckboxGroup>;

API Reference

Group uses Base UI value, defaultValue (string arrays), onValueChange, disabled and form props. Give the group an accessible name. CheckboxItem composes the standalone Checkbox, sharing its check-drawing animation, and accepts Base UI Checkbox Root props and requires label; description is optional. Both individual and group disabling are supported. Tab moves between checkboxes; Space changes selection. Density follows SizeProvider.