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

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

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>
      

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>
      

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>
      

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>
      

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>
      

Theme

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>