Skip to content
comp0

comp0

Fields

Checkbox

One tick box or a collection that can have several ticks.

When to use it: Use it for independent yes/no choices or multiple selections.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Checkbox.tsxtsx
import { Checkbox } from "@comp0/react";

export function Example() {
  return (
    <Checkbox
      className="group flex min-h-7 items-center gap-2 rounded px-1 text-base text-zinc-800 data-selected:bg-teal-50 data-selected:text-teal-950 sm:text-sm dark:text-zinc-100 dark:data-selected:bg-teal-950/40 dark:data-selected:text-teal-50"
      defaultChecked
      name="product-updates"
    >
      <span className="size-5 shrink-0 rounded-sm border border-zinc-950/20 bg-white ring-2 ring-transparent group-data-focused:ring-teal-600 group-data-selected:border-teal-600 group-data-selected:bg-teal-600 sm:size-4 dark:border-white/20 dark:bg-zinc-900 dark:group-data-focused:ring-teal-400 dark:group-data-selected:border-teal-400 dark:group-data-selected:bg-teal-400" />
      Send me product updates
    </Checkbox>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. CheckboxGroupOptional

    Optional shared name and value provider. Does not add a DOM element.

  2. Checkbox

    Label with a hidden native checkbox. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start with a labelled Checkbox.

  2. 2

    Add the supporting parts

    Wrap related boxes in CheckboxGroup and give each value.

  3. 3

    Make the behavior clear

    Give the group a name when selected values should submit.

    Exampletsx
    <CheckboxGroup name="topics"><Checkbox value="news">News</Checkbox></CheckboxGroup>

Keyboard

Space
Checks or unchecks the focused box.
⇥
Moves between checkboxes.

Forms and accessibility

Each selected Checkbox submits its native name and value.

Accessibility checklist

  • Each checkbox needs visible choice text.
  • Use Fieldset and Legend to name a collection.
  • Show indeterminate state with more than color.

API reference

Importtsx
import { Checkbox, CheckboxGroup } from "@comp0/react";

CheckboxGroup

OptionalContext only

Optional shared name and value provider.

PropTypeDescription
valuestring[]Controlled selected values.
defaultValuestring[]Initial selected values.
onChange(value: string[]) => voidReceives the next selected values.
namestringShared submission name for the group.
requiredbooleanRequires at least one checkbox to be selected.

Checkbox

DOM element

Label with a hidden native checkbox.

PropTypeDescription
namestringSubmission name; falls back to the group name.
valuestringSubmitted value for this box.
checked / defaultCheckedbooleanControlled or initial tick state.
onChange(selected: boolean) => voidReceives the next tick state.
indeterminatebooleanShows the mixed state.
disabledbooleanDisables the box.
inputPropsInputHTMLAttributesProps for the hidden native input.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-selected]

on Checkbox

The box is checked.
[data-indeterminate]

on Checkbox

The box is mixed.
[data-disabled]

on Checkbox

The box cannot change.

Keep exploring