On this page

Checkbox Group

SMS

Push

---
import { Checkbox } from "@/components/starwind/checkbox";
import { CheckboxGroup } from "@/components/starwind/checkbox-group";
---

<CheckboxGroup defaultValue={["email"]} aria-label="Notification channels">
  <Checkbox name="notifications" value="email" label="Email" />
  <Checkbox name="notifications" value="sms" label="SMS" />
  <Checkbox name="notifications" value="push" label="Push" />
</CheckboxGroup>

import { Checkbox } from "@/components/starwind/checkbox";
import { CheckboxGroup } from "@/components/starwind/checkbox-group";

export function Example() {
  return (
    <CheckboxGroup defaultValue={["email"]} aria-label="Notification channels">
      <Checkbox name="notifications" value="email" label="Email" />
      <Checkbox name="notifications" value="sms" label="SMS" />
      <Checkbox name="notifications" value="push" label="Push" />
    </CheckboxGroup>
  );
}

Installation

pnpx starwind@latest add checkbox-group

npx starwind@latest add checkbox-group

yarn dlx starwind@latest add checkbox-group

Usage

Use disabled on the group to disable every child without repeating the prop.

SMS

<CheckboxGroup disabled aria-label="Unavailable channels">
  <Checkbox value="email" label="Email" />
  <Checkbox value="sms" label="SMS" />
</CheckboxGroup>

import { Checkbox } from "@/components/starwind/checkbox";
import { CheckboxGroup } from "@/components/starwind/checkbox-group";

export function Example() {
  return (
    <>
      <CheckboxGroup disabled aria-label="Unavailable channels">
        <Checkbox value="email" label="Email" />
        <Checkbox value="sms" label="SMS" />
      </CheckboxGroup>
    </>
  );
}

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Checkbox Group

Inherits div attributes. Omits `defaultValue` and `onChange`.

Contains the following additional props:

Prop Type Default

defaultValue string[] —

Description: Sets the initial value when the component is uncontrolled.
Classification: Primitive override
Primitive prop: checkbox-group.Root.defaultValue

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Checkbox Group.

Primitive API

Checkbox Group Primitive

Runtime API

Checkbox Group primitive: createCheckboxGroup from @starwind-ui/runtime/checkbox-group

Changelog

v1.0.1

Updated React Runtime state synchronization so canceled proposals stay uncommitted and accepted changes remain aligned.

v1.0.0

Added Checkbox Group as a Runtime-backed component with grouped ownership and native form participation.
See the Checkbox Group Primitive for the underlying unstyled anatomy and behavior API.