Components

Checkbox

Allows users to make multiple selections from a list, or a single confirmation before proceeding.

Replacing soon

I agree to the terms and conditions

Anatomy

import {Checkbox, CheckboxGroup} from '@staffbase/design';

<Checkbox />
<CheckboxGroup />

Use CheckboxGroup to manage a set of related checkboxes with a shared label, description, and error state.

Preferences

Option 1

Option 2

Option 3

Optional description text

Name	Type	Description
`label`	`string`	The label text displayed next to the checkbox.
`description`	`string`	Descriptive text displayed below the label.
`errorMessage`	`string`	Error message displayed when `hasError` is true.
`hasError`	`boolean`	Puts the checkbox into an error state.
`errorAriaLive`	`offassertivepolite`	Sets the priority with which screen readers announce the error message. Default:`'off'`
`requiredLabel`	`string`	Text appended to the label indicating the field is required, e.g. '(Required)'.
`checked`	`boolean`	Controlled checked state.
`defaultChecked`	`boolean`	Initial checked state (uncontrolled).
`disabled`	`boolean`	Disables the checkbox.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	Called when the checked state changes.
`name`	`string`	HTML name attribute, used when submitting a form.
`id`	`string`	HTML id attribute.
`className`	`string`	CSS class applied to the container element.

Name	Type	Description
`options`	`CheckboxOption[]`	Array of options. Each option has `value` (string, required), `label` (string, required), `disabled` (boolean), and `description` (string).
`label`	`string`	Label for the entire group.
`description`	`string`	Descriptive text for the group, displayed when a label is also provided.
`value`	`string[]`	Controlled array of selected option values.
`onChange`	`(option: CheckboxOption) => void`	Called with the toggled option whenever a checkbox changes.
`hasError`	`boolean`	Puts the group into an error state.
`errorMessage`	`string`	Error message displayed when `hasError` is true.
`disableAll`	`boolean`	Disables all options in the group.
`errorAriaLive`	`offassertivepolite`	Sets the priority with which screen readers announce the group error message. Default:`'off'`
`className`	`string`	CSS class applied to the group container.

Use checkboxes when users can select multiple options independently from a list.
Use a single checkbox for a standalone binary choice, such as accepting terms.
Always provide a clear, concise label. Use description for additional context.
Use requiredLabel and errorMessage together to communicate validation state clearly.
Prefer CheckboxGroup over a collection of individual Checkbox components when options share a group label and validation state.