Skip to main content

Counter

Create a numeric input with keyboard support.

View in StorybookExternal link icon

Behavior​

The counter elements change their state independently; for instance, hovering over an icon doesn't affect either the other icon or the text field.

The smallest possible Counter width is 148 px.

Sizes​

Counter comes in two sizes:

  • Size S – 32 px in height.
  • Size M – 40 px in height.

Counter in size M is the default; you should use it in most cases.

Consider using Counter in size S for Popovers and Modals with limited vertical space and when the surrounding components (Toolbar, Buttons, Selects, etc.) are in size S.

tip

For dense layouts, consider reducing the vertical spacing between input fields.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Counter's active state and adds a 2px ring. If the Counter is filled, the focus will highlight the entered data within the component.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

The counter supports the common keyboard interactions, using the Tab key to select the element and using the Enter key to activate an in-focus element.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.