Overview

Selects are a common interactive element for choosing among a list of predefined options. The a17t .select element is a specialized type of field with a downward chevron on the right side.

Unlike some elements, the select element must be applied as the parent of the actual HTML <select> element it’s being applied to. This allows the chevron to be inserted automatically.

Considerations

Long options — By default, .select elements (like all .field-based elements) have a width of 100%. This is so that the width is determined by your interface, not your data. Extremely long options in your select will be cut off by the chevron.

Variants

Selects have full tone support.

Example code

<section class="md:grid grid-cols-3 gap-4">

  <div class="select ~neutral !">
    <select>
      <option>~neutral</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

  <div class="select ~positive !">
    <select>
      <option>~positive</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

  <div class="select ~warning !">
    <select>
      <option>~warning</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

  <div class="select ~critical !">
    <select>
      <option>~critical</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

  <div class="select ~info !">
    <select>
      <option>~info</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

  <div class="select ~urge !">
    <select>
      <option>~urge</option>
      <option>Another option</option>
      <option>A very long option that will overlap with the chevron, hopefully.</option>
    </select>
  </div>

</section>

Disabling

Example code

<div class="select ~neutral">
  <select disabled>
    <option>This select is disabled</option>
    <option>Another option</option>
    <option>A very long option that will overlap with the chevron, hopefully.</option>
  </select>
</div>

Accessibility

Use Aria roles and labels. When building forms, it’s easy to rely on visual guidelines to show relationships between elements. Unfortunately, this doesn’t help those interacting with your site using a screenreader or other assistive technologies. For this reason, it’s important to use ARIA labels and roles wherever possible.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

Your batch

If you're not sure, please reach out.

Example code

<p class="label">Your batch</p>
<div class="select my-1 max-w-xs">
  <select>
    <option>Spring 1</option>
    <option>Spring 2</option>
    <option>Summer 1</option>
    <option>Summer 2</option>
  </select>
</div>
<p class="support">If you're not sure, please reach out.</p>

Your batch

Unfortunately, that batch is full.

Example code

<p class="label">Your batch</p>
<div class="select ~critical my-1 max-w-xs">
  <select>
    <option>Spring 1</option>
    <option>Spring 2</option>
    <option>Summer 1</option>
    <option>Summer 2</option>
  </select>
</div>
<p class="support ~critical">Unfortunately, that batch is full.</p>