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

Loading 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-checked:bg-teal-50 data-checked:text-teal-950 sm:text-sm dark:text-zinc-100 dark:data-checked:bg-teal-950/40 dark:data-checked: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-focus-visible:ring-teal-600 group-data-checked:border-teal-600 group-data-checked:bg-teal-600 sm:size-4 dark:border-white/20 dark:bg-zinc-900 dark:group-data-focus-visible:ring-teal-400 dark:group-data-checked:border-teal-400 dark:group-data-checked: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.
invalidbooleanMarks the group invalid and shows its FieldError.

Checkbox

DOM element

Label with a hidden native checkbox.

PropTypeDescription
namestringSubmission name; falls back to the group name.
valuestringSubmitted value for this box.
checkedbooleanControlled tick state.
defaultCheckedbooleanInitial tick state.
onChange(checked: 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.

Checkbox

Style hookMeaning
[data-checked]The box is checked.
[data-indeterminate]The box is mixed.
[data-disabled]The box cannot change.
[data-focused]The hidden input has focus.
[data-focus-visible]Focus should show a visible ring.
[data-hovered]A pointer is over the label.

Keep exploring