Stepper
React Bootstrap 5 Stepper / Wizard component
Responsive stepper built with Bootstrap 5. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more.
Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.
In this documentation, you can find examples of form wizard, vertical stepper, horizontal stepper, multi step form, mobile stepper, validation & more.
Note: Read the API tab to find all available options and advanced customization
Basic example
You can automatically initialize the stepper component using
MDBStepper
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Change steps using external elements
To go to the next or previous step, you can use the useState
hook like in the example below.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBBtn
} from 'mdb-react-ui-kit';
export default function App() {
const [btnStepper, setBtnStepper] = useState(1);
const [prevBtnStepper, setPrevBtnStepper] = useState(0);
return (
<div className='w-100'>
<div className='mb-3'>
<MDBBtn
onClick={() => {
btnStepper !== 1 && setPrevBtnStepper(btnStepper);
btnStepper >= 2 && setBtnStepper(btnStepper - 1);
}}
>
prev
</MDBBtn>
<MDBBtn
onClick={() => {
1 !== btnStepper && setPrevBtnStepper(btnStepper);
setBtnStepper(1);
}}
>
step1
</MDBBtn>
<MDBBtn
onClick={() => {
2 !== btnStepper && setPrevBtnStepper(btnStepper);
setBtnStepper(2);
}}
>
step2
</MDBBtn>
<MDBBtn
onClick={() => {
3 !== btnStepper && setPrevBtnStepper(btnStepper);
setBtnStepper(3);
}}
>
step3
</MDBBtn>
<MDBBtn
onClick={() => {
btnStepper !== 3 && setPrevBtnStepper(btnStepper);
btnStepper <= 2 && setBtnStepper(btnStepper + 1);
}}
>
next
</MDBBtn>
</div>
<div>
<MDBStepper
outerState={btnStepper}
setOuterState={setBtnStepper}
prevOuterState={prevBtnStepper}
setPrevOuterState={setPrevBtnStepper}
>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
</div>
</div>
);
}
Linear stepper
If you want to use basic validation before proceeding to the next step you can set
linear property
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBStepperForm,
MDBInput
} from 'mdb-react-ui-kit';
export default function App() {
const [formValues, setFormValues] = useState({ form1: '', form2: '', form3: '' });
const onChange = (e: any) => {
setFormValues({ ...formValues, [e.target.name]: e.target.value });
};
return (
<MDBStepper linear>
<MDBStepperForm>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
<MDBInput
value={formValues.form1}
name='form1'
onChange={onChange}
validation='invalid'
label='step 1'
id='linear-stepper-input-1'
invalid
required
/>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
<MDBInput
value={formValues.form2}
name='form2'
onChange={onChange}
validation='invalid'
label='step 2'
id='linear-stepper-input-2'
invalid
required
/>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
<MDBInput
value={formValues.form3}
name='form3'
onChange={onChange}
validation='invalid'
label='step 3'
id='linear-stepper-input-3'
invalid
required
/>
<MDBBtn className='mt-3' type='submit'>
Submit
</MDBBtn>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
No editable stepper
You can set noEditable property to prevent you from editing the
completed step again
-
step1
-
step2
-
step3
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBValidation,
MDBInput,
} from 'mdb-react-ui-kit';
export default function App() {
const [formValues, setFormValues] = useState({ form1: '', form2: '', form3: '' });
const onChange = (e: any) => {
setFormValues({ ...formValues, [e.target.name]: e.target.value });
};
return (
<MDBStepper noEditable>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form1}
name='form1'
onChange={onChange}
validation='invalid'
label='step 1'
id='noedit-stepper-input-1'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form2}
name='form2'
onChange={onChange}
validation='invalid'
label='step 2'
id='noedit-stepper-input-2'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form3}
name='form3'
onChange={onChange}
validation='invalid'
label='step 3'
id='noedit-stepper-input-3'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Vertical stepper
Set vertical to use the vertical view
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper vertical>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Mobile stepper
Set mobile to use mobile view
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper mobile>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Mobile stepper progress bar
if the stepper contains more than 4 steps, the progress bar will be displayed by default
instead of dots. You can edit the step limit with the
mobileProgress property
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper mobile mobileProgress>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={4}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={5}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={6}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={7}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={8}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={9}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={10}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={11}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={12}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Optional step
You can mark a step as optional by adding
data-mdb-stepper-optional={true} to it
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
import React from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBStepper>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2} data-mdb-optional={true}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
Maecenas malesuada elit lectus felis, malesuada ultricies.
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Custom icons
if you want to use an icon instead of a step number you can do it by setting
MDBStepperHead icon property
-
step1
-
step2
-
step3
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBValidation,
MDBInput,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
const [formValues, setFormValues] = useState({ form1: '', form2: '', form3: '' });
const onChange = (e: any) => {
setFormValues({ ...formValues, [e.target.name]: e.target.value });
};
return (
<MDBStepper>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon={<MDBIcon fas icon='user' />} text='step1' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form1}
name='form1'
onChange={onChange}
id='custom-icon-input-1'
label='step 1'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2} data-mdb-optional={true}>
<MDBStepperHead icon={<MDBIcon fas icon='envelope' />} text='step2' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form2}
name='form2'
onChange={onChange}
id='custom-icon-input-2'
label='step 2'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead
icon={<span className='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>}
text='step3'
/>
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form3}
name='form3'
onChange={onChange}
id='custom-icon-input-3'
label='step 3'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
Form wizard
An example of so-called "Form wizard" with multiple inputs on each step.
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBStepperForm,
MDBInput,
MDBCheckbox,
MDBBtn,
} from 'mdb-react-ui-kit';
export default function App() {
const [wizardForms, setWizardForms] = useState({
name: '',
last: '',
nickname: '',
company: '',
addres: '',
email: '',
phone: '',
additional: '',
});
const onChangeWizard = (e: any) => {
setWizardForms({ ...wizardForms, [e.target.name]: e.target.value });
};
return (
<MDBStepper formWizard linear>
<MDBStepperForm>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon='1' text='step1' />
<MDBStepperContent>
<MDBInput
value={wizardForms.name}
name='name'
wrapperClass='mb-4'
onChange={onChangeWizard}
id='stepper-form-first-name'
label='First name (required)'
validation='invalid'
invalid
required
/>
<MDBInput
value={wizardForms.last}
name='last'
wrapperClass='mb-4'
onChange={onChangeWizard}
id='stepper-form-last-name'
label='Last name (required)'
validation='invalid'
invalid
required
/>
<MDBInput
value={wizardForms.nickname}
wrapperClass='mb-4'
name='nickname'
onChange={onChangeWizard}
id='stepper-form-nick'
label='Nickname (optional)'
/>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon='2' text='step2' />
<MDBStepperContent>
<MDBInput
value={wizardForms.company}
name='company'
wrapperClass='mb-4'
onChange={onChangeWizard}
id='form6Example3'
label='Company name (required)'
validation='invalid'
invalid
required
/>
<MDBInput
value={wizardForms.addres}
name='addres'
wrapperClass='mb-4'
onChange={onChangeWizard}
id='form6Example4'
label='Address (required)'
validation='invalid'
invalid
required
/>
<MDBInput
value={wizardForms.email}
type='email'
wrapperClass='mb-4'
name='email'
onChange={onChangeWizard}
id='form6Example5'
label='Email (required)'
validation='invalid'
invalid
required
/>
<MDBInput
value={wizardForms.phone}
type='number'
className='mb-4'
name='phone'
onChange={onChangeWizard}
id='form6Example6'
label='Phone (optional)'
validation='invalid'
invalid
/>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead icon='3' text='step3' />
<MDBStepperContent>
<MDBInput
textarea
rows={4}
value={wizardForms.additional}
name='additional'
onChange={onChangeWizard}
id='form6Example7'
label='Additional information'
/>
<div className='form-check d-flex justify-content-center mb-4'>
<MDBCheckbox className='me-2' id='form6Example8' label='Create an account?' defaultChecked />
</div>
<MDBBtn color='success' block type='submit' className='mb-4'>
Place order
</MDBBtn>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepperForm>
</MDBStepper>
);
}
Toggle to vertical or mobile on smaller screens
If you want to change the view from horizontal to vertical or mobile with smaller screens you
can use the
verticalBreakpoint and
mobileBreakpoint property specifying the number of pixels at
which the stepper should change to vertical or mobile. You can resize the browser window to
test it.
-
step1
-
step2
-
step3
import React, { useState } from 'react';
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBValidation,
MDBInput,
MDBIcon,
} from 'mdb-react-ui-kit';
export default function App() {
const [formValues, setFormValues] = useState({ form1: '', form2: '', form3: '' });
const onChange = (e: any) => {
setFormValues({ ...formValues, [e.target.name]: e.target.value });
};
return (
<MDBStepper verticalBreakpoint={768} mobileBreakpoint={400}>
<MDBStepperStep itemId={1}>
<MDBStepperHead icon={<MDBIcon fas icon='user' />} text='step1' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form1}
name='form1'
onChange={onChange}
id='toggle-to-vertical-input-1'
label='step 1'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={2}>
<MDBStepperHead icon={<MDBIcon fas icon='envelope' />} text='step2' />
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form2}
name='form2'
onChange={onChange}
id='toggle-to-vertical-input-2'
label='step 2'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
<MDBStepperStep itemId={3}>
<MDBStepperHead
icon={<span className='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>}
text='step3'
/>
<MDBStepperContent>
<MDBValidation>
<MDBInput
value={formValues.form3}
name='form3'
onChange={onChange}
id='toggle-to-vertical-input-3'
label='step 3'
validation='invalid'
invalid
required
/>
</MDBValidation>
</MDBStepperContent>
</MDBStepperStep>
</MDBStepper>
);
}
If you want to support our friends from Tailwind Elements you can also check out the Tailwind stepper documentation.
Stepper - API
Import
import {
MDBStepper,
MDBStepperStep,
MDBStepperHead,
MDBStepperContent,
MDBStepperForm,
} from 'mdb-react-ui-kit';
Properties
MDBStepper
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
String | '' |
Add custom classes to MDBStepper element |
<MDBStepper className="class" />
|
linear
|
Boolean | false |
Set to true to use the linear stepper |
<MDBStepper linear />
|
formWizard
|
Boolean | false |
Set to true to use the form wizard stepper |
<MDBStepper formWizard />
|
noEditable
|
Boolean | false |
Set to true to block editing of the completed step |
<MDBStepper noEditable />
|
mobile
|
false | - |
Set to true to use the mobile stepper |
<MDBStepper mobile />
|
mobileProgress
|
Boolean | false |
Set to true to use the mobile progress stepper |
<MDBStepper mobile mobileProgress />
|
mobileBreakpoint
|
Number | 0 |
Set the resolution below which the stepper will switch to mobile |
<MDBStepper mobileBreakpoint={500} />
|
outerState
|
Number | - |
Stepper state |
<MDBStepper outerState={state} />
|
setOuterState
|
Function | - |
Set the stepper state |
<MDBStepper setOuterState={setState} />
|
prevState
|
Number | - |
Stepper previous state |
<MDBStepper prevState={state} />
|
setPrevState
|
Function | - |
Set the stepper previous state |
<MDBStepper setPrevState={setState} />
|
vertical
|
false | - |
Set to true to use the vertical stepper |
<MDBStepper vertical />
|
verticalBreakpoint
|
Number | 0 |
Set the resolution below which the stepper will switch to vertical |
<MDBStepper verticalBreakpoint={700} />
|
tag
|
String | 'ul' |
Defines tag of the MDBStepper element |
<MDBStepper tag="section" />
|
MDBStepperStep
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
String | '' |
Add custom classes to MDBStepperStep element |
<MDBStepperStep className="class" />
|
itemId
|
Number | - |
Sets element id number |
<MDBStepperStep itemId={1} />
|
tag
|
String | 'li' |
Defines tag of the MDBStepperStep element |
<MDBStepperStep tag="section" />
|
MDBStepperHead
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
String | '' |
Add custom classes to MDBStepperHead element |
<MDBStepperHead className="class" />
|
icon
|
String|Element | - |
Defines stepper head icon |
<MDBStepperHead icon="1" />
|
text
|
String | - |
Set the text displayed in the stepper head |
<MDBStepperHead text="example text" />
|
tag
|
String | 'div' |
Defines tag of the MDBStepperHead element |
<MDBStepperHead tag="section" />
|
MDBStepperContent
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
String | '' |
Add custom classes to MDBStepperContent element
|
<MDBStepperContent className="class" />
|
tag
|
String | 'ul' |
Defines tag of the MDBStepperContent element |
<MDBStepperContent tag="section" />
|
MDBStepperForm
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
String | '' |
Add custom classes to MDBStepperForm element |
<MDBStepperForm className="class" />
|