CheckboxGroup
A native fieldset of independent choices with shared selection ownership.@gemologic/sheen · formsPlayground
<CheckboxGroup label="Alert channels" name="channels" options={[{ value: "email", label: "Email" }, { value: "desktop", label: "Desktop" }]} defaultValue={["email"]} />Variant matrix
Alert channels
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/CheckboxGroup.tsx- Tokens
--sheen-space-block-sm--sheen-color-fg-muted--sheen-color-danger-fg
Accessibility
Role: groupKeyboard: Tab, Shift+Tab, SpaceDo
- Use unique stable values and short group legends.
- Validate minimum selections in the app and provide a group error.
Do not
- Do not mark every checkbox required to require at least one selection.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible group legend. |
options * | readonly CheckboxOption[] | — | Options keyed by unique value; replacing objects or reordering retains surviving controls. |
value | readonly string[] | — | App-owned selected values; reset does not change them unless the app does. |
defaultValue | readonly string[] | — | Captured uncontrolled initial selection restored by uncanceled reset. |
onValueChange | (value: string[]) => void | — | Receives a fresh deduplicated selection array on changes. |
description | string | — | Supporting instructions associated with the fieldset. |
error | string | — | Group validation message; marks the fieldset invalid without moving focus. |
readOnly | boolean | false | Prevents option changes while retaining focus and form values. |