Checkbox

Checkbox is a toggle checkbox component with size variants, custom styling, and optional inline labels.

Import

import { Checkbox } from "@tosui/react";

Basic Usage

Code

<Checkbox label="Accept terms and conditions" />

Preview

Accept terms and conditions

Without Label

Code

<Checkbox aria-label="Toggle option" />

Preview

Sizes

Code

<VStack gap={4} align="flex-start">
  <Checkbox size="sm" label="Small checkbox" />
  <Checkbox size="md" label="Medium checkbox (default)" />
  <Checkbox size="lg" label="Large checkbox" />
</VStack>

Preview

Small checkboxMedium checkbox (default)Large checkbox

States

Code

<VStack gap={4} align="flex-start">
  <Checkbox label="Unchecked" />
  <Checkbox label="Checked" defaultChecked />
  <Checkbox label="Disabled" disabled />
  <Checkbox label="Disabled checked" disabled defaultChecked />
  <Checkbox label="Invalid" isInvalid />
</VStack>

Preview

UncheckedCheckedDisabledDisabled checkedInvalid

Controlled

Use isChecked and onChange for controlled mode.

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      label="Controlled checkbox"
      isChecked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

Checkbox Group

Group checkboxes for multiple selections.

Code

<VStack gap={2} align="flex-start">
  <Box fontWeight="medium">Select toppings:</Box>
  <Checkbox label="Pepperoni" />
  <Checkbox label="Mushrooms" />
  <Checkbox label="Onions" />
  <Checkbox label="Extra cheese" />
</VStack>

Preview

Select toppings:

PepperoniMushroomsOnionsExtra cheese

With FormField

Use with FormField for validation.

<FormField
  label="Terms"
  errorMessage="You must accept the terms"
  isInvalid
  isRequired
>
  <Checkbox label="I accept the terms and conditions" />
</FormField>

Props Reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Checkbox size
label	string	-	Optional label text
disabled	boolean	false	Disable the checkbox
isInvalid	boolean	false	Show invalid state
isChecked	boolean	-	Controlled checked state
defaultChecked	boolean	-	Initial checked state (uncontrolled)
onChange	(e: ChangeEvent) => void	-	Change handler

Checkbox also accepts all native <input type="checkbox"> attributes.

Accessibility

• Uses native <input type="checkbox"> for accessibility
• Label is associated with the input
• Supports keyboard navigation
• When no label is provided, use aria-label for accessibility

TypeScript

import { Checkbox, type CheckboxSize, type CheckboxProps } from "@tosui/react";