Stepper

Example

		<vega-stepper
			id="1"
			value="1"
			max="5"
			min="0"
			label="Quantity"
			button-variant="primary"
		/>

Usage

The vega-stepper component can be used to track the incrementation of items on a list, such as when adding items to a shopping cart. It consists of a numerical input field, and a minus and plus button. When an increment of a number meets a minimum or maximum number of items, the plus or minus button will become disabled.

Properties

Name	Description	Default
id	This is the unique identifier for the stepper. It should not be duplicated. string
value	The value property sets the default value of the stepper. If not included, the value defaults to 0. number	0
max	This sets the maximum value of the stepper. number	9999
min	This sets the minimum value of the stepper. number	0
label	This is the label applied to the stepper. string
input-disabled	Indicates whether the input field is disabled. boolean	false
disabled	A boolean indicating if the input field is disabled. boolean	false
form-validation	Updating the value of this property triggers the validation process. number	0
auto-validation	Indicates whether to automatically validate stepper input. boolean	true
button-variant	Enables setting the variant of the stepper button to be `primary` or `secondary`. string	primary

All parameters

<vega-stepper 
    value=number 
    min=number 
    max=number 
    label=string 
    input-disabled=true|false 
	disabled=true|false 
    form-validation=number 
    auto-validation=true|false 
    button-variant=string>
</vega-stepper>

Note: The value attribute of the vega-stepper behaves the same as the value of a normal HTML input field. You may access it in the same way.

<vega-stepper id="stepper-id"></vega-stepper>

<script>
    const stepper_value = document.getElementById("stepper-id").value
</script>

Event

The vegaChange event is dispatched when the value of the stepper is changed.

document.getElementById("stepper_id").addEventListener("vegaChange", (e) => {
console.log(e.currentTarget.value) })

For more details, view in Storybook.

Accessibility

Ensures ARIA attributes are allowed for an element’s role.
Ensures all ARIA attributes have valid values.
Ensures attributes that begin with aria- are valid ARIA attributes.
Ensures buttons have discernible text.
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Ensures every id attribute value is unique.
Ensures form field does not have multiple label elements.
Ensures that every form element is not solely labeled using the title or aria-describedby attributes.
Ensures every form element has a label.
Nested interactive controls are not announced by screen readers.

Best Practices

Steppers can be particularly helpful for devices with no keyboard for entering numeric information, and where use of a keyboard is error-prone (such as on a smartphone). . They are ideal for kiosk type situations where a keyboard is simply not available.

They tend to be intuitive to use, and have a low interaction cost. They are not, however, particularly useful for large numbers or large adjustments from the default value, simply because of the time and number of clicks it takes to reach these numbers. For this reason, the vega-stepper allows entering a specific number in the input field.

Use the stepper for with a clear and commonly selected value.
Set the most commonly selected value as the default (e.g. if people tend to choose 1 item, set it at 1).
If someone wants to take a percentage of an increment, the stepper is a poor choice; it is not possible to select, for instance, 1.5 items.
Clearly identify which field is modified by the stepper.
Use large buttons for all platforms.
Use either an arrow or a +/- to designate the instructions.
Provide an additional method for inputting a value (which the vega-stepper does).
Limit the range to a reasonable number.