# Switch

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/switch
*Captured:* 2026-04-27T14:57:23.793Z

Generally, we recommend using a switch when the end user understands the user interface element as a setting that is either “on” or “off”. A checkbox is well suited for when the end user would understand the element as something to be selected.

## Switch

Switch versus checkbox

### Example: Example 1

Switch

Disabled Switch & disabled active Switch

Colored Switch

Switch with label

Label

Switch with label left

Label

Switch with different ON/OFF text

Switch with autoMinWidth (takes the width from the longest text) Lorem

Switch with a longer label and more spacing

Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor

Switch in panels

Switch in alerts

#### React (tsx)

```tsx
import { useState } from 'react';

import Switch from '@rio-cloud/rio-uikit/Switch';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Divider from '@rio-cloud/rio-uikit/Divider';

export default () => {
    const [switchStates, setSwitchStates] = useState<{
        [key: string]: boolean;
    }>({
        switch1: true,
        switch2: true,
        switch3: false,
        switch4: false,
        switch5: false,
        switch6: true,
        switch7: true,
        switch8: true,
        switch9: true,
        switch10: true,
    });

    const handleChange = (key: string) => {
        const newState = !switchStates[key];
        Notification.info(`Checked: ${newState}`);

        setSwitchStates({
            ...switchStates,
            [key]: newState,
        });
    };

    const { switch1, switch2, switch3, switch4, switch5, switch6, switch7, switch8, switch9, switch10 } = switchStates;

    return (
        <div>
            <label>Switch</label>
            <div>
                <Switch onChange={() => handleChange('switch1')} checked={switch1} />
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Disabled Switch & disabled active Switch</label>
            <div className='display-flex'>
                <div className='margin-right-10'>
                    <Switch disabled />
                </div>
                <div>
                    <Switch disabled checked />
                </div>
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Colored Switch</label>
            <div className='display-flex flex-wrap gap-5'>
                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='secondary' />
                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='info' />
                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='success' />
                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='warning' />
                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='danger' />
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch with label</label>
            <div>
                <Switch onChange={() => handleChange('switch3')} checked={switch3} labelPosition='right'>
                    <span>Label</span>
                </Switch>
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch with label left</label>
            <div>
                <Switch onChange={() => handleChange('switch4')} checked={switch4} labelPosition='left'>
                    <span>Label</span>
                </Switch>
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch with different ON/OFF text</label>
            <div>
                <Switch
                    onChange={() => handleChange('switch5')}
                    checked={switch5}
                    enabledText='ON'
                    disabledText='OFF'
                />
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch with autoMinWidth (takes the width from the longest text)</label>
            <div>
                <Switch
                    onChange={() => handleChange('switch6')}
                    checked={switch6}
                    enabledText='ON'
                    disabledText='Lorem'
                    autoMinWidth
                />
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch with a longer label and more spacing</label>
            <div className='display-flex flex-wrap gap-25'>
                <div className='max-width-300'>
                    <Switch
                        onChange={() => handleChange('switch7')}
                        checked={switch7}
                        labelPosition='right'
                        className='gap-10'
                        customTextStyle
                    >
                        <div className='text-size-14 text-color-darker'>
                            <div className='text-medium margin-bottom-5'>Lorem ipsum</div>
                            <div>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                            </div>
                        </div>
                    </Switch>
                </div>
                <div>
                    <Switch
                        onChange={() => handleChange('switch8')}
                        checked={switch8}
                        labelPosition='right'
                        enabledText='Beta'
                    >
                        <span>Lorem ipsum dolor</span>
                    </Switch>
                </div>
            </div>

            <Divider dividerColor='lighter' spacing={25} />

            <label>Switch in panels</label>
            <div className='display-grid grid-cols-3 gap-15'>
                <div className='panel panel-default'>
                    <div className='panel-heading display-flex justify-content-end'>
                        <div>
                            <Switch onChange={() => handleChange('switch6')} checked={switch9} enabledText='Beta' />
                        </div>
                    </div>
                    <div className='panel-body' />
                </div>
                <div className='panel panel-primary'>
                    <div className='panel-heading display-flex justify-content-end'>
                        <div>
                            <Switch onChange={() => handleChange('switch9')} checked={switch9} enabledText='Beta' />
                        </div>
                    </div>
                    <div className='panel-body' />
                </div>
                <div className='panel panel-success'>
                    <div className='panel-heading display-flex justify-content-end'>
                        <div>
                            <Switch
                                onChange={() => handleChange('switch10')}
                                checked={switch10}
                                enabledText='Beta'
                                color='success'
                            />
                        </div>
                    </div>
                    <div className='panel-body' />
                </div>
                <div className='panel panel-warning'>
                    <div className='panel-heading display-flex justify-content-end'>
                        <div>
                            <Switch
                                onChange={() => handleChange('switch10')}
                                checked={switch10}
                                enabledText='Beta'
                                color='warning'
                            />
                        </div>
                    </div>
                    <div className='panel-body' />
                </div>
                <div className='panel panel-danger'>
                    <div className='panel-heading display-flex justify-content-end'>
                        <div>
                            <Switch
                                onChange={() => handleChange('switch10')}
                                checked={switch10}
                                enabledText='Beta'
                                color='danger'
                            />
                        </div>
                    </div>
                    <div className='panel-body' />
                </div>
            </div>
            <label className='margin-top-25'>Switch in alerts</label>
            <div className='display-grid grid-cols-3 gap-15'>
                <div className='alert alert-warning'>
                    <Switch
                        onChange={() => handleChange('switch10')}
                        checked={switch10}
                        enabledText='Beta'
                        color='warning'
                    />
                </div>
                <div className='alert alert-danger'>
                    <Switch
                        onChange={() => handleChange('switch10')}
                        checked={switch10}
                        enabledText='Beta'
                        color='danger'
                    />
                </div>
                <div className='alert alert-info'>
                    <Switch
                        onChange={() => handleChange('switch10')}
                        checked={switch10}
                        enabledText='Beta'
                        color='info'
                    />
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <label>Switch</label>
    <div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Disabled Switch &amp; disabled active Switch</label>
    <div class="display-flex">
        <div class="margin-right-10">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch cursor-not-allowed">
                    <input type="checkbox" class="switch-input" disabled="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                </label>
            </div>
        </div>
        <div>
            <div class="uikit-switch">
                <label class="switch-label uikit-switch cursor-not-allowed">
                    <input type="checkbox" class="switch-input" disabled="" checked="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Colored Switch</label>
    <div class="display-flex flex-wrap gap-5">
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-secondary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-info); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-success); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-warning); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-danger); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch with label</label>
    <div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch label-position-right">
                <input type="checkbox" class="switch-input">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
                <div class="switch-text-wrapper user-select-none padding-top-1">
                    <span>Label</span>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch with label left</label>
    <div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch label-position-left display-inline-flex height-20">
                <input type="checkbox" class="switch-input">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
                <div class="switch-text-wrapper user-select-none padding-top-1">
                    <span>Label</span>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch with different ON/OFF text</label>
    <div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <input type="checkbox" class="switch-input">
                <div class="switch-content" style="color: var(--brand-primary);">
                    <div class="switch-text" data-on="ON" data-off="OFF">
                    </div>
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch with autoMinWidth (takes the width from the longest text)</label>
    <div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch">
                <span class="switch-text-measure" aria-hidden="true">Lorem</span>
                <input type="checkbox" class="switch-input" checked="">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 63px;">
                    <div class="switch-text" data-on="ON" data-off="Lorem">
                    </div>
                    <div class="switch-handle">
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch with a longer label and more spacing</label>
    <div class="display-flex flex-wrap gap-25">
        <div class="max-width-300">
            <div class="uikit-switch gap-10">
                <label class="switch-label uikit-switch gap-10 label-position-right">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                    <div class="switch-text-wrapper user-select-none">
                        <div class="text-size-14 text-color-darker">
                            <div class="text-medium margin-bottom-5">Lorem ipsum</div>
                            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                        </div>
                    </div>
                </label>
            </div>
        </div>
        <div>
            <div class="uikit-switch">
                <label class="switch-label uikit-switch label-position-right">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-primary);">
                        <div class="switch-text" data-on="Beta" data-off="Beta">
                        </div>
                        <div class="switch-handle">
                        </div>
                    </div>
                    <div class="switch-text-wrapper user-select-none padding-top-1">
                        <span>Lorem ipsum dolor</span>
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Switch in panels</label>
    <div class="display-grid grid-cols-3 gap-15">
        <div class="panel panel-default">
            <div class="panel-heading display-flex justify-content-end">
                <div>
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input" checked="">
                            <div class="switch-content" style="color: var(--brand-primary);">
                                <div class="switch-text" data-on="Beta" data-off="Beta">
                                </div>
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body">
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading display-flex justify-content-end">
                <div>
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input" checked="">
                            <div class="switch-content" style="color: var(--brand-primary);">
                                <div class="switch-text" data-on="Beta" data-off="Beta">
                                </div>
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body">
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading display-flex justify-content-end">
                <div>
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input" checked="">
                            <div class="switch-content" style="color: var(--brand-success);">
                                <div class="switch-text" data-on="Beta" data-off="Beta">
                                </div>
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body">
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading display-flex justify-content-end">
                <div>
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input" checked="">
                            <div class="switch-content" style="color: var(--brand-warning);">
                                <div class="switch-text" data-on="Beta" data-off="Beta">
                                </div>
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body">
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading display-flex justify-content-end">
                <div>
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input" checked="">
                            <div class="switch-content" style="color: var(--brand-danger);">
                                <div class="switch-text" data-on="Beta" data-off="Beta">
                                </div>
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <label class="margin-top-25">Switch in alerts</label>
    <div class="display-grid grid-cols-3 gap-15">
        <div class="alert alert-warning">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-warning);">
                        <div class="switch-text" data-on="Beta" data-off="Beta">
                        </div>
                        <div class="switch-handle">
                        </div>
                    </div>
                </label>
            </div>
        </div>
        <div class="alert alert-danger">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-danger);">
                        <div class="switch-text" data-on="Beta" data-off="Beta">
                        </div>
                        <div class="switch-handle">
                        </div>
                    </div>
                </label>
            </div>
        </div>
        <div class="alert alert-info">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-info);">
                        <div class="switch-text" data-on="Beta" data-off="Beta">
                        </div>
                        <div class="switch-handle">
                        </div>
                    </div>
                </label>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| keyName | string | — | Optional key that is used as key and as the id on the internal input. |
| onChange | (toggleState: boolean) => void | — | Callback function triggered when clicking the button. |
| checked | boolean | false | Set active / inactive state. |
| color | string | 'primary' | Defines the color of the switch. Possible values are: 'primary' 'secondary' 'info' 'success' 'warning' 'danger' |
| minWidth | number | — | The min-width of the switch. If not set, the default min-width is 40. |
| autoMinWidth | boolean | false | Controls automatic text-based min-width behavior when minWidth is not set. Set to true to keep the width at the longer one of enabledText and disabledText. |
| disabled | boolean | false | Disables the component. |
| enabledText | string | — | The text used for the ON state. |
| disabledText | string | — | The text used for the OFF state. |
| labelPosition | 'left' \| 'right' | 'right' | Defines the position of the switch label. Defaults to 'right' when children are present. Possible values are 'left' and 'right'. |
| customTextStyle | boolean | false | Use this flag if you want to have custom text styles. |
| className | string | — | Additional class names added to the SVG element. |