Stepper

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component Stepper is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
disabled	boolean		Blocks the user from interacting with the input
required	boolean		Makes the input required
name	string		Name of the input
help-text	string		Help text of the input
invalid⚠️	boolean		Sets the input as invalid
locale⚠️	string
label	string	✅	Label for the stepper
config	string		Configuration for the stepper
steps	number		Number of steps of the stepper
model	number		Current value of the stepper
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-stepper custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-stepper custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-stepper z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

No customization tokens yet implemented for this component

Accessibility

...