Select – Design Portal

The select box allows you to offer visitors a dropdown selection of options.

Demo

Label Name

<label class="form-label" for="formSelectDemo">Label Name</label>
<select class="form-select" aria-label="Select example" id="formSelectDemo">
  <option selected>Select Options</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

.form-label {
  display: inline-block;
  font-size: 0.9rem;
  margin-block-end: 0.25rem;
}

.form-select {
  @include font(normal, 400, 1rem, 1.5, var(--body-font));
  appearance: none;
  background: var(--white) url(#{$assetPath}/select-arrow.svg) no-repeat right .8rem top 1rem/0.9rem;
  border-radius: var(--border-radius);
  border: .0625rem solid var(--light-gray-1);
  color: var(--black);
  display: block;
  inline-size: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
}

No JS! 😀

States & Variations

Default

A custom select box with a label.

Label Name

<label class="form-label" for="formSelect">Label Name</label>
<select class="form-select" aria-label="Select example" id="formSelect">
  <option selected>Select Options</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Floating label

A custom select box with a persistent floating label.

Label Name

<div class="form-floating">
  <label class="form-floating__label" for="formSelect2">Label Name</label>
  <select class="form-floating__select" name="" id="formSelect2">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
  </select>
</div>

Anatomy

Select
Select Label
Select Option
Select Icon/Chevron