To use the datalist component import the component in your JavaScript.
import '@cds/core/datalist/register.js';
<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>
<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>
<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>
<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>
<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>