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

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

Search

search

       <cds-search control-width="shrink">
    <label>search</label>
    <input type="search" />
</cds-search>
      

Vertical

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

       <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>
      

Horizontal

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

       <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>
      

Compact

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

       <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>
      

Datalist

search

       <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>
      

DarkTheme

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

       <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>