Checkbox

A control that allows the user to toggle between checked and not checked.

import * as React from "react";
import { Checkbox } from "radix-ui";
import { CheckIcon } from "@radix-ui/react-icons";
import "./styles.css";

const CheckboxDemo = () => (
	<form>
		<div style={{ display: "flex", alignItems: "center" }}>
			<Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
				<Checkbox.Indicator className="CheckboxIndicator">
					<CheckIcon />
				</Checkbox.Indicator>
			</Checkbox.Root>
			<label className="Label" htmlFor="c1">
				Accept terms and conditions.
			</label>
		</div>
	</form>
);

export default CheckboxDemo;
Expand code

Anatomy

Import all parts and piece them together.

import { Checkbox } from "radix-ui";

export default () => (
	<Checkbox.Root>
		<Checkbox.Indicator />
	</Checkbox.Root>
);

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Examples

Indeterminate

You can set the checkbox to indeterminate by taking control of its state.

import { DividerHorizontalIcon, CheckIcon } from "@radix-ui/react-icons";
import { Checkbox } from "radix-ui";

export default () => {
	const [checked, setChecked] = React.useState("indeterminate");

	return (
		<>
			<StyledCheckbox checked={checked} onCheckedChange={setChecked}>
				<Checkbox.Indicator>
					{checked === "indeterminate" && <DividerHorizontalIcon />}
					{checked === true && <CheckIcon />}
				</Checkbox.Indicator>
			</StyledCheckbox>

			<button
				type="button"
				onClick={() =>
					setChecked((prevIsChecked) =>
						prevIsChecked === "indeterminate" ? false : "indeterminate",
					)
				}
			>
				Toggle indeterminate
			</button>
		</>
	);
};

Decoupling the hidden input

By default, Checkbox.Root renders a visually hidden input for form submission. To recompose, move, or exclude that input, you can build the checkbox from its lower-level parts instead.

Important: These parts are unstable and prefixed with unstable_, so their API may change in a future release.

• Checkbox.unstable_Provider provides the checkbox state and accepts the form-related props (name, value, checked, defaultChecked, required, disabled, onCheckedChange).
• Checkbox.unstable_Trigger is the interactive button that wraps Checkbox.Indicator.
• Checkbox.unstable_BubbleInput is the visually hidden input that Checkbox.Root renders by default. Omit it when you don't need form submission.

import { Checkbox } from "radix-ui";

export default () => (
	<Checkbox.unstable_Provider name="terms">
		<Checkbox.unstable_Trigger>
			<Checkbox.Indicator />
		</Checkbox.unstable_Trigger>
		<Checkbox.unstable_BubbleInput />
	</Checkbox.unstable_Provider>
);

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

Keyboard Interactions