tab

The tab component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

Author

• @author VasanthRaj [email protected]

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_vertical-tabs

Import component

import { Stepper } from '@licuido-ui/ui_vertical-tabs';

Usage

<VerticalTabs tabList={tabListData} value={value} handleChange={handleChange} />{' '}
      <Box>
          <TabPanel key={index} value={value} index={index}>
            {val}
          </TabPanel>
      </Box>

Image

Sample Code

<VerticalTabs tabList={tabListData} value={value} handleChange={handleChange} />{' '}
      <Box>
          <TabPanel key={index} value={value} index={index}>
            {val}
          </TabPanel>
      </Box>

Props

| Name | Description | Default | Control | | ----------------- | -------------- | ------- | -------- | | className | string | - | - | | tabList | StepData[] | [] | string[] | | sx | SxProps | { } | SxProps | | value | number | 0 | number | | tabStyle | SxProps | - | SxProps | | tabContainerStyle | SxProps | - | SxProps | | indicatorStyle | SxProps | - | SxProps |