# Checkbox

URL: https://ark-ui.com/docs/components/checkbox
LLM: https://ark-ui.com/llms.txt/components/checkbox

A control element that allows for multiple selections within a set.

---



## Anatomy



```tsx
<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label />
  <Checkbox.HiddenInput />
</Checkbox.Root>
```

## Examples

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const Basic = () => (
  <Checkbox.Root className={styles.Root}>
    <Checkbox.Control className={styles.Control}>
      <Checkbox.Indicator className={styles.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
)
```

### Default Checked

Use the `defaultChecked` prop to set the initial checked state in an uncontrolled manner. The checkbox will manage its
own state internally.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const DefaultChecked = () => (
  <Checkbox.Root className={styles.Root} defaultChecked>
    <Checkbox.Control className={styles.Control}>
      <Checkbox.Indicator className={styles.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
)
```

### Controlled

Use the `checked` and `onCheckedChange` props to programatically control the checkbox's state.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/checkbox.module.css'

export const Controlled = () => {
  const [checked, setChecked] = useState<Checkbox.CheckedState>(true)

  return (
    <Checkbox.Root className={styles.Root} checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
      <Checkbox.Control className={styles.Control}>
        <Checkbox.Indicator className={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}
```

### Root Provider

An alternative way to control the checkbox is to use the `RootProvider` component and the `useCheckbox` hook. This way
you can access the state and methods from outside the component.

```tsx
import { Checkbox, useCheckbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'
import button from 'styles/button.module.css'

export const RootProvider = () => {
  const checkbox = useCheckbox()

  return (
    <div className="vstack">
      <Checkbox.RootProvider className={styles.Root} value={checkbox}>
        <Checkbox.Control className={styles.Control}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.RootProvider>

      {checkbox.checked ? (
        <button type="button" onClick={() => checkbox.setChecked(false)} className={button.Root}>
          Uncheck
        </button>
      ) : (
        <button type="button" onClick={() => checkbox.setChecked(true)} className={button.Root}>
          Check
        </button>
      )}
    </div>
  )
}
```

### Disabled

Use the `disabled` prop to make the checkbox non-interactive.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const Disabled = () => (
  <Checkbox.Root className={styles.Root} disabled>
    <Checkbox.Control className={styles.Control}>
      <Checkbox.Indicator className={styles.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
)
```

### Indeterminate

Use the `indeterminate` prop to create a checkbox in an indeterminate state (partially checked).

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const Indeterminate = () => (
  <Checkbox.Root className={styles.Root} checked="indeterminate">
    <Checkbox.Control className={styles.Control}>
      <Checkbox.Indicator className={styles.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
      <Checkbox.Indicator className={styles.Indicator} indeterminate>
        <MinusIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label className={styles.Label}>Checkbox</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
)
```

### Field

The checkbox integrates smoothly with the `Field` component to handle form state, helper text, and error text for proper
accessibility.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { Field } from '@ark-ui/react/field'
import { CheckIcon, MinusIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'
import field from 'styles/field.module.css'

export const WithField = () => (
  <Field.Root className={field.Root} data-inline>
    <Checkbox.Root className={styles.Root}>
      <Checkbox.Control className={styles.Control}>
        <Checkbox.Indicator className={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
        <Checkbox.Indicator className={styles.Indicator} indeterminate>
          <MinusIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label className={styles.Label}>Label</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Field.HelperText className={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Form

Pass the `name` and `value` props to the `Checkbox.Root` component to make the checkbox part of a form. The checkbox's
value will be submitted with the form when the user submits it.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'
import button from 'styles/button.module.css'

export const WithForm = () => (
  <form
    style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}
    onSubmit={(e) => {
      e.preventDefault()
      const formData = new FormData(e.currentTarget)
      console.log('terms:', formData.get('terms'))
    }}
  >
    <Checkbox.Root className={styles.Root} name="terms" value="accepted">
      <Checkbox.Control className={styles.Control}>
        <Checkbox.Indicator className={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label className={styles.Label}>I agree to the terms and conditions</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <button className={button.Root} data-variant="solid" type="submit">
      Submit
    </button>
  </form>
)
```

### Context

Access the checkbox's state and methods with `Checkbox.Context` or the `useCheckboxContext` hook.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const Context = () => (
  <Checkbox.Root className={styles.Root}>
    <Checkbox.Control className={styles.Control}>
      <Checkbox.Indicator className={styles.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Context>
      {(checkbox) => <Checkbox.Label className={styles.Label}>Checked: {String(checkbox.checked)}</Checkbox.Label>}
    </Checkbox.Context>
    <Checkbox.HiddenInput />
  </Checkbox.Root>
)
```

## Checkbox Group

Use the `Checkbox.Group` component to manage a group of checkboxes. The `Checkbox.Group` component manages the state of
the checkboxes and provides a way to access the checked values.

```tsx
<Checkbox.Group>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator />
    </Checkbox.Control>
    <Checkbox.Label />
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</Checkbox.Group>
```

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const Group = () => (
  <Checkbox.Group className={styles.Group} defaultValue={['react']} name="framework">
    {items.map((item) => (
      <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
        <Checkbox.Control className={styles.Control}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    ))}
  </Checkbox.Group>
)

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Controlled

Use the `value` and `onValueChange` props to programmatically control the checkbox group's state. This example
demonstrates how to manage selected checkboxes in an array and display the current selection.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/checkbox.module.css'

export const GroupControlled = () => {
  const [value, setValue] = useState(['react'])
  return (
    <div className="vstack">
      <output>value: {JSON.stringify(value)}</output>
      <Checkbox.Group className={styles.Group} value={value} name="framework" onValueChange={setValue}>
        {items.map((item) => (
          <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
            <Checkbox.Control className={styles.Control}>
              <Checkbox.Indicator className={styles.Indicator}>
                <CheckIcon />
              </Checkbox.Indicator>
            </Checkbox.Control>
            <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
            <Checkbox.HiddenInput />
          </Checkbox.Root>
        ))}
      </Checkbox.Group>
    </div>
  )
}

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Root Provider

Use the `useCheckboxGroup` hook to create the checkbox group store and pass it to the `Checkbox.GroupProvider`
component. This provides maximum control over the group programmatically, similar to how `RootProvider` works for
individual checkboxes.

```tsx
import { Checkbox, useCheckboxGroup } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const GroupProvider = () => {
  const group = useCheckboxGroup({
    defaultValue: ['react'],
    name: 'framework',
  })

  return (
    <Checkbox.GroupProvider className={styles.Group} value={group}>
      {items.map((item) => (
        <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
          <Checkbox.Control className={styles.Control}>
            <Checkbox.Indicator className={styles.Indicator}>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
      ))}
    </Checkbox.GroupProvider>
  )
}

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Invalid

Use the `invalid` prop on `Checkbox.Group` to mark the entire group as invalid for validation purposes. This applies the
invalid state to all checkboxes within the group.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const GroupWithInvalid = () => (
  <Checkbox.Group className={styles.Group} invalid>
    {items.map((item) => (
      <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
        <Checkbox.Control className={styles.Control}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    ))}
  </Checkbox.Group>
)

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Max Selected

Use the `maxSelectedValues` prop to limit the number of checkboxes that can be selected at once. Once the maximum is
reached, remaining checkboxes become disabled.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'

export const GroupWithMaxSelected = () => (
  <Checkbox.Group className={styles.Group} defaultValue={['react']} maxSelectedValues={2} name="framework">
    {items.map((item) => (
      <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
        <Checkbox.Control className={styles.Control}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    ))}
  </Checkbox.Group>
)

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
  { label: 'Svelte', value: 'svelte' },
]
```

### Select All

Implement a "select all" checkbox that controls all checkboxes within a group. The parent checkbox automatically shows
an indeterminate state when some (but not all) items are selected, and becomes fully checked when all items are
selected.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/checkbox.module.css'

const CheckboxItem = (props: Checkbox.RootProps) => {
  return (
    <Checkbox.Root className={styles.Root} {...props}>
      <Checkbox.Control className={styles.Control}>
        <Checkbox.Indicator className={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
        <Checkbox.Indicator className={styles.Indicator} indeterminate>
          <MinusIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label className={styles.Label}>{props.children}</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  )
}

export const GroupWithSelectAll = () => {
  const [value, setValue] = useState<string[]>([])

  const handleSelectAll = (checked: boolean) => {
    setValue(checked ? items.map((item) => item.value) : [])
  }

  const allSelected = value.length === items.length
  const indeterminate = value.length > 0 && value.length < items.length

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <output>Selected: {JSON.stringify(value)}</output>

      <CheckboxItem
        value="all"
        checked={indeterminate ? 'indeterminate' : allSelected}
        onCheckedChange={(e) => handleSelectAll(!!e.checked)}
      >
        JSX Frameworks
      </CheckboxItem>

      <Checkbox.Group
        className={styles.Group}
        style={{ marginInlineStart: '1rem' }}
        value={value}
        name="framework"
        onValueChange={setValue}
      >
        {items.map((item) => (
          <CheckboxItem value={item.value} key={item.value}>
            {item.label}
          </CheckboxItem>
        ))}
      </Checkbox.Group>
    </div>
  )
}

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Form

Use the `Checkbox.Group` component within a form to handle multiple checkbox values with form submission. The `name`
prop ensures all selected values are collected as an array when the form is submitted using `FormData.getAll()`.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'
import button from 'styles/button.module.css'

export const GroupWithForm = () => (
  <form
    className="vstack"
    onSubmit={(e) => {
      e.preventDefault()
      console.log(new FormData(e.currentTarget).getAll('framework'))
    }}
  >
    <Checkbox.Group className={styles.Group} defaultValue={['react']} name="framework">
      {items.map((item) => (
        <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
          <Checkbox.Control className={styles.Control}>
            <Checkbox.Indicator className={styles.Indicator}>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
      ))}
    </Checkbox.Group>
    <button className={button.Root} type="submit">
      Submit
    </button>
  </form>
)

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

### Fieldset

Use the `Fieldset` component with `Checkbox.Group` to provide semantic grouping with legend, helper text, and error text
support.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { Fieldset } from '@ark-ui/react/fieldset'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/checkbox.module.css'
import fieldset from 'styles/fieldset.module.css'

export const GroupWithFieldset = () => (
  <Fieldset.Root className={fieldset.Root}>
    <Fieldset.Legend className={fieldset.Legend}>Select frameworks</Fieldset.Legend>
    <Fieldset.HelperText className={fieldset.HelperText}>Choose your preferred frameworks</Fieldset.HelperText>
    <Checkbox.Group className={styles.Group} defaultValue={['react']} name="framework">
      {items.map((item) => (
        <Checkbox.Root className={styles.Root} value={item.value} key={item.value}>
          <Checkbox.Control className={styles.Control}>
            <Checkbox.Indicator className={styles.Indicator}>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.Label className={styles.Label}>{item.label}</Checkbox.Label>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
      ))}
    </Checkbox.Group>
  </Fieldset.Root>
)

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
]
```

## Guides

### asChild Behavior

The `Checkbox.Root` element of the checkbox is a `label` element. This is because the checkbox is a form control and
should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility
structure will be invalid.

> If you need to use the `asChild` property, make sure that the `label` element is the direct child of the
> `Checkbox.Root` component.

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`checked`**
Type: `CheckedState`
Required: false
Default Value: `undefined`
Description: The controlled checked state of the checkbox

**`defaultChecked`**
Type: `CheckedState`
Required: false
Default Value: `undefined`
Description: The initial checked state of the checkbox when rendered.
Use when you don't need to control the checked state of the checkbox.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the checkbox is disabled

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The id of the form that the checkbox belongs to.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ root: string; hiddenInput: string; control: string; label: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the checkbox. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the checkbox is invalid

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the input field in a checkbox.
Useful for form submission.

**`onCheckedChange`**
Type: `(details: CheckedChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: The callback invoked when the checked state changes.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the checkbox is read-only

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the checkbox is required

**`value`**
Type: `string`
Required: false
Default Value: `"on"`
Description: The value of checkbox input. Useful for form submission.

#### Data Attributes

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "indeterminate" | "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "indeterminate" | "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### Group

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultValue`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The initial value of `value` when uncontrolled

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the checkbox group is disabled

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the checkbox group is invalid

**`maxSelectedValues`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The maximum number of selected values

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the input fields in the checkbox group
(Useful for form submission).

**`onValueChange`**
Type: `(value: string[]) => void`
Required: false
Default Value: `undefined`
Description: The callback to call when the value changes

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the checkbox group is read-only

**`value`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The controlled value of the checkbox group

### GroupProvider

#### Props

**`value`**
Type: `UseCheckboxGroupContext`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### HiddenInput

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Indicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`indeterminate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "indeterminate" | "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "indeterminate" | "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### RootProvider

#### Props

**`value`**
Type: `UseCheckboxReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `checked` | `boolean` | Whether the checkbox is checked |
| `disabled` | `boolean | undefined` | Whether the checkbox is disabled |
| `indeterminate` | `boolean` | Whether the checkbox is indeterminate |
| `focused` | `boolean | undefined` | Whether the checkbox is focused |
| `checkedState` | `CheckedState` | The checked state of the checkbox |
| `setChecked` | `(checked: CheckedState) => void` | Function to set the checked state of the checkbox |
| `toggleChecked` | `VoidFunction` | Function to toggle the checked state of the checkbox |


## Accessibility

Complies with the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).

### Keyboard Support

**`Space`**
Description: Toggle the checkbox