> 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/switcher.md).

# Switcher

Switcher is a variant of [Checkbox](/altrone-ui/components/forms/checkbox.md) which has been separated into a separate component. Pay attention to the label of the Switcher. It should be obvious to the user. 

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

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

return <Switcher checked={checked} onChange={setChecked}>Enable</Switcher>
```

{% embed url="<https://apcom52.github.io/altrone-ui/?path=/story/forms--switcher-example>" %}
Switcher Demo
{% endembed %}

## 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                   |
| **`align`**                                           | [`Align`](/altrone-ui/utils/enums/align.md) | Alignment of the switcher                         |
| **`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`**:
  * updated design
* **`Altrone 1.0`**: initial release