### Basic Switcher:

```jsx
initialState = { value: true };
const handleChange = (value) => {
  setState({ value });
};

<Switcher
  id="switcher_example"
  name="switcher_example"
  value={state.value}
  onChange={handleChange}
/>;
```

### Switcher with label and hint:

```jsx
initialState = { value: true };
const handleChange = (value, event) => {
  setState({ [event.target.name]: value });
};

<div>
  <Switcher
    id="switcher1"
    name="switcher1"
    value={state.switcher1}
    onChange={handleChange}
    hint="Some text about what this switcher do"
  >
    Switcher label
  </Switcher>
  <Switcher
    id="switcher2"
    name="switcher2"
    value={state.switcher2}
    onChange={handleChange}
  >
    Switcher label
  </Switcher>
  <Switcher
    id="switcher3"
    name="switcher3"
    value={state.switcher3}
    onChange={handleChange}
    hint="Some text about what this switcher do"
  >
    Switcher label
  </Switcher>
</div>;
```

### Disabled Switcher:

```jsx
initialState = { value: true };
const handleChange = (value) => {
  setState({ value });
};

<Switcher
  disabled
  id="switcher_disabled"
  name="switcher_disabled"
  value={state.value}
  onChange={handleChange}
  hint="It's disabled!"
>
  Oh, no!
</Switcher>;
```

### Sizes:

```jsx
initialState = { value: false };
const handleChange = (value) => {
  setState({ value });
};

<>
  <Switcher
    id="switcher_small"
    name="switcher_small"
    value={state.value}
    onChange={handleChange}
    hint="Look, how tiny is it!"
    size="small"
  >
    Small switcher
  </Switcher>
  <Switcher
    id="switcher_normal"
    name="switcher_normal"
    value={state.value}
    onChange={handleChange}
    hint="Pfff, nothing special"
  >
    Normal switcher
  </Switcher>
  <Switcher
    id="switcher_large"
    name="switcher_large"
    value={state.value}
    onChange={handleChange}
    hint="Wow! (what noone woman will ever tell you)"
    size="large"
  >
    Large switcher
  </Switcher>
</>;
```

### Intents:

```jsx
initialState = {
  value: true,
};
const handleChange = (value) => {
  setState({ value });
};

<>
  <Switcher
    id="switcher_default"
    name="switcher_default"
    intent="default"
    value={state.value}
    onChange={handleChange}
  >
    Default intent switcher
  </Switcher>
  <Switcher
    id="switcher_primary"
    name="switcher_primary"
    intent="primary"
    label=""
    value={state.value}
    onChange={handleChange}
  >
    Primary intent switcher
  </Switcher>
  <Switcher
    id="switcher_info"
    name="switcher_info"
    intent="info"
    value={state.value}
    onChange={handleChange}
  >
    Info intent switcher
  </Switcher>
  <Switcher
    id="switcher_success"
    name="switcher_success"
    intent="success"
    value={state.value}
    onChange={handleChange}
  >
    Success intent switcher
  </Switcher>
  <Switcher
    id="switcher_warning"
    name="switcher_warning"
    intent="warning"
    value={state.value}
    onChange={handleChange}
  >
    Warning intent switcher
  </Switcher>
  <Switcher
    id="switcher_danger"
    name="switcher_danger"
    intent="danger"
    value={state.value}
    onChange={handleChange}
  >
    Danger intent switcher
  </Switcher>
</>;
```