# Checkbox primitive (/components/primitives/checkbox)



Use the Checkbox primitive when you need a custom label layout or extra content. For normal
application forms, use [`Checkbox`](/components/forms/checkbox).

apps/docs/src/examples/checkbox-primitive/basic.tsx

```tsx
import {
	Checkbox,
	CheckboxContent,
	CheckboxControl,
	CheckboxIndicator,
} from '@luke-ui/react/primitives/checkbox';
import { FieldDescription, FieldError } from '@luke-ui/react/primitives/field';

export default () => {
	return (
		<Checkbox isInvalid>
			<CheckboxContent>
				<CheckboxControl>
					<CheckboxIndicator />
				</CheckboxControl>
				Email notifications
			</CheckboxContent>
			<FieldDescription>Receive updates by email.</FieldDescription>
			<FieldError>Choose an option.</FieldError>
		</Checkbox>
	);
};
```

## Anatomy [#anatomy]

`Checkbox` is the React Aria field root. `CheckboxContent` is the clickable label and must contain
`CheckboxControl`, which centres `CheckboxIndicator`. Place visible label content beside the control
inside `CheckboxContent`. Use `FieldDescription` and `FieldError` as siblings of `CheckboxContent`
for the standard supporting and validation semantics.

```tsx
<Checkbox isInvalid>
	<CheckboxContent>
		<CheckboxControl>
			<CheckboxIndicator />
		</CheckboxControl>
		Email notifications
	</CheckboxContent>
	<FieldDescription>Receive updates by email.</FieldDescription>
	<FieldError>Choose a notification preference before you continue.</FieldError>
</Checkbox>
```

## API [#api]

### CheckboxProps [#checkboxprops]

<ComponentPropsTable
  id="type-table-checkbox.tsx-CheckboxProps"
  type="{
  &#x22;id&#x22;: &#x22;checkbox.tsx-CheckboxProps&#x22;,
  &#x22;name&#x22;: &#x22;CheckboxProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the Checkbox primitive root.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;children&#x22;,
      &#x22;description&#x22;: &#x22;Checkbox anatomy, including clickable `CheckboxContent`.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ChildrenOrFunction<CheckboxFieldRenderProps>&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ChildrenOrFunction<object>&#x22;,
      &#x22;required&#x22;: true,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;defaultSelected&#x22;,
      &#x22;description&#x22;: &#x22;Initial selection state for an uncontrolled checkbox.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isDisabled&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox is disabled.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isIndeterminate&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox displays a mixed selection state.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isInvalid&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox is invalid.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isReadOnly&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox can be read but not changed.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isRequired&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox is required before the form can submit.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isSelected&#x22;,
      &#x22;description&#x22;: &#x22;Whether the checkbox is selected.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onChange&#x22;,
      &#x22;description&#x22;: &#x22;Called when the selection changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isSelected: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;size&#x22;,
      &#x22;description&#x22;: &#x22;Visual size of the checkbox control.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'medium'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;large\&#x22; | \&#x22;medium\&#x22; | \&#x22;small\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;autoFocus&#x22;,
      &#x22;description&#x22;: &#x22;Whether the element should receive focus on render.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;id&#x22;,
      &#x22;description&#x22;: &#x22;The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;slot&#x22;,
      &#x22;description&#x22;: &#x22;A slot name for the component. Slots allow the component to receive props from a parent\ncomponent. An explicit `null` value indicates that the local props completely override all\nprops received from a parent.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | null | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-describedby&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that describes the object.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-details&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that provide a detailed, extended description for the\nobject.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-errormessage&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element that provides an error message for the object.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-label&#x22;,
      &#x22;description&#x22;: &#x22;Defines a string value that labels the current element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-labelledby&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that labels the current element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onFocus&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element receives focus.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: React.FocusEvent<Element, Element>) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onBlur&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element loses focus.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: React.FocusEvent<Element, Element>) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onKeyDown&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a key is pressed.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: KeyboardEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onKeyUp&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a key is released.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: KeyboardEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;render&#x22;,
      &#x22;description&#x22;: &#x22;Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;DOMRenderFunction<\&#x22;div\&#x22;, CheckboxFieldRenderProps> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;DOMRenderFunction<\&#x22;div\&#x22;, object>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;validationBehavior&#x22;,
      &#x22;description&#x22;: &#x22;Whether to use native HTML form validation to prevent form submission\nwhen the value is missing or invalid, or mark the field as required\nor invalid via ARIA.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'native'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;native\&#x22; | \&#x22;aria\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;validate&#x22;,
      &#x22;description&#x22;: &#x22;A function that returns an error message if a given value is invalid.\nValidation errors are displayed to the user when the form is submitted\nif `validationBehavior=\&#x22;native\&#x22;`. For realtime validation, use the `isInvalid`\nprop instead.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((value: boolean) => ValidationError | true | null | undefined) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onFocusChange&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element's focus status changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isFocused: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onPress&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the press is released over the target.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: PressEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onPressStart&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a press interaction starts.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: PressEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onPressEnd&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: PressEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onPressChange&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the press state changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isPressed: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onPressUp&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: PressEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;inputRef&#x22;,
      &#x22;description&#x22;: &#x22;A ref for the HTML input element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;React.Ref<HTMLInputElement | null> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`CheckboxProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>

### CheckboxContentProps [#checkboxcontentprops]

<ComponentPropsTable
  id="type-table-checkbox.tsx-CheckboxContentProps"
  type="{
  &#x22;id&#x22;: &#x22;checkbox.tsx-CheckboxContentProps&#x22;,
  &#x22;name&#x22;: &#x22;CheckboxContentProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the Checkbox primitive's clickable content.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;children&#x22;,
      &#x22;description&#x22;: &#x22;The control, indicator, and visible checkbox label.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ChildrenOrFunction<CheckboxButtonRenderProps>&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ChildrenOrFunction<object>&#x22;,
      &#x22;required&#x22;: true,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;slot&#x22;,
      &#x22;description&#x22;: &#x22;A slot name for the component. Slots allow the component to receive props from a parent\ncomponent. An explicit `null` value indicates that the local props completely override all\nprops received from a parent.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | null | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;render&#x22;,
      &#x22;description&#x22;: &#x22;Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;DOMRenderFunction<\&#x22;label\&#x22;, CheckboxButtonRenderProps> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;DOMRenderFunction<\&#x22;label\&#x22;, object>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onHoverStart&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a hover interaction starts.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: HoverEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onHoverEnd&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a hover interaction ends.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: HoverEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onHoverChange&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the hover state changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isHovering: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`CheckboxContentProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>

### CheckboxControlProps [#checkboxcontrolprops]

<ComponentPropsTable
  id="type-table-checkbox.tsx-CheckboxControlProps"
  type="{
  &#x22;id&#x22;: &#x22;checkbox.tsx-CheckboxControlProps&#x22;,
  &#x22;name&#x22;: &#x22;CheckboxControlProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the Checkbox primitive's control wrapper.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`CheckboxControlProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>

### CheckboxIndicatorProps [#checkboxindicatorprops]

<ComponentPropsTable
  id="type-table-checkbox.tsx-CheckboxIndicatorProps"
  type="{
  &#x22;id&#x22;: &#x22;checkbox.tsx-CheckboxIndicatorProps&#x22;,
  &#x22;name&#x22;: &#x22;CheckboxIndicatorProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the Checkbox primitive's visual indicator.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`CheckboxIndicatorProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>