CheckboxGroup

stable

Group of related checkboxes with shared label

Data EntryInteractive/Storybook ↗

import { CheckboxGroup } from "@danagraph/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`label`	`string`	—	Group legend text
`items`req	`CheckboxItem[]`	—	Array of { value, label, disabled? } items
`value`req	`string[]`	—	Currently checked values
`onChange`req	`(value: string[]) => void`	—	Called with updated checked values
`orientation`	`"vertical" \| "horizontal"`	"vertical"	Layout direction

label

Type stringDefault —

Group legend text

itemsrequired

Type CheckboxItem[]Default —

Array of { value, label, disabled? } items

valuerequired

Type string[]Default —

Currently checked values

onChangerequired

Type (value: string[]) => voidDefault —

Called with updated checked values

orientation

Type "vertical" | "horizontal"Default "vertical"

Layout direction

semantic type border

MobileTouch Target

Stack items vertically on mobile. Each row must have min 44px tap height including padding.

Design Rationale

This component was designed to express:

01Visibility Over Invisibility

View all principles →

Explore Related

Binary toggle control with label

Single-selection radio button group

Was this helpful?