Counter - Design
Anatomy

The counter component consists of the following key elements:

  • Counter Label — The main label text (default slot) identifying what is being counted
  • Description — Optional supplementary text below the label (description slot)
  • Increment Button — Increases the counter value by 1
  • Decrement Button — Decreases the counter value by 1
  • Value Display — Shows the current numeric value
  • Help Text — Optional guidance text below the counter (helpText slot)

In a counter group, multiple counters are rendered together. When used with the isDropdown attribute, the group appears as a collapsible dropdown with a trigger element showing a label and summary of values.

Standalone Counter
Adults
Counter Group
Short label Another short label This is an example of the wrapping behavior for a long label
Dropdown Counter
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
Colors Default Color
Adults
Inverse Color
Adults
Shape | Size | Layout Support

The auro-counter-group component supports the shape, size and layout feature set. The component defaults to layout="classic", shape="classic" and size="lg".

Classic Layout

The classic layout is default for auro-counter-group. No customization is needed to achieve this look.

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>
 Snowflake Layout

The snowflake layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.

The snowflake layout is only expected to be used on dark backgrounds, in conjunction with appearance="inverse".

Close Popup
Group fullscreen label
Snowflake Dropdown Group
Total must be between 2-10
Counter 1 Counter 2
See code 
<!-- Example of counter-group properties -->
<auro-counter-group max="10" min="2" isDropdown layout="snowflake" shape="snowflake" appearance="inverse">
  <span slot="ariaLabel.bib.close">Close Popup</span>
  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
  <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
  <div slot="label">Snowflake Dropdown Group</div>
  <div slot="helpText">Total must be between 2-10</div>
  <auro-counter>
    Counter 1
  </auro-counter>
  <auro-counter>
    Counter 2
  </auro-counter>
</auro-counter-group>