CheckboxGroup
Markdown for agentsMulti-select counterpart of RadioGroup: shared name, fieldset/legend context, the selection as string[], and vertical or horizontal layout.
npx slipstream-ui@latest add checkbox-groupVertical group (interactive)
selection: ['ts']
Horizontal layout (interactive)
No channels selected
Group-level error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | required | Shared name applied to every checkbox in the group. |
| legend | string | — | Accessible group label rendered as <legend>. |
| value | string[] | — | Currently selected values (controlled). |
| defaultValue | string[] | — | Initial selection (uncontrolled). |
| onValueChange | (value: string[]) => void | — | Called with the full selection after a toggle. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Stack options or lay them out in a wrapping row. |
| error | string | — | Group-level validation message; announced via role=alert. |
Accessibility
- Renders a native fieldset/legend so the group name is announced before each option.
- Selection lives in a string[] — perfect for form state, URLs, and API payloads.
- Keyboard behavior is the platform’s: Tab reaches the group, Space toggles the focused box.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.