CheckboxGroup

Installation#

npmpnpmyarnbun

npx sugarcoat add checkbox-group

Examples#

Default#

Default

Controlled#

Use value and onValueChange for controlled state.

Controlled

Orientation#

Change the layout direction.

Horizontal

With Descriptions#

With Descriptions

All Required#

Require at least one selection.

Required

Form Example#

Form Integration

Anatomy#

<CheckboxGroup>
  <CheckboxGroup.Label>Group Label</CheckboxGroup.Label>
  <Checkbox value="option1">Option 1</Checkbox>
  <Checkbox value="option2">Option 2</Checkbox>
</CheckboxGroup>

Usage#

Import

import { CheckboxGroup, Checkbox } from "@sugarcoat/ui-nxt";

Usage

<CheckboxGroup 
value={selected} 
onValueChange={setSelected}
>
<CheckboxGroup.Label>Options</CheckboxGroup.Label>
<Checkbox value="option1">Option 1</Checkbox>
<Checkbox value="option2">Option 2</Checkbox>
</CheckboxGroup>

Props#

CheckboxGroup (Root)#

Prop	Type	Default	Description
value	string[]	-	Controlled value (array of selected checkbox values)
defaultValue	string[]	-	Default selected values (uncontrolled)
onValueChange	(value: string[]) => void	-	Callback when selection changes
orientation	"vertical" \| "horizontal"	"vertical"	Layout direction of the group
size	"sm" \| "md" \| "lg"	"md"	Size variant for styling
allRequired	boolean	false	Whether all checkboxes must be checked
disabled	boolean	false	Disable all checkboxes in the group
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

Accessibility#

Built on Base UI CheckboxGroup for robust accessibility
Uses role="group" with proper labeling
Arrow keys navigate between checkboxes
Space key toggles individual checkboxes
Disabled state properly communicated to assistive technologies