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

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

Time

time message text

       <cds-time control-width="shrink">
    <label>time</label>
    <input type="time" min="09:00" max="18:00" value="11:00" />
    <cds-control-message>message text</cds-control-message>
</cds-time>
      

Vertical

label message text disabled disabled message error error message success success message

       <cds-form-group layout="vertical">
    <cds-time layout="vertical">
        <label>label</label>
        <input type="time" />
        <cds-control-message>message text</cds-control-message>
    </cds-time>

    <cds-time layout="vertical">
        <label>disabled</label>
        <input type="time" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-time>

    <cds-time layout="vertical" status="error">
        <label>error</label>
        <input type="time" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-time>

    <cds-time layout="vertical" status="success">
        <label>success</label>
        <input type="time" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-time>
</cds-form-group>
      

Horizontal

label message text disabled disabled message error error message success success message

       <cds-form-group layout="horizontal">
    <cds-time layout="horizontal">
        <label>label</label>
        <input type="time" />
        <cds-control-message>message text</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal">
        <label>disabled</label>
        <input type="time" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal" status="error">
        <label>error</label>
        <input type="time" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal" status="success">
        <label>success</label>
        <input type="time" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-time>
</cds-form-group>
      

Compact

label message text disabled disabled message error error message success success message

       <cds-form-group layout="compact">
    <cds-time layout="compact">
        <label>label</label>
        <input type="time" />
        <cds-control-message>message text</cds-control-message>
    </cds-time>

    <cds-time layout="compact">
        <label>disabled</label>
        <input type="time" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-time>

    <cds-time layout="compact" status="error">
        <label>error</label>
        <input type="time" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-time>

    <cds-time layout="compact" status="success">
        <label>success</label>
        <input type="time" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-time>
</cds-form-group>
      

TimeDatalist

time with datalist message text

       <cds-time>
    <label>time with datalist</label>
    <input type="time" value="11:00" />
    <datalist>
        <option value="11:00"></option>
        <option value="12:00"></option>
        <option value="13:00"></option>
    </datalist>
    <cds-control-message>message text</cds-control-message>
</cds-time>
      

DarkTheme

label message text disabled disabled message error error message success success message

       <cds-form-group layout="horizontal" cds-theme="dark">
    <cds-time layout="horizontal">
        <label>label</label>
        <input type="time" />
        <cds-control-message>message text</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal">
        <label>disabled</label>
        <input type="time" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal" status="error">
        <label>error</label>
        <input type="time" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-time>

    <cds-time layout="horizontal" status="success">
        <label>success</label>
        <input type="time" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-time>
</cds-form-group>