To use the control component import the component in your JavaScript.
Control
<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
<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
<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>