For situations where the <auro-counter> web component cannot be used, a native HTML <input type="number"> element — optionally paired with <button> increment and decrement controls — can be styled with the Auro Design System tokens to approximate the visual appearance of auro-counter. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .counter class, so the styling must be authored manually using Auro design tokens.

The native number input and its associated increment/decrement buttons can be restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the layout, button shape, and value typography used by auro-counter.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.counter {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-size-200, 1rem);
  font-family: var(--ds-font-family-default, sans-serif);
}
​
.counter__button {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ds-size-400, 2rem);
  height: var(--ds-size-400, 2rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: 50%;
  background-color: var(--ds-color-container-primary-default, #ffffff);
  color: var(--ds-color-text-primary-default, #00467f);
  font-size: var(--ds-size-300, 1.5rem);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
​
.counter__button:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 2px;
}
​
.counter__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
​
.counter__value {
  appearance: textfield;
  -moz-appearance: textfield;
  width: var(--ds-size-500, 2.5rem);
  border: none;
  background: transparent;
  text-align: center;
  font-size: var(--ds-size-300, 1.5rem);
  color: var(--ds-color-text-primary-default, #2a2a2a);
}
​
.counter__value::-webkit-outer-spin-button,
.counter__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Wrap a native <input type="number"> with two <button> elements and a <label> for an accessible name:

<div class="counter">
  <label for="passengers">Passengers</label>
  <button type="button" class="counter__button" aria-label="Decrease passengers">−</button>
  <input id="passengers" class="counter__value" type="number" min="0" max="9" step="1" value="0" />
  <button type="button" class="counter__button" aria-label="Increase passengers">+</button>
</div>

Use a <fieldset> and <legend> to give the group an accessible name. The buttons require custom JavaScript to update each input's value:

<fieldset>
  <legend>Travelers</legend>
  <div class="counter">
    <label for="adults">Adults</label>
    <button type="button" class="counter__button" aria-label="Decrease adults">−</button>
    <input id="adults" class="counter__value" type="number" min="1" max="9" step="1" value="1" />
    <button type="button" class="counter__button" aria-label="Increase adults">+</button>
  </div>
  <div class="counter">
    <label for="children">Children</label>
    <button type="button" class="counter__button" aria-label="Decrease children">−</button>
    <input id="children" class="counter__value" type="number" min="0" max="8" step="1" value="0" />
    <button type="button" class="counter__button" aria-label="Increase children">+</button>
  </div>
</fieldset>

While the CSS above replicates the visual styling of auro-counter, the following functionality built into the auro-counter and auro-counter-group web components is not available when using plain HTML:

auro-counter exposes increment() and decrement() methods and handles all click wiring between its buttons and the displayed value. With native HTML, the <button> controls have no inherent relationship to the <input type="number"> — you must write JavaScript click handlers that read the input, apply the step, clamp to min/max, and write the new value back.

auro-counter automatically disables the decrement button when the value is at min and the increment button when the value is at max, providing a clear visual signal that further changes are not allowed. Native HTML min and max only constrain validation — the surrounding <button> controls will not disable themselves at the boundaries unless you wire that behavior yourself.

auro-counter-group supports min and max properties that apply to the total of all child counters. When the aggregate total reaches the group maximum, every child counter's increment button is disabled; when it reaches the minimum, every decrement button is disabled. Native HTML has no equivalent — you must write JavaScript to sum each input, compare against a group total, and toggle every button accordingly.

auro-counter-group exposes a single value property as an object keyed by each counter's name, along with a separate total property for the aggregate sum. With native HTML, you must query each input individually, build the value object yourself, and recompute the total on every change.

auro-counter renders a role="spinbutton" element with aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext, and aria-labelledby so assistive technology announces the value as a spinbutton — the role most screen readers expect for stepper controls. A native <input type="number"> is announced as an editable text field, not a spinbutton, and there is no built-in way to relabel the surrounding +/− buttons through ARIA slots.

auro-counter integrates with @aurodesignsystem/form-validation to expose a validity property, an error attribute, and a help text region that switches to an alert with role="alert" and aria-live="assertive" when invalid. Native number inputs surface browser-controlled validation tooltips that are not announced inline and cannot be styled or customized beyond setCustomValidity().

auro-counter and auro-counter-group install dedicated keyboard strategies that handle Arrow keys, Home/End, and tab order across the +/− buttons and the spinbutton, including ordered traversal of every counter inside a group. Native HTML gives you only the default browser behavior — Arrow keys step the number input by one, but they will not move focus between counters or coordinate Home/End across a group without custom code.

auro-counter exposes a single disabled attribute that disables both buttons and removes the spinbutton from the tab order, and auro-counter-group propagates appearance and theming to all child counters. With native HTML, you must apply disabled to each <input> and each <button> individually, or wrap them in a <fieldset disabled> with the side effects that entails.

auro-counter-group supports an isDropdown mode that renders the group inside an Auro dropdown with a trigger, value text, fullscreen breakpoint behavior, and configurable placement. There is no native HTML equivalent — reproducing this requires building the popover, focus management, and fullscreen transitions yourself.

auro-counter dispatches input events with a structured detail.value, and auro-counter-group dispatches input events carrying both detail.total and detail.value plus auroFormElement-validated events so a parent auro-form can coordinate validation. Native inputs emit only the standard input and change events without the structured payloads the Auro form system expects.

auro-counter consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only counter is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-counter and auro-counter-group whenever possible. Fall back to a CSS-styled native number input only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement button wiring, min/max disabling, group totals, spinbutton ARIA, and keyboard coordination yourself.