# Stepper

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Stepper

 RbStepper is a compact increment and decrement control for integer values.
 It is useful for quantity, count, seat, day, or piece-based flows where free-form numeric typing is unnecessary.

 Basic Usage

 Simple integer stepper examples with live bound values.

 Show code

 Quantity

 1

 Adults

 2

 Min & Max

 Constrain values within a specific range and automatically disable buttons at boundaries.

 Show code

 Rating (0-5)

 3

 Days (1-30)

 7

 Step Size

 Increase or decrease by custom integer step sizes.

 Show code

 Packs (step 5)

 10

 Tickets (step 2)

 4

 Colors

 Switch between semantic colors interactively and compare normal, rounded, and circle treatments.

 Show code

 Interactive Color Selector

 Danger 
 Default 
 Primary 
 Secondary 
 Success 
 Warning 
 Info 

 5

 5

 5

 Shapes

 Compare square, rounded, and circle button treatments on the same stepper layout.

 Show code

 Square

 Normal

 0

 Filled

 0

 Outlined

 0

 Rounded

 Normal

 1

 Filled

 1

 Outlined

 1

 Circle

 Normal

 2

 Filled

 2

 Outlined

 2

 Readonly & Disabled

 Keep the value visible while limiting or blocking interaction.

 Show code

 Normal

 2

 Readonly

 5

 Disabled

 8

 Real World

 Use steppers inside member entry, vehicle count, and guest verification flows.

 Show code

 Vehicles

 Number of entering vehicles

 1

 Accompanying Members

 Number of entering accompanying members

 0

 Guests

 Number of entering accompanying guests

 0

 RTL Support

 Use steppers inside a local RTL container while keeping quantity controls readable in reservation-style flows.

 Show code

 عدد البالغين

 للحجز الحالي

 2

 عدد الأطفال

 من 2 إلى 12 سنة

 1

 عدد الحقائب

 لكل غرفة

 3

 ✕

 Contents