# Core/Checkbox - Usage

Checkbox component for capturing boolean user input. Supports controlled and uncontrolled modes with proper accessibility.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `indeterminate` | `boolean` | No | `--` | Whether the checkbox is in an indeterminate state. |
| `checked` | `boolean` | No | `--` | Controlled checked state. Use with onChange for controlled component. |
| `defaultChecked` | `boolean` | No | `--` | Default checked state for uncontrolled component. |
| `children` | `string \| React.ReactNode` | No | `--` | The label for the checkbox. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

## Integration Notes

### Ant Design Form Compatibility

When using Checkbox inside an Ant Design `<Form>` component, the focus ring may appear incorrectly due to Ant Design's global CSS:

```css
.ant-form input[type='checkbox']:focus {
  outline-offset: -2px;
}
```

Capra's Checkbox includes `!important` on its focus styles to override this, but if you encounter issues, add a local override where you're using this component:

```css
.checkbox {
  input[type='checkbox']:focus,
  input[type='checkbox']:focus-visible {
    outline-offset: 2px !important;
  }
}
```