Select

The Select component embeds a single select with an optional label on the page. Does not include any JS for form validation.

Attribute	Description
error	Sets an error state. Accepts a boolean, defaults to false.
id	Sets a value in the id and for attributes to pair labels and select fields. Accepts a string, defaults to null.
classes	Adds additional classes. Accepts a string of classes separated by spaces, defaults to null.
label	The label text. Accepts a string, defaults to null.
message	An error message. Accepts a string, defaults to null.
required	Specifies when a field is required. Accepts a boolean, defaults to null.

Block Name	Description
option-list	Holds the option tags for the select box.

Accessibility Guidelines

• Always associate select elements with a descriptive label
• Use the id attribute to link the select to its corresponding label
• Required inputs should be clearly marked with the required attribute
• Inputs with errors should have appropriate aria-invalid and aria-describedby attributes
• Provide meaningful error messages that help users understand how to fix the issue

Variations

Default Select

The standard select dropdown with a label and multiple options.

Select Dropdown

Option 1Option 2Option 3Option 4Option 5

<div class="cmp-form-select">
  <label for="select-default" class="cmp-form-label">Select Dropdown</label>
  <div class="cmp-form-select--required">
    <select id="select-default" class="cmp-form-select__dropdown" required>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
</div>

Select with Error

Select dropdowns can display an error state by adding the cmp-form-select__dropdown--error class to the select element. Error messages should use the cmp-form__error-message class and be associated with the select using an id and aria-describedby attributes.

Select Dropdown with Error

Option 1Option 2Option 3Option 4Option 5

This is an error message.

<div class="cmp-form-select">
  <label for="select-error" class="cmp-form-label">
    Select Dropdown with Error
  </label>
  <div class="cmp-form-select--required">
    <select
      id="select-error"
      class="cmp-form-select__dropdown cmp-form-select__dropdown--error"
      required
      aria-describedby="select-error-message"
      aria-invalid="true"
    >
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
  <p id="select-error-message" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>

Select with Placeholder Option

It’s common to include a placeholder option as the first option in a select dropdown to prompt the user to make a selection.

Select with Placeholder

— Please select an option —Option 1Option 2Option 3Option 4Option 5

<div class="cmp-form-select">
  <label for="select-placeholder" class="cmp-form-label">
    Select with Placeholder
  </label>
  <div class="cmp-form-select--required">
    <select id="select-placeholder" class="cmp-form-select__dropdown" required>
      <option value disabled selected>— Please select an option —</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
</div>