Stepper Component

A form item that shows a value and can be increased or decreased by tw buttons

Properties

Name	Type	Default	Description
unit	string	''	A single quantity of the value
disabled	boolean	false	If true, the component is disabled.
step	number	1	The number to which the current value is increased or decreased. It can be an integer or decimal
size	'small' | 'medium'	'medium'	The size of icons and font.
min	number	-Infinity	The min value.
max	number	Infinity	The max value.
fullWidth	number	false	If true the component will fill the parent.
value	number	0	The current value.

CSS Parts

Name	Description
stepper	The container that wraps the stepper component.
decrease-button	The button that contains minus icon and decrease the value.
increase-button	The button that contains plus icon and increases the value.
value	The p tag that shows the value.
unit	The p tag that shows the unit and will be hidden if unit not exists.

Check this link to learn how to use CSS parts for Stepper Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	-
--tap-stepper-typography-label-sm-size	--tap-sys-typography-label-md-size	-
--tap-stepper-typography-label-md-size	--tap-sys-typography-label-lg-size	-

Events

Name	Description
stepper-change	Fired when the value of the stepper changes.