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

PropertyDescriptionTypeDefault
orientationDefines direction of Stepper stepshorizontal \ verticalhorizontal

Stepper.Step

PropertyDescriptionTypeDefault
activeWhether current step is activebooleanfalse
doneWhether step was completedbooleanfalse
labelLabel of stepstring \ React.ReactNode-
onClickFunction called when user clicks on step() => void-
stepNumberStep numbernumber-
tooltipShows icon with tooltip if step is activestring \ React.ReactNode-
validatedWhether stop has some errorsbooleanfalse