Vivid Logo Vivid

Number Field

Allows users to enter a number in a text field or use buttons to increment or decrement the value.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • If no label is set - it is highly recommended that aria-label will be added.
  • The add / subtract buttons are automatically given a localized version of the words "Increment" and "Decrement" respectively. These can be overriden using increment-button-aria-label and decrement-button-aria-label.
<vwc-number-field aria-label="choose a number" increment-button-aria-label="Add" decrement-button-aria-label="Subtract"></vwc-number-field>

Resources