Radix Docs

Checkbox

A control that allows a user to select one or more items from a set.

Usage


import {Checkbox} from "@/components/ui/checkbox";
 
<Checkbox />;

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	-	Controlled. Whether the checkbox is checked.
`defaultChecked`	`boolean \| "indeterminate"`	-	Uncontrolled. Initial checked state.
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the checked state changes.
`disabled`	`boolean`	`false`	Whether the checkbox is disabled.
`loading`	`boolean`	`false`	Whether the checkbox is in a loading state. Adds a pulse animation and disables interaction.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size variant of the checkbox.
`color`	`"primary" \| "secondary" \| "success" \| "warning" \| "destructive"`	`"primary"`	Color scheme applied when the checkbox is checked.
`borderRadius`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Border radius of the checkbox container.
`baseClassName`	`string`	-	Tailwind classes applied to the root element (overrides `className`).
`iconClassName`	`string`	-	Tailwind classes applied to the icon element.

Also extends all React Native Pressable component props.

The internal hook that powers the Checkbox component, providing state management and accessibility via @react-aria.

Parameters:

Parameter	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	-	Controlled checked state.
`defaultChecked`	`boolean \| "indeterminate"`	-	Uncontrolled default checked state.
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the checked state changes.
`disabled`	`boolean`	-	Whether the checkbox is disabled.
`loading`	`boolean`	-	Whether the checkbox is in a loading state.
`...props`	`AriaToggleButtonProps`	-	Additional `@react-aria/button` toggle props.

Returns:


{
  state: {
    isChecked: boolean;
    setIsChecked: (isChecked: boolean) => void;
  };
  props: ComponentProps<typeof Pressable>;
}

Property	Type	Description
`state.isChecked`	`boolean`	Whether the checkbox is currently checked.
`state.setIsChecked`	`(isChecked: boolean) => void`	Setter for the checked state (no-op when controlled).
`props`	`ComponentProps<typeof Pressable>`	Accessibility & interaction props for the root `Pressable`.

The Checkbox component is built with accessibility in mind and includes:

Follows the WAI-ARIA checkbox pattern .
Uses useToggleButton to provide correct semantics and keyboard support (⌨️ Space / Enter to toggle).
Announces checked, unchecked, mixed (indeterminate) and disabled states via aria-checked and aria-disabled.
Works with useFocusRing for accurate focus management.

Sets accessibilityRole="checkbox" so screen readers announce it correctly.
Updates accessibilityState={{checked, disabled}} to reflect the current state, including "mixed" for indeterminate.
Ensures a touch target of at least 44×44 pt.
Uses visual icon changes plus state announcements for immediate feedback.

Slots:

Variants:

size:
- sm Small icon size (w-2 h-2).
- md (default) Medium icon size (w-3.5 h-3.5).
- lg Large icon size (w-5 h-5).
color:
- primary (default), secondary, success, warning, destructive Used when checked is true.
borderRadius:
- none, sm, md (default), lg, xl, full Border radius of the checkbox.
disabled:
- true Applies opacity-50.
loading:
- true Applies animate-pulse.
checked:
- true Applies background color based on color variant.

Base Classes:

base: flex flex-row items-center justify-center bg-transparent border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
icon: text-primary-foreground