Select

cds-textfield

The Select component allows users to choose from a predefined list of options. It provides a clear and efficient way to make selections, supporting both single and multiple-choice variations.

Default

SelectSelect a countryUnited StatesCanadaMexicoUnited KingdomGermanyFranceJapanChinaIndia

Default textfield

<div class="cds-select">
  <label class="cds-select__label">Labeled select</label>
  <select class="cds-select__field">
    <option value="" selected disabled>Select a country</option>
    <optgroup label="America">
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="mexico">Mexico</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="uk">United Kingdom</option>
        <option value="germany">Germany</option>
        <option value="france">France</option>
    </optgroup>
    <optgroup label="Asia">
        <option value="japan">Japan</option>
        <option value="china">China</option>
        <option value="india">India</option>
    </optgroup>
  </select>
  <span class="cds-select__chevron"></span>
</div>

---

Elements

Element	Code	Parent	HTML tag	Required
Label	cds-select__label	Block: cds-select	<label>	optional
Field	cds-select__field	Block: cds-select	<select>	required
Icon	cds-select__icon	Block: cds-select	<span>	optional
Chevron	cds-select__chevron	Block: cds-select	<span>	required
Validation	cds-select__validation	Block: cds-select	<span>	optional
Placeholder*	Placeholder attribute	Element: cds-select__field	placeholder	optional

There are 2 combinations: label + input or no label but with icon-placeholder + palceholder attr.

CountrySelect a countryUnited StatesCanadaMexicoUnited KingdomGermanyFranceJapanChinaIndia

Select a countryUnited StatesCanadaMexicoUnited KingdomGermanyFranceJapanChinaIndia

<div class="cds-select">
  <span class="cds-select__icon cds-ph-globe"></span>
  <select class="cds-select__field">
    <!-- SelectOptions -->
   </select>
  <span class="cds-select__chevron"></span>
</div>

---

States

Modifier	Options
States	is-disabled, is-invalid

Is disabled

CountrySelect a countryUnited StatesCanadaMexicoUnited KingdomGermanyFranceJapanChinaIndia

Example

<div class="cds-select is-disabled">
  <label class="cds-select__label">Country</label>
  <select class="cds-select__field">
    <!-- SelectOptions -->
   </select>
  <span class="cds-select__chevron"></span>
</div>

Is invalid

CountrySelect a countryUnited StatesCanadaMexicoUnited KingdomGermanyFranceJapanChinaIndiaValidation message

Example

<div class="cds-select is-invalid">
  <label class="cds-select__label">Country</label>
  <select class="cds-select__field">
    <!-- SelectOptions -->
   </select>
  <span class="cds-select__chevron"></span>
  <span class="cds-select__validation">Validation message</span>
</div>