To use the search component import the component in your JavaScript.
import '@cds/core/search/register.js';
<cds-search control-width="shrink"> <label>search</label> <input type="search" /> </cds-search>
<cds-form-group layout="vertical"> <cds-search> <label>label</label> <input type="search" /> <cds-control-message>message text</cds-control-message> </cds-search> <cds-search> <label>disabled</label> <input type="search" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-search> <cds-search status="error"> <label>error</label> <input type="search" /> <cds-control-message status="error">error message</cds-control-message> </cds-search> <cds-search status="success"> <label>success</label> <input type="search" /> <cds-control-message status="success">success message</cds-control-message> </cds-search> </cds-form-group>
<cds-form-group layout="horizontal"> <cds-search layout="horizontal"> <label>label</label> <input type="search" /> <cds-control-message>message text</cds-control-message> </cds-search> <cds-search layout="horizontal"> <label>disabled</label> <input type="search" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-search> <cds-search layout="horizontal" status="error"> <label>error</label> <input type="search" /> <cds-control-message status="error">error message</cds-control-message> </cds-search> <cds-search layout="horizontal" status="success"> <label>success</label> <input type="search" /> <cds-control-message status="success">success message</cds-control-message> </cds-search> </cds-form-group>
<cds-form-group layout="compact"> <cds-search layout="compact"> <label>label</label> <input type="search" /> <cds-control-message>message text</cds-control-message> </cds-search> <cds-search layout="compact"> <label>disabled</label> <input type="search" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-search> <cds-search layout="compact" status="error"> <label>error</label> <input type="search" /> <cds-control-message status="error">error message</cds-control-message> </cds-search> <cds-search layout="compact" status="success"> <label>success</label> <input type="search" /> <cds-control-message status="success">success message</cds-control-message> </cds-search> </cds-form-group>
<cds-search> <label>search</label> <input type="search" /> <datalist> <option value="Item 1"></option> <option value="Item 2"></option> <option value="Item 3"></option> </datalist> </cds-search>
<cds-form-group layout="horizontal" cds-theme="dark"> <cds-search layout="horizontal"> <label>label</label> <input type="search" /> <cds-control-message>message text</cds-control-message> </cds-search> <cds-search layout="horizontal"> <label>disabled</label> <input type="search" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-search> <cds-search layout="horizontal" status="error"> <label>error</label> <input type="search" /> <cds-control-message status="error">error message</cds-control-message> </cds-search> <cds-search layout="horizontal" status="success"> <label>success</label> <input type="search" /> <cds-control-message status="success">success message</cds-control-message> </cds-search> </cds-form-group>