Vivid Logo Vivid

Number Field

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

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