Hewn
Components

Components

CheckboxGroup

Labeled multi-select checkbox set with shared validation messaging.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add checkbox-group

Wraps React Aria CheckboxGroup around Hewn Checkbox items. Use when several related toggles share one label and error channel.

Notify me about
Choose the digests you want in inbox.

Usage

TSX
import { Checkbox, CheckboxGroup } from "@hewnui/ui";

<CheckboxGroup label="Notify me about" defaultValue={["billing"]}>
  <Checkbox value="billing">Billing</Checkbox>
  <Checkbox value="product">Product updates</Checkbox>
</CheckboxGroup>

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled group or individual checkboxes

Accessibility

  • Group label associates with the set
  • Each checkbox keeps its own accessible name
  • Keyboard and screen reader behavior from React Aria

API reference

Props for CheckboxGroup from @hewnui/ui/checkbox-group. Generated from component types — not hand-written.

Prop

Type

Checkbox

Binary selection control with motion-aware check feedback.

RadioGroup

Mutually exclusive choice set with animated selection indicator.

On this page

UsageStatesAccessibility