Stepper
Stepper UI Component
Installation
npm i @synerise/ds-stepper
or
yarn add @synerise/ds-stepper
Usage
import Stepper from '@synerise/ds-stepper'
<Stepper orientation="vertical">
<Stepper.Step stepNumber="1" label="Define">
<Radio.Group>
<Radio name="radio" value="radio" description="Description">
Radio
</Radio>
<Radio name="radio" value="tv" description="Description">
TV
</Radio>
</Radio.Group>
</Stepper.Step>
</Stepper>
Demo
API
Stepper
Property | Description | Type | Default |
---|---|---|---|
orientation | Defines direction of Stepper steps | horizontal \ vertical | horizontal |
Stepper.Step
Property | Description | Type | Default |
---|---|---|---|
active | Whether current step is active | boolean | false |
done | Whether step was completed | boolean | false |
label | Label of step | string \ React.ReactNode | - |
onClick | Function called when user clicks on step | () => void | - |
stepNumber | Step number | number | - |
tooltip | Shows icon with tooltip if step is active | string \ React.ReactNode | - |
validated | Whether stop has some errors | boolean | false |