To use the toggle component import the component in your JavaScript.

import '@cds/core/toggle/register.js';

Toggle

toggle message text

       <cds-toggle>
    <label>toggle</label>
    <input type="checkbox" checked />
    <cds-control-message>message text</cds-control-message>
</cds-toggle>
      

Status

toggle message text disabled disabled text checked disabled disabled text error error text success success text

       <div cds-layout="vertical gap:lg">
    <cds-toggle>
        <label>toggle</label>
        <input type="checkbox" checked />
        <cds-control-message>message text</cds-control-message>
    </cds-toggle>

    <cds-toggle>
        <label>disabled</label>
        <input type="checkbox" disabled />
        <cds-control-message>disabled text</cds-control-message>
    </cds-toggle>

    <cds-toggle>
        <label>checked disabled</label>
        <input type="checkbox" disabled checked />
        <cds-control-message>disabled text</cds-control-message>
    </cds-toggle>

    <cds-toggle status="error">
        <label>error</label>
        <input type="checkbox" />
        <cds-control-message status="error">error text</cds-control-message>
    </cds-toggle>

    <cds-toggle status="success">
        <label>success</label>
        <input type="checkbox" checked />
        <cds-control-message status="success">success text</cds-control-message>
    </cds-toggle>
</div>
      

VerticalGroup

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 message text error toggle 1 toggle 2 toggle 3 message text success toggle 1 toggle 2 toggle 3 message text

       <cds-form-group layout="vertical">
    <cds-toggle-group>
        <label>label</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <!-- disable all controls within group or set disabled on input individually -->
    <cds-toggle-group disabled>
        <label>disabled</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group status="error">
        <label>error</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group status="success">
        <label>success</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">message text</cds-control-message>
    </cds-toggle-group>
</cds-form-group>
      

VerticalInlineGroup

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 disabled message error toggle 1 toggle 2 toggle 3 error message success toggle 1 toggle 2 toggle 3 success message

       <cds-form-group layout="vertical-inline">
    <cds-toggle-group layout="vertical-inline">
        <label>label</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="vertical-inline" disabled>
        <label>disabled</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>disabled message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="vertical-inline" status="error">
        <label>error</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">error message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="vertical-inline" status="success">
        <label>success</label>

        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">success message</cds-control-message>
    </cds-toggle-group>
</cds-form-group>
      

HorizontalGroup

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 disabled message error toggle 1 toggle 2 toggle 3 error message success toggle 1 toggle 2 toggle 3 success message

       <cds-form-group layout="horizontal">
    <cds-toggle-group layout="horizontal">
        <label>label</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal" disabled>
        <label>disabled</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>disabled message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal" status="error">
        <label>error</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">error message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal" status="success">
        <label>success</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">success message</cds-control-message>
    </cds-toggle-group>
</cds-form-group>
      

HorizontalInlineGroup

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 disabled message error toggle 1 toggle 2 toggle 3 error message success toggle 1 toggle 2 toggle 3 success message

       <cds-form-group layout="horizontal-inline">
    <cds-toggle-group layout="horizontal-inline">
        <label>label</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" disabled>
        <label>disabled</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>disabled message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" status="error">
        <label>error</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">error message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" status="success">
        <label>success</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">success message</cds-control-message>
    </cds-toggle-group>
</cds-form-group>
      

CompactGroup

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 disabled message error toggle 1 toggle 2 toggle 3 error message success toggle 1 toggle 2 toggle 3 success message

       <cds-form-group layout="compact">
    <cds-toggle-group layout="compact">
        <label>label</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="compact" disabled>
        <label>disabled</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>disabled message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="compact" status="error">
        <label>error</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">error message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="compact" status="success">
        <label>success</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">success message</cds-control-message>
    </cds-toggle-group>
</cds-form-group>
      

ToggleAlign

left right Group Left toggle 1 toggle 2 Group Right toggle 1 toggle 2

       <div cds-layout="vertical gap:lg">
    <cds-toggle>
        <label>left</label>
        <input type="checkbox" checked />
    </cds-toggle>

    <cds-toggle control-align="right">
        <label>right</label>
        <input type="checkbox" checked />
    </cds-toggle>

    <cds-toggle-group>
        <label>Group Left</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>
    </cds-toggle-group>

    <cds-toggle-group control-align="right">
        <label>Group Right</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>
    </cds-toggle-group>
</div>
      

DarkTheme

label toggle 1 toggle 2 toggle 3 message text disabled toggle 1 toggle 2 toggle 3 disabled message error toggle 1 toggle 2 toggle 3 error message success toggle 1 toggle 2 toggle 3 success message

       <cds-form-group layout="horizontal-inline" cds-theme="dark">
    <cds-toggle-group layout="horizontal-inline">
        <label>label</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>message text</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" disabled>
        <label>disabled</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message>disabled message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" status="error">
        <label>error</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="error">error message</cds-control-message>
    </cds-toggle-group>

    <cds-toggle-group layout="horizontal-inline" status="success">
        <label>success</label>
        <cds-toggle>
            <label>toggle 1</label>
            <input type="checkbox" checked />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 2</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-toggle>
            <label>toggle 3</label>
            <input type="checkbox" />
        </cds-toggle>

        <cds-control-message status="success">success message</cds-control-message>
    </cds-toggle-group>
</cds-form-group>