Component · Form elements

Select

Stable

Selects let managers choose one option from a list. They save space when there are more than about five options. With five or fewer, radios are better because every option is visible without a click.

Atrium uses the browser's own select, so the dropdown list and its arrow look a little different in each browser and on phones. That is expected.

Reminder frequency

Specifications

Anatomy

Reminder frequency

1) Label

font-size: var(--at-text-sm) /* 14px */

font-weight: var(--at-weight-bold)

2) Field

min-height: 36px

padding: var(--at-space-3) /* 8px */

border: 1px solid var(--at-border)

border-radius: var(--at-radius-1)

arrow: drawn by the browser

Size and spacing

Frequency

Field

min-height: 36px

width: 100% of its container

Type

font-size: var(--at-text-md) /* 16px */

Select

Put the most common option first, or pre-select it if there is a sensible default.

Example

Property

States

Default

border: 1px solid var(--at-border)

Hover

border-color: var(--at-text-subtle)

Focus

outline: 3px solid var(--at-border-focus)

outline-offset: 2px

Error

border: 2px solid var(--at-border-danger)

plus an .at-error message

Disabled

opacity: 0.5

cursor: not-allowed

Usage

When to use

Choosing one option from more than about five.

When not to use

Five or fewer options: use radios.
Choosing several: use checkboxes.
Hundreds of options: use a text input with search.

Content

Options in a sensible order: most common first, or alphabetical, or by date.
Keep option text short so it fits on a phone.

Do and don't

Charge Flat fee Per unit

DoTwo options: show them as radios.

Charge

Don'tA select that hides only two options.

Do

Keep the native select element.

Don't

Build a custom dropdown.

Implementation

HTML

<div class="at-field">
  <label class="at-label" for="freq">Reminder frequency</label>
  <select class="at-select" id="freq">
    <option>Weekly</option>
    <option>Monthly</option>
    <option>Quarterly</option>
  </select>
</div>