Checkbox

When to use

Checkbox is for a single yes-or-no choice and for several choices from a list: accepting terms, notification types, filter options.

When not to use

• For a setting that takes effect at once: Use a Switch; a Checkbox value applies when the form is submitted.
• For options that exclude each other: Use a radio group.
• For a toolbar button: Use a Toggle.

Anatomy

Option labelOption description goes here.

LightDark

Copy code

import { Checkbox } from '@bigbang/ui';

export default function WithDescription() {
  return <Checkbox label="Option label" description="Option description goes here." defaultChecked />;
}

1. Box: 16 px (checkbox-size), 4 px corners (checkbox-radius).
2. Mark: a check, or a dash in the mixed state.
3. Label: body-md; part of the click area with the box.
4. Description: optional; aligned with the label text.

Behaviour

• Click and Space toggle the box; clicking the label toggles it too.
• indeterminate shows a dash in the box and reports aria-checked="mixed".
• With parent, it checks or clears every item in a CheckboxGroup that has allValues.
• A hidden <input type="checkbox"> is submitted with the form; name and value go to it.

Guidelines

• Write the label as a positive statement: “Get notifications by email”.
• Gather related options in a CheckboxGroup under one legend.
• Check a box by default only when it is in the user’s interest.

Content

• The label is a sentence fragment; it has no full stop.
• The description says what the choice does.

Turkish	English
Tümü	All
En az bir seçenek seçin.	Choose at least one option.

Related components

• CheckboxGroup: gathers checkboxes under one legend.
• Toggle: a toolbar button that stays pressed.
• Label: when a separate label is needed.