Stepper

A simple input component that allows users to increment or decrement a numeric value using the provided buttons.

Importing

To use the stepper component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/stepper";

register(); // Now the stepper component is ready to use!

Web (Option 2)

import { registerStepper } from "@tapsioss/web-components";

registerStepper(); // Now the stepper component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/stepper/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Stepper } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-stepper></tapsi-stepper>

React

<Stepper />

Properties

Name	Attribute Name	Description	Type	Default Value
unit	unit	The unit of the value.	string	""
size	size	The size of the input.	"sm" | "md"	"md"
value	-	The current value of the input.	string	"0"
valueText	valuetext	Defines the human-readable text alternative of value. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext	string	""
label	label	Defines a string value that can be used to name input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
readOnly	readonly	Indicates whether a user should be able to edit the input's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly	boolean	false
max	max	Defines the maximum value in the range of permitted values. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max	string	DEFAULT_MAX
min	min	Defines the minimum value in the range of permitted values. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min	string	DEFAULT_MIN
step	step	Returns or sets the element's step attribute, which works with min and max to limit the increments/decrements at which the input value can be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step	string	"1"
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false
valueAsNumber	-	The input's value as a number.	number	0

Methods

Name	Description	Parameters
stepDown	Decrements the value of the input. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown	Name: stepDecrement Type: (number): The number of steps to decrement.
stepUp	Increments the value of the input. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp	Name: stepIncrement Type: (number): The number of steps to increment.

Events

Name	Description	Type	Bubbles	Cancelable
change	Fires when value changes.	Event	✅	❌