> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/checkbox.md).

# Checkbox

Use a checkbox to help people choose between two opposing values that affect the state of content or a view. Pay attention to the label of the checkbox. It should be obvious to the user. 

When you have some checkboxes in one place you can use [Chips](/altrone-ui/components/lists/chips.md) or put them into [CheckboxList](/altrone-ui/components/forms/checkboxlist.md). 

{% hint style="info" %}
Instead of Checkbox you can use [Switcher](/altrone-ui/components/forms/switcher.md). Both of these component have a simular meaning but differ in design. Use whatever you feel best suits your design.
{% endhint %}

```tsx
import { Checkbox } from 'altrone-ui';

const [checked, setChecked] = useState(false);

return <Checkbox 
    checked={checked} 
    onChange={setChecked}
>
    Agree with terms
</Checkbox>
```

## Properties

| Property                                              | Type                       | Description                                       |
| ----------------------------------------------------- | -------------------------- | ------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                | Content of the checkbox                           |
| **`checked`**<mark style="color:red;">**`*`**</mark>  | `boolean`                  | Checked state                                     |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: boolean) => void` | Callback is called when user toggles the checkbox |
| **`disabled`**                                        | `boolean`                  | Marks checkbox as disabled                        |
| **`danger`**                                          | `boolean`                  | Marks checkbox as danger action                   |
| **`CheckIconComponent`**                              | `JSX.Element`              | Custom icon of check icon                         |
| **`errorText`**                                       | `string`                   | Error text of the checkbox                        |
| **`hintText`**                                        | `string`                   | Hint text of the checkbox                         |
| **`className`**                                       | `string`                   | Custom CSS class                                  |

## History

* **`Altrone 2.2`**:
  * added animation for check icon
* **`Altrone 1.0`**: initial release