Select

A dropdown-style single select element


  • Display

    Inline Flex

  • Selectors

    .select
  • Source

    GitHub ↗

  • Features

    TonesPriorities

<div class='select !normal max-w-xs'>
  <select>
    <option>Choice A</option>
    <option>Choice B</option>
    <option>Choice C</option>
  </select>
</div>

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.

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, priority, and disabling support. Priorities are communicated through elevation.

Low Priority
Example code
<section class="md:grid grid-cols-3 gap-4">

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

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

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

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

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

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

</section>
Normal Priority
Example code
<section class="md:grid grid-cols-3 gap-4">

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

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

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

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

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

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

</section>
High Priority
Example code
<section class="md:grid grid-cols-3 gap-4">

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

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

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

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

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

  <div class="select ~urge !high">
    <select>
      <option>~urge !high</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>

Customization

Name Type Default Description
--color-light color sets default border color
--field-shadow-transition-speed time 75ms sets the speed of the hover and focus transition
--fallback-box-shadow box shadow sets the base box shadow
--field-disabled-opacity opacity 0.8 sets the opacity of disabled fields
--field-hover-box-shadow box shadow 0 0 1px 1px var(--color-light) sets additional box shadow on hover
--field-focus-box-shadow box shadow 0 0 0 2px var(--color-light) sets additional box shadow on focus
--select-chev-offset size 1em how much the chevron should be offset
--color-core color sets the color of the chevron

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.