Source: https://www.radix-ui.com/themes/docs/components/checkbox

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Components

Checkbox

Base input element to toggle an option on and off.

View source Report an issue View in Playground

Agree to Terms and Conditions

<Text as="label" size="2">
	<Flex gap="2">
		<Checkbox defaultChecked />
		Agree to Terms and Conditions
	</Flex>
</Text>

API Reference

---

This component inherits props from the Checkbox primitive and supports common margin props .

| Prop | Type | Default | | --- | --- | --- | | size | Responsive<"1" \| "2" \| "3"> | "2" | | variant<br><br>Prop description | "classic" \| "surface" \| "soft" | "surface" | | color<br><br>Prop description | enum<br><br>See full type | No default value | | highContrast<br><br>Prop description | boolean | No default value |

Examples

---

Size

Use the size prop to control the size of the checkbox.

<Flex align="center" gap="2">
	<Checkbox size="1" defaultChecked />
	<Checkbox size="2" defaultChecked />
	<Checkbox size="3" defaultChecked />
</Flex>

Variant

Use the variant prop to control the visual style of the checkbox.

<Flex align="center" gap="4">
	<Flex gap="2">
		<Checkbox variant="surface" defaultChecked />
		<Checkbox variant="surface" />
	</Flex>

	<Flex gap="2">
		<Checkbox variant="classic" defaultChecked />
		<Checkbox variant="classic" />
	</Flex>

	<Flex gap="2">
		<Checkbox variant="soft" defaultChecked />
		<Checkbox variant="soft" />
	</Flex>
</Flex>

Color

Use the color prop to assign a specific color .

<Flex gap="2">
	<Checkbox color="indigo" defaultChecked />
	<Checkbox color="cyan" defaultChecked />
	<Checkbox color="orange" defaultChecked />
	<Checkbox color="crimson" defaultChecked />
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Grid columns="5" display="inline-grid" gap="2">
	<Checkbox color="indigo" defaultChecked />
	<Checkbox color="cyan" defaultChecked />
	<Checkbox color="orange" defaultChecked />
	<Checkbox color="crimson" defaultChecked />
	<Checkbox color="gray" defaultChecked />

	<Checkbox color="indigo" defaultChecked highContrast />
	<Checkbox color="cyan" defaultChecked highContrast />
	<Checkbox color="orange" defaultChecked highContrast />
	<Checkbox color="crimson" defaultChecked highContrast />
	<Checkbox color="gray" defaultChecked highContrast />
</Grid>

Alignment

Composing Checkbox within Text automatically centers it with the first line of text.

Agree to Terms and Conditions Agree to Terms and Conditions Agree to Terms and Conditions

<Flex direction="column" gap="3">
	<Text as="label" size="2">
		<Flex as="span" gap="2">
			<Checkbox size="1" defaultChecked /> Agree to Terms and Conditions
		</Flex>
	</Text>

	<Text as="label" size="3">
		<Flex as="span" gap="2">
			<Checkbox size="2" defaultChecked /> Agree to Terms and Conditions
		</Flex>
	</Text>

	<Text as="label" size="4">
		<Flex as="span" gap="2">
			<Checkbox size="3" defaultChecked /> Agree to Terms and Conditions
		</Flex>
	</Text>
</Flex>

It is automatically well-aligned with multi-line text too.

I understand that these documents are confidential and cannot be shared with a third party.

<Box maxWidth="300px">
	<Text as="label" size="3">
		<Flex as="span" gap="2">
			<Checkbox defaultChecked /> I understand that these documents are
			confidential and cannot be shared with a third party.
		</Flex>
	</Text>
</Box>

Disabled

Use the native disabled attribute to create a disabled checkbox.

Not checkedCheckedNot checkedChecked

<Flex direction="column" gap="2">
	<Text as="label" size="2">
		<Flex as="span" gap="2">
			<Checkbox />
			Not checked
		</Flex>
	</Text>

	<Text as="label" size="2">
		<Flex as="span" gap="2">
			<Checkbox defaultChecked />
			Checked
		</Flex>
	</Text>

	<Text as="label" size="2" color="gray">
		<Flex as="span" gap="2">
			<Checkbox disabled />
			Not checked
		</Flex>
	</Text>

	<Text as="label" size="2" color="gray">
		<Flex as="span" gap="2">
			<Checkbox disabled defaultChecked />
			Checked
		</Flex>
	</Text>
</Flex>

Indeterminate

Use the "indeterminate" value to create an indeterminate checkbox.

<Flex gap="2">
	<Checkbox defaultChecked="indeterminate" />
	<Checkbox checked="indeterminate" />
</Flex>

PreviousCard

NextCheckbox Group

Edit this page on GitHub.