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

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

Checkbox

checkbox message text

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

Status

checked message text un-checked message text error error message success success message indeterminate indeterminate message disabled disabled message checked disabled disabled message

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

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

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

    <cds-checkbox status="success">
        <label>success</label>
        <input type="checkbox" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-checkbox>

    <cds-checkbox>
        <label>indeterminate</label>
        <input type="checkbox" indeterminate />
        <cds-control-message>indeterminate message</cds-control-message>
    </cds-checkbox>

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

    <cds-checkbox>
        <label>checked disabled</label>
        <input type="checkbox" disabled checked />
        <cds-control-message>disabled message</cds-control-message>
    </cds-checkbox>
</cds-form-group>
      

VerticalGroup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

VerticalInlineGroup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HorizontalGroup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HorizontalInlineGroup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CompactGroup

label checkbox 1 checkbox 2 checkbox 3 message test disabled checkbox 1 checkbox 2 checkbox 3 disabled message error checkbox 1 checkbox 2 checkbox 3 error message success checkbox 1 checkbox 2 checkbox 3 success message

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

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

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

        <cds-control-message>message test</cds-control-message>
    </cds-checkbox-group>

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

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

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

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

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

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

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

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

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

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

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

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

DarkTheme

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

       <cds-form-group layout="horizontal-inline" cds-theme="dark">
    <cds-checkbox-group>
        <label>label</label>

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

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

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

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

    <cds-checkbox-group disabled>
        <label>disabled</label>

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

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

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

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

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

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

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

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

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

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

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

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

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

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