# Checkbox

A checkbox component that can render boolean and intermediate states in multiple visual styles.

## Installation

```tsx
import { Checkbox } from 'uxp/components';
```

## Signature

```tsx
const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<ICheckboxInstanceProps> & ICheckboxProps>
```

## Examples

```tsx
<Checkbox
    checked={checked}
    onChange={(isChecked) => setChecked(isChecked)}
    label='Are you sure'
/>
```

```tsx
<Checkbox
    checked='intermediate'
    onChange={(isChecked) => setChecked(isChecked)}
    label='Partial selection'
    type="switch-box"
/>
```

## Properties

| Name        | Type                                                                                    | Mandatory | Default Value | Example Value |
| ----------- | --------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| checked     | [CheckboxState](https://help.iviva.com/uxp/v5/additional-resources/types/checkboxstate) | Yes       | -             | -             |
| onChange    | (checked: boolean) => void                                                              | Yes       | -             | -             |
| label       | string\| React.ReactNode                                                                | No        | -             | -             |
| isValid     | boolean                                                                                 | No        | -             | -             |
| inputAttr   | { \[key: string]: string \| boolean }                                                   | No        | -             | -             |
| type        | [ICheckboxType](https://help.iviva.com/uxp/v5/additional-resources/types/icheckboxtype) | No        | -             | -             |
| className   | string                                                                                  | No        | -             | -             |
| labelStyles | React.CSSProperties                                                                     | No        | -             | -             |
| tabIndex    | number                                                                                  | No        | -             | -             |
| readonly    | boolean                                                                                 | No        | -             | -             |
| spacingMode | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)     | No        | -             | -             |

## Ref Handlers

Available methods through ref:

| Method | Type       | Description |
| ------ | ---------- | ----------- |
| focus  | () => void | -           |

## Related Types

* [ICheckboxProps](https://help.iviva.com/uxp/v5/additional-resources/types/icheckboxprops)
* [CheckboxState](https://help.iviva.com/uxp/v5/additional-resources/types/checkboxstate)
* [ICheckboxType](https://help.iviva.com/uxp/v5/additional-resources/types/icheckboxtype)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)
* [ICheckboxInstanceProps](https://help.iviva.com/uxp/v5/additional-resources/types/icheckboxinstanceprops)