Simple Checkbox for React

Use checkboxes for independent choices, where people can pick none, one or several: preferences, features, filters. Use a Radio Group when exactly one option of several must be picked, like a payment method. A single checkbox fits a yes-or-no that takes effect on submit. A Switch fits a setting that applies the moment it changes.

The box alone is a 16px target. A label makes the words clickable too, which gives a much larger tap area, and it is the checkbox's accessible name. The horizontal Field keeps the two on one line with the right gap. Give the checkbox an id and point the label's htmlFor at it.

This example is uncontrolled: the box keeps its own state. To own it, hold the checked value yourself and update it on every change. Pass checked and update it in onCheckedChange, which receives the new boolean. Use defaultChecked for a starting value.

Yes. Add classes on the Checkbox, and put colors for the checked state behind the checked variant. To change every checkbox at once, edit the checkbox file in your components/ui folder.

Yes. Base UI gives it the checkbox role and its checked state, Space toggles it, and it shows a focus ring for keyboard users. The label gives it a name, so write one that makes sense on its own: "Accept terms and conditions", not "Yes".

For a required box like this one, check it on submit. If it is empty, set invalid on the Field, which marks the checkbox invalid and turns the box and label destructive, and add a FieldError with the message. The Checkbox docs show the invalid state. With React Hook Form, TanStack Form or Formisch, connect the field to the checked state.