Counter

A counter is a numeric stepper with decrement and increment buttons around a centered number input.

Examples

Small (Default)

<div class="ro-counter">
  <button type="button" class="ro-btn ro-variant-ghost ro-size-sm ro-shape-icon ro-counter-decrement" aria-label="Decrease value">
    <i class="ro-icon ro-icon-minus-small"></i>
  </button>
  <input type="number" min="0" max="100" step="1" value="0" aria-label="Quantity" />
  <button type="button" class="ro-btn ro-variant-ghost ro-size-sm ro-shape-icon ro-counter-increment" aria-label="Increase value">
    <i class="ro-icon ro-icon-plus-small"></i>
  </button>
</div>

Preview

Medium Step Buttons

Use ro-size-md-sm on the step buttons for a slightly larger control.

<div class="ro-counter">
  <button type="button" class="ro-btn ro-variant-ghost ro-size-md-sm ro-shape-icon ro-counter-decrement" aria-label="Decrease value">
    <i class="ro-icon ro-icon-minus-small"></i>
  </button>
  <input type="number" min="0" max="100" step="1" value="0" aria-label="Quantity" />
  <button type="button" class="ro-btn ro-variant-ghost ro-size-md-sm ro-shape-icon ro-counter-increment" aria-label="Increase value">
    <i class="ro-icon ro-icon-plus-small"></i>
  </button>
</div>

Preview

Invalid

Wrap the counter in .ro-field.ro-state-invalid (or .ro-form-control.ro-state-invalid) and show .ro-field-error.

<div class="ro-field ro-state-invalid">
  <div class="ro-counter">
    <button type="button" class="ro-btn ro-variant-ghost ro-size-sm ro-shape-icon ro-counter-decrement" aria-label="Decrease value">
      <i class="ro-icon ro-icon-minus-small"></i>
    </button>
    <input type="number" min="0" max="100" step="1" value="0" aria-label="Quantity" aria-invalid="true" />
    <button type="button" class="ro-btn ro-variant-ghost ro-size-sm ro-shape-icon ro-counter-increment" aria-label="Increase value">
      <i class="ro-icon ro-icon-plus-small"></i>
    </button>
  </div>
  <span class="ro-field-error" role="alert">
    <i class="ro-icon ro-icon-warning-error" aria-hidden="true"></i>
    Invalid number
  </span>
</div>

Preview

Invalid number

Properties

Class / state	Description
.ro-counter	Root inline-flex stepper. Focus-within accent border.
input[type="number"]	Centered value; spin buttons hidden.
.ro-btn	Step buttons inside the counter.
:has(input:disabled)	Disabled styling on the counter root.
Parent .ro-state-invalid	Danger border via forms.scss.

.ro-counter-decrement and .ro-counter-increment are optional semantic hooks for JavaScript wiring (not styled).

JavaScript is required to wire step button clicks. In Vue apps, use RoCounter from @ringover/ringo-ui for full behavior.