/ux
Components/Misc/CheckboxGroup

CheckboxGroup

Misc

Managed group of labelled checkboxes.

Renders a <fieldset> with a <legend> and distributes value state to child Checkbox components via context. Use when multiple related options can be selected simultaneously.

Usage

import { CheckboxGroup, Checkbox } from "nosible-ux"

export default function Example() {
  return (
    <CheckboxGroup label="Signal types" defaultValue={["earnings"]}>
      <Checkbox value="earnings" label="Earnings" />
      <Checkbox value="guidance" label="Guidance" />
      <Checkbox value="macro" label="Macro" />
    </CheckboxGroup>
  )
}

Examples

Horizontal orientation

Regions

With error

Alert channels

Select at least one channel.

Accessibility

Wraps children in <fieldset> with <legend>. Each child checkbox is independently focusable. Error text is announced via aria-describedby on the fieldset.

Props

Name TypeDefaultDescription
children
ReactNode—Checkbox children — each must have a `value` prop.
className
string | undefined—
defaultValue
string[] | undefined[]Uncontrolled default checked values.
description
ReactNode—Supporting text below the legend in text-text-muted.
disabled
boolean | undefinedfalseDisables every checkbox in the group.
error
ReactNode—Error message below description in critical red. Also propagates aria-invalid.
label
ReactNode—Legend text rendered above the group in Space Mono.
onChange
((value: string[]) => void) | undefined—Fired when any checkbox in the group changes. Receives the new string[] state.
orientation
"horizontal" | "vertical" | undefined"vertical"Stack direction for the checkbox list.
value
string[] | undefined—Controlled list of checked item values.
← All ComponentsGetting Started →