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

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

Datalist

datalist

       <cds-datalist control-width="shrink">
    <label>datalist</label>
    <input placeholder="placeholder text" />
    <datalist>
        <option value="Item 1"></option>
        <option value="Item 2"></option>
        <option value="Item 3"></option>
    </datalist>
</cds-datalist>
      

Vertical

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

       <cds-form-group layout="vertical">
    <cds-datalist layuut="vertical">
        <label>label</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>message text</cds-control-message>
    </cds-datalist>

    <cds-datalist>
        <label>disabled</label>
        <input placeholder="name" disabled />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>disabled message</cds-control-message>
    </cds-datalist>

    <cds-datalist status="error">
        <label>error status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-datalist>

    <cds-datalist status="success">
        <label>success status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-datalist>
</cds-form-group>
      

Horizontal

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

       <cds-form-group layout="horizontal">
    <cds-datalist layout="horizontal">
        <label>label</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>message text</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal">
        <label>disabled</label>
        <input placeholder="name" disabled />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>disabled message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal" status="error">
        <label>error status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal" status="success">
        <label>success status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-datalist>
</cds-form-group>
      

Compact

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

       <cds-form-group layout="compact">
    <cds-datalist layout="compact">
        <label>label</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>message text</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="compact">
        <label>disabled</label>
        <input placeholder="name" disabled />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>disabled message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="compact" status="error">
        <label>error status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="compact" status="success">
        <label>success status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-datalist>
</cds-form-group>
      

DarkTheme

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

       <cds-form-group layout="horizontal" cds-theme="dark">
    <cds-datalist layout="horizontal">
        <label>label</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>message text</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal">
        <label>disabled</label>
        <input placeholder="name" disabled />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message>disabled message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal" status="error">
        <label>error status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-datalist>

    <cds-datalist layout="horizontal" status="success">
        <label>success status</label>
        <input placeholder="name" />
        <datalist>
            <option value="Item 1"></option>
            <option value="Item 2"></option>
            <option value="Item 3"></option>
        </datalist>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-datalist>
</cds-form-group>