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

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

Control

label message text label error message label success message

       <div cds-layout="vertical gap:lg">
    <cds-control layout="vertical">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message>message text</cds-control-message>
    </cds-control>

    <cds-control layout="vertical" status="error">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-control>

    <cds-control layout="vertical" status="success">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-control>
</div>
      

ControlHorizontal

label message text label error message label success message

       <div cds-layout="vertical gap:lg">
    <cds-control layout="horizontal">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message>message text</cds-control-message>
    </cds-control>

    <cds-control layout="horizontal" status="error">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-control>

    <cds-control layout="horizontal" status="success">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-control>
</div>
      

ControlCompact

label message text label error message label success message

       <div cds-layout="vertical gap:lg">
    <cds-control layout="compact">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message>message text</cds-control-message>
    </cds-control>

    <cds-control layout="compact" status="error">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-control>

    <cds-control layout="compact" status="success">
        <label>label</label>
        <input placeholder="some custom control" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-control>
</div>