Stepper

A component used to input or adjust numbers, supporting custom steps, precision, formatting, and different layouts.

Component Features

• 🔢 Numeric Control: Supports custom min, max, step, and precision values.
• 🎨 Various Layouts: Control buttons can be placed on both sides, on the right, or configured to show buttons only.
• 🔤 Formatting: Supports custom value formatting and parsing (e.g., currency format).
• 📏 Multiple Sizes: Available in small, medium, and large sizes.
• 🖱️ Long Press: Supports long-pressing buttons for continuous increment/decrement.
• 📋 Form Integration: Integrates seamlessly with BrForm, supporting validation states.

Basic Usage

The most basic stepper, binding the value via v-model.

Current Value: 1

Example

Precision and Step

Use the step prop to set the step value and the precision prop to set decimal precision.

Current Value: 0.5

Example

Formatting

You can customize how the value is displayed in the input using the formatter and parser props.

Example

Controls Position and Mode

Use controls-position to change the position of the buttons, and button-only to hide the input field and keep only the control buttons.

Controls on the right

Buttons Only Mode

5

Example

Size

Supports three different sizes: sm, md, and lg.

xs (Extra Small Size)

sm (Small Size)

md (Medium Size，Default)

lg (Large Size)

xl (Extra Large Size)

2xl (Massive Size)

Example

Form Integration

A typical application within forms, supporting validation states and disabled states in conjunction with BrFormItem.

Purchase Quantity (Limits 1-10)

Disabled State

Example

Theme Customization

Combined with BrConfigProvider, you can globally override the component's default styles. Local styles can also be overridden via TailwindCSS.

Use global config to change border radius

Use TailwindCSS Local override style

Example

API Reference

BrStepper

Prop	Type	Default	Description
modelValue / v-model	number | null	-	Binding value
defaultValue	number | null	-	Default value (uncontrolled mode)
min	number	Number.MIN_SAFE_INTEGER	Minimum value
max	number	Number.MAX_SAFE_INTEGER	Maximum value
step	number	1	Step value for each change
precision	number	-	Numeric precision
disabled	boolean	false	Whether it is disabled
readonly	boolean	false	Whether it is readonly
size	'sm' | 'md' | 'lg'	'md'	Size of the stepper
formatter	(value: number | null) => string	-	Format function for the input display
parser	(value: string) => number | null	-	Parse function to extract number from input
debounceDelay	number	300	Input debounce delay in ms
longPress	boolean	true	Enable continuous changes via long press
buttonOnly	boolean	false	Whether to show buttons only (hide input)
controlsPosition	'both' | 'right'	'both'	Position of the control buttons
placeholder	string	-	Placeholder text

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered when the binding value changes	(value: number | null)
change	Triggered when the binding value changes	(value: number | null)
blur	Triggered when the input loses focus	(event: FocusEvent)
focus	Triggered when the input gets focus	(event: FocusEvent)