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>
  );
}

Runtime example adjustment

The group owns its default value and emits one starwind:value-change event when a child checkbox changes. Child checkboxes keep their native form names and values.

Installation

pnpx starwind@latest add checkbox-group

npx starwind@latest add checkbox-group

yarn dlx starwind@latest add checkbox-group

Framework Availability

Astro Available React Available

Checkbox Group is available for Astro and React.

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>

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. 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.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.