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

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

Select

textarea Option One Option Two Option Three message text

       <cds-select control-width="shrink">
    <label>textarea</label>
    <select>
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </select>
    <cds-control-message>message text</cds-control-message>
</cds-select>
      

Vertical

label option one option two option three message text disabled option one option two option three disabled message error option one option two option three error message success option one option two option three success message

       <cds-form-group layout="vertical">
    <cds-select layout="vertical">
        <label>label</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>message text</cds-control-message>
    </cds-select>

    <cds-select layout="vertical">
        <label>disabled</label>
        <select disabled>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>disabled message</cds-control-message>
    </cds-select>

    <cds-select layout="vertical" status="error">
        <label>error</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-select>

    <cds-select layout="vertical" status="success">
        <label>success</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-select>
</cds-form-group>
      

Horizontal

label option one option two option three message text disabled option one option two option three disabled message error option one option two option three error message success option one option two option three success message

       <cds-form-group layout="horizontal">
    <cds-select layout="horizontal">
        <label>label</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>message text</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal">
        <label>disabled</label>
        <select disabled>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>disabled message</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal" status="error">
        <label>error</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal" status="success">
        <label>success</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-select>
</cds-form-group>
      

Compact

label option one option two option three message text disabled option one option two option three disabled message error option one option two option three error message success option one option two option three success message

       <cds-form-group layout="compact">
    <cds-select layout="compact">
        <label>label</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>message text</cds-control-message>
    </cds-select>

    <cds-select layout="compact">
        <label>disabled</label>
        <select disabled>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>disabled message</cds-control-message>
    </cds-select>

    <cds-select layout="compact" status="error">
        <label>error</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-select>

    <cds-select layout="compact" status="success">
        <label>success</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-select>
</cds-form-group>
      

Multiple

label Option One Option Two Option Three Option Four Option Five message text

       <cds-select>
    <label>label</label>
    <select multiple>
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
        <option>Option Four</option>
        <option>Option Five</option>
    </select>
    <cds-control-message>message text</cds-control-message>
</cds-select>
      

DarkTheme

label option one option two option three message text disabled option one option two option three disabled message error option one option two option three error message success option one option two option three success message

       <cds-form-group layout="horizontal" cds-theme="dark">
    <cds-select layout="horizontal">
        <label>label</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>message text</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal">
        <label>disabled</label>
        <select disabled>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message>disabled message</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal" status="error">
        <label>error</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-select>

    <cds-select layout="horizontal" status="success">
        <label>success</label>
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-select>
</cds-form-group>