/
1.1k
Sponsor

Checkbox Group

Checkbox group with min/max selection

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/checkbox-group

Usage

import { CheckboxGroup } from "@/components/ui/checkbox-group";
<CheckboxGroup
  label="Select toppings"
  options={[
    { value: "cheese", label: "Extra Cheese" },
    { value: "pepperoni", label: "Pepperoni" },
    { value: "mushrooms", label: "Mushrooms" },
  ]}
  onChange={(values) => {}}
/>

API Reference

CheckboxGroup

PropTypeDefault
labelstring-
optionsCheckboxGroupOption[]required
valuestring[]-
onChange(values: string[]) => void-
minnumber-
maxnumber-

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Keyboard: Arrow keys move inside the composite; Home / End select the first or last enabled item; Enter / Space activate, select, or toggle; Escape cancels or closes an owned surface; Tab / Shift+Tab move between termcn/Ink focus targets.
  • Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.