Description

The auro-counter component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the auro-counter-group to facilitate a collection of counters to add passenger types to a flight.

Adults

See code

<auro-counter>
  Adults
</auro-counter>

User Stories

Standalone Counter

As a user, I want a simple numeric input that I can increment or decrement to select a quantity.

Adults

See code

<auro-counter>
  Adults
</auro-counter>

Counter Group

As a user, I want to select multiple related quantities — such as different passenger types — in a single grouped interface.

Short label

Another short label

This is an example of the wrapping behavior for a long label

See code

<auro-counter-group>
  <auro-counter>
    Short label
  </auro-counter>
  <auro-counter>
    Another short label
  </auro-counter>
  <auro-counter>
    This is an example of the wrapping behavior for a long label
  </auro-counter>
</auro-counter-group>

Dropdown Counter

As a user, I want a compact dropdown that expands to reveal counter options, saving space in forms.

Close Popup Passengers

Passengers

Adults 18 years or older

Children Under 17 years old. Restrictions apply if traveling without an adult.

Lap Infants Under 2 years

See code

<auro-counter-group isDropdown>
  <span slot="ariaLabel.bib.close">Close Popup</span>
  <span slot="bib.fullscreen.headline">Passengers</span>
  <div slot="label">Passengers</div>
  <auro-counter>
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter>
    Children
    <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
  </auro-counter>
  <auro-counter>
    Lap Infants
    <span slot="description">Under 2 years</span>
  </auro-counter>
</auro-counter-group>

Change Viewport Size

The user may change the size of their viewport (e.g. resize their desktop browser window, rotate their mobile device). In some cases, this may cause a re-render of the counter group while the dropdown bib is expanded. It is possible that the viewport size change will cause the bib to change from a popover to a fullscreen modal or vice versa while the bib is open.

Popover to Modal

While in a popover display state with the bib open, focus will be on the trigger. After switching to the fullscreen modal dialog, focus will move to the close button inside the dialog.

Modal to Popover

While in a fullscreen modal display state with the bib open, focus will be on the close button inside the dialog. After switching to the popover display, focus will move to the trigger.