To use the select component import the component in your JavaScript.
Select
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
message text
disabled message
error message
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
message text
disabled message
error message
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
message text
disabled message
error message
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
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
message text
disabled message
error message
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>