Checkbox Indicator data attributes
The Checkbox.Indicator component supports data-state attribute with values 'checked', 'unchecked', or 'indeterminate', and data-disabled attribute that is present when disabled.
Radix Primitives · all subjects
checkbox
30 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Checkbox Root component API properties
The Checkbox.Root component accepts the following properties: asChild (boolean, default false) to change the rendered element, defaultChecked (boolean or 'indeterminate') for uncontrolled state, checked (boolean or 'indeterminate') for controlled state, onCheckedChange (function) callback when state changes, disabled (boolean) to prevent interaction, required (boolean) to require checking before form submission, name (string) for form submission, and value (string, default 'on') for the form data value.
Checkbox Root data attributes
The Checkbox.Root component supports data-state attribute with values 'checked', 'unchecked', or 'indeterminate', and data-disabled attribute that is present when disabled.
Checkbox Indicator component API properties
The Checkbox.Indicator component accepts asChild (boolean, default false) to change the rendered element, and forceMount (boolean) to force mounting for animation library control.
Checkbox anatomy structure
A Checkbox component consists of Checkbox.Root as the main container and Checkbox.Indicator as a child that renders when the checkbox is checked or indeterminate. The Root component also renders a visually hidden input element to ensure form events propagate correctly.
Checkbox indeterminate state example
The following example demonstrates how to set a checkbox to indeterminate state by managing its checked state, rendering different icons for each state (DividerHorizontalIcon for indeterminate, CheckIcon for checked): ```jsx 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> </> ); }; ```
Checkbox unstable lower-level parts
The Checkbox component provides unstable lower-level parts for advanced compositions: Checkbox.unstable_Provider provides checkbox state and accepts form-related props (name, value, checked, defaultChecked, required, disabled, onCheckedChange), Checkbox.unstable_Trigger is the interactive button wrapping Checkbox.Indicator, and Checkbox.unstable_BubbleInput is the visually hidden input for form submission that can be omitted when form submission is not needed.
Checkbox decoupling hidden input example
The following example shows how to decouple the hidden input by using unstable lower-level parts: ```jsx 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> ); ```
Checkbox features
The Checkbox component supports an indeterminate state, full keyboard navigation, and can be used as either a controlled or uncontrolled component.
Checkbox composition with asChild
Both Checkbox.Root and Checkbox.Indicator support the asChild property which allows changing the default rendered element to a custom child element, merging their props and behavior. When asChild is set to true on Checkbox.Root, it can be composed with other components.
Checkbox unstable composition parts May 2025
Added unstable Provider, Trigger and BubbleInput parts to Checkbox.
Checkbox defaultChecked unexpected change fix
Fixed a bug where defaultChecked unexpectedly changed for uncontrolled checkboxes.
Checkbox form prop forwarding to bubble input
Forward the form prop to the bubble input element to fix non-parent form submissions in Checkbox.
CheckedState type export
Export CheckedState type from Checkbox.
Checkbox form reset state
Reset checkbox state when form is reset.
Checkbox prevents activation via enter key
Checkbox no longer activates when the enter key is pressed.
Checkbox onCheckedChange signature changed
Checkbox's onCheckedChange callback changed from onCheckedChange(event) to onCheckedChange(checked: CheckedState).
Checkbox size prop values
The size prop controls the size of the checkbox and accepts three values: 1, 2, and 3.
Checkbox variant prop values
The variant prop controls the visual style of the checkbox and accepts three values: surface, classic, and soft.
Checkbox color prop usage
The color prop assigns a specific color to the checkbox from the theme color palette. Example values shown include indigo, cyan, orange, crimson, and gray.
Checkbox highContrast prop
The highContrast prop, when used, increases the color contrast of the checkbox with the background.
Checkbox disabled attribute
The native disabled attribute can be used to create a disabled checkbox that cannot be interacted with.
Checkbox indeterminate state
A checkbox can have an indeterminate state by setting the defaultChecked or checked prop to the string value 'indeterminate'. This is useful for representing a partially selected state.
Checkbox alignment with text
When composing Checkbox within Text, the checkbox automatically centers with the first line of text. This alignment works correctly with both single-line and multi-line text.
Checkbox defaultChecked prop
The defaultChecked prop sets the initial checked state of the checkbox. It can be set to true, false, or the string 'indeterminate'.
Checkbox checked prop
The checked prop can be used to control the checkbox state. It accepts true, false, or the string 'indeterminate' for controlled components.
Checkbox inherits from primitive and supports margin props
The Checkbox component inherits props from the Checkbox primitive and supports common margin props for layout control.
Radix Themes 3.1.3 indeterminate checkbox support
Radix Themes version 3.1.3 added support for an indeterminate indicator on the uncontrolled Checkbox component.
Radix Themes 2.0.0 breaking change: Checkbox layout alignment
Radix Themes 2.0.0 improved Checkbox layout so that wrapping a checkbox in a Text component automatically aligns the checkbox with the first line of the text. Make sure your layouts with checkboxes look as expected; if not, wrap checkboxes in <Text as="label" size="...">.
Radix Themes 2.0.0 breaking change: Checkbox sizes
Radix Themes 2.0.0 reworked Checkbox sizes: added a smaller size="1", changed the default size to size="2", and added a more refined size="3". If you were using size="1" or size="2" checkboxes via explicit size prop, rename them to size="2" and size="3" respectively.