Stepper
Stepper component guides users through a multi-step process.
Examples
Default
Compound component with editable input. Use StepperContainer to wrap the buttons and input, and compose with StepperDecreaseButton, StepperInput, and StepperIncreaseButton.
1import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function Default() {
10 return (
11 <Stepper>
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
201import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function Default() {
10 return (
11 <Stepper>
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
20Type
Use type="text" to display the value as read-only text instead of an editable input. Users can only change the value using the increase/decrease buttons.
1import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function TextType() {
10 return (
11 <Stepper defaultValue={5} type="text">
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
201import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function TextType() {
10 return (
11 <Stepper defaultValue={5} type="text">
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
20Min & Max
Use min and max props to limit the value range. The decrease button is disabled at min value, and the increase button is disabled at max value.
1import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function MinMax() {
10 return (
11 <Stepper defaultValue={5} max={10} min={0}>
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
201import {
2 Stepper,
3 StepperContainer,
4 StepperDecreaseButton,
5 StepperIncreaseButton,
6 StepperInput,
7} from '@devup-ui/components'
8
9export default function MinMax() {
10 return (
11 <Stepper defaultValue={5} max={10} min={0}>
12 <StepperContainer>
13 <StepperDecreaseButton />
14 <StepperInput />
15 <StepperIncreaseButton />
16 </StepperContainer>
17 </Stepper>
18 )
19}
20API
The Stepper component is a compound component that consists of multiple parts.
Stepper
The root component that provides context for the stepper.
| Prop | description | Type | Default |
|---|---|---|---|
| children | The stepper content (Container, Buttons, Input) |
|
|
| value | The controlled value of the stepper |
|
|
| defaultValue | The default value of the stepper (uncontrolled) |
|
|
| onValueChange | Callback when the stepper value changes |
|
|
| min | The minimum value allowed |
|
|
| max | The maximum value allowed |
|
|
| type | Whether the value is editable via input or displayed as text |
|
|
StepperContainer
A flex container that wraps the stepper elements.
StepperDecreaseButton
Button to decrease the stepper value by 1. Automatically disabled when value reaches min.
StepperIncreaseButton
Button to increase the stepper value by 1. Automatically disabled when value reaches max.
StepperInput
Displays the current value. When type is 'input', users can edit the value directly.