Appearance

Light vs. Dark Background

The appearance attribute defines whether the component renders on lighter or darker backgrounds. Supported values are default and inverse. The default value is default.

Adults

See code

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

Adults

See code

<auro-counter appearance="inverse">
  Adults
</auro-counter>

Tokens

The component may be restyled by overriding the following CSS custom properties (design tokens).

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;

:host(:not([ondark])),
:host(:not([appearance="inverse"])) {
  /* Snowflake Dropdown Tokens */
  --ds-auro-counter-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-counter-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
  --ds-auro-counter-outline-color: transparent;

  /* Classic Tokens */
  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, #{v.$ds-advanced-color-button-tertiary-background});
  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #{v.$ds-advanced-color-button-tertiary-text});
  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
}

:host([ondark]),
:host([appearance="inverse"]) {
  /* Snowflake Dropdown Tokens */
  --ds-auro-counter-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
  --ds-auro-counter-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
  --ds-auro-counter-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
  --ds-auro-counter-outline-color: transparent;

  /* Classic Tokens */
  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, #{v.$ds-advanced-color-button-tertiary-background-inverse});
  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #{v.$ds-advanced-color-button-tertiary-text-inverse});
  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider-inverse, #{v.$ds-basic-color-border-divider-inverse});
}

Adults 18 years or older

Children 2-17 years

See code

<style>
  #customTokensCounter {
    --ds-auro-counter-control-background-color: #e8d5f5;
    --ds-auro-counter-control-border-color: #7b2d8e;
    --ds-auro-counter-icon-color: #7b2d8e;
    --ds-auro-counter-quantity-text-color: #7b2d8e;
    --ds-auro-counter-divider-color: #c9a4db;
  }
</style>
<auro-counter-group id="customTokensCounter">
  <auro-counter>
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter>
    Children
    <span slot="description">2-17 years</span>
  </auro-counter>
</auro-counter-group>

CSS Shadow Parts

The following CSS shadow parts are available for styling:

auro-counter-group

Part	Description
`dropdown`	Apply CSS to the dropdown element in the shadow DOM
`helpText`	Apply CSS to the group help text element

auro-counter

Part	Description
`counterControl`	Apply CSS to the counter control container
`controlMinus`	Apply CSS to the decrement button
`controlPlus`	Apply CSS to the increment button
`helpText`	Apply CSS to the counter help text element

Adults 18 years or older

Children 2-17 years

See code

<style>
  #cssPartsCounter auro-counter::part(counterControl) {
    border: 2px dashed purple;
    border-radius: 8px;
    padding: 0.5rem;
  }

  #cssPartsCounter auro-counter::part(controlMinus),
  #cssPartsCounter auro-counter::part(controlPlus) {
    background-color: #e8d5f5;
  }
</style>
<auro-counter-group id="cssPartsCounter">
  <auro-counter>
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter>
    Children
    <span slot="description">2-17 years</span>
  </auro-counter>
</auro-counter-group>

Bib Position

Customize bib position with placement, offset, noFlip, autoPlacement, and shift attributes.

Passengers

Label bottom-end bib with 20px offset

Adults 18 years or older

Children 2-17 years

Passengers

Label bottom-end bib with 20px offset and noFlip

Adults 18 years or older

Children 2-17 years

Passengers

Label right bib with 20px offset, noFlip and autoPlacement

Adults 18 years or older

Children 2-17 years

Passengers

Label bottom-start with 20px offset, noFlip and shift enabled

Adults 18 years or older

Children 2-17 years

See code

<div style="width: 350px">
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
    <div slot="bib.fullscreen.headline">Passengers</div>
    <span slot="label">Label</span>
    <span slot="helpText">bottom-end bib with 20px offset</span>
    <auro-counter>
      Adults
      <span slot="description">18 years or older</span>
    </auro-counter>
    <auro-counter>
      Children
      <span slot="description">2-17 years</span>
    </auro-counter>
  </auro-counter-group>
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
    <div slot="bib.fullscreen.headline">Passengers</div>
    <span slot="label">Label</span>
    <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
    <auro-counter>
      Adults
      <span slot="description">18 years or older</span>
    </auro-counter>
    <auro-counter>
      Children
      <span slot="description">2-17 years</span>
    </auro-counter>
  </auro-counter-group>
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
    <div slot="bib.fullscreen.headline">Passengers</div>
    <span slot="label">Label</span>
    <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
    <auro-counter>
      Adults
      <span slot="description">18 years or older</span>
    </auro-counter>
    <auro-counter>
      Children
      <span slot="description">2-17 years</span>
    </auro-counter>
  </auro-counter-group>
  <auro-counter-group width="350px" isDropdown offset="20" placement="bottom-start" shift noFlip>
    <div slot="bib.fullscreen.headline">Passengers</div>
    <span slot="label">Label</span>
    <span slot="helpText">bottom-start with 20px offset, noFlip and shift enabled</span>
    <auro-counter>
      Adults
      <span slot="description">18 years or older</span>
    </auro-counter>
    <auro-counter>
      Children
      <span slot="description">2-17 years</span>
    </auro-counter>
  </auro-counter-group>
</div>

Fullscreen Breakpoint

Customize the breakpoint at which the dropdown switches to fullscreen mode with fullscreenBreakpoint. The bib.fullscreen.headline slot is required. Use bib.fullscreen.footer to add footer content.

Close Popup Passengers Passengers

This is help text

Adults 18 years or older

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

Lap Infants Under 2 years

Reset

Save

See code

<div style="max-width: 350px;">
  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
    <span slot="ariaLabel.bib.close">Close Popup</span>
    <span slot="label">Passengers</span>
    <span slot="bib.fullscreen.headline">Passengers</span>
    <div slot="helpText">This is help text</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>
    <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
      <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
      <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
    </div>
  </auro-counter-group>
</div>

Behavior

Disabled

Use the disabled attribute on the <auro-counter-group> to disable the entire group.

Adults 18 years or older

Children 2-17 years

See code

<auro-counter-group disabled>
  <auro-counter>
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter>
    Children
    <span slot="description">2-17 years</span>
  </auro-counter>
</auro-counter-group>

Disabled Individual

Use the disabled attribute on individual <auro-counter> elements to disable specific counters while leaving the rest interactive.

Disabled counter This counter cannot be modified

See code

<auro-counter disabled value="0">
  Disabled counter
  <span slot="description">This counter cannot be modified</span>
</auro-counter>

Min/Max

Use the min, max, and value attributes to constrain the counter's range and set an initial value.

Adults Min: 2, Max: 5

See code

<auro-counter min="2" max="5" value="2">
  Adults
  <span slot="description">Min: 2, Max: 5</span>
</auro-counter>

Group Min/Max

The group max and min attributes set bounds for the total across all counters. Individual counter max values can also be set within a group.

This counter has a max value of 5

This counter has a max value of 8

See code

<auro-counter-group max="12" min="0">
  <auro-counter max="5">
    This counter has a max value of 5
  </auro-counter>
  <auro-counter max="8">
    This counter has a max value of 8
  </auro-counter>
</auro-counter-group>

Error

Use the error attribute to apply a persistent custom error message on the counter or counter group.

Adults

See code

<auro-counter error="There is an error with the counter">
  Adults
</auro-counter>

Dropdown Errors

Individual counters within a dropdown can display their own error messages. The group error attribute overrides individual errors.

Close Popup

Passengers

Adults 18 years or older

Children 2-17 years

See code

<auro-counter-group isDropdown>
  <span slot="ariaLabel.bib.close">Close Popup</span>
  <div slot="bib.fullscreen.headline">Passengers</div>
  <div slot="label">Passengers</div>
  <auro-counter>
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter error="Custom error on Children counter">
    Children
    <span slot="description">2-17 years</span>
  </auro-counter>
</auro-counter-group>

Close Popup

Passengers

Adults 18 years or older

Children 2-17 years

See code

<auro-counter-group error="Custom error on counter group" isDropdown>
  <span slot="ariaLabel.bib.close">Close Popup</span>
  <div slot="bib.fullscreen.headline">Passengers</div>
  <div slot="label">Passengers</div>
  <auro-counter error="Custom error on Adults counter">
    Adults
    <span slot="description">18 years or older</span>
  </auro-counter>
  <auro-counter error="Custom error on Children counter">
    Children
    <span slot="description">2-17 years</span>
  </auro-counter>
</auro-counter-group>