# SteppedProgressBar - Circle

*Category:* Components
*Section:* Progress
*Source:* https://uikit.developers.rio.cloud/#/components/steppedProgressBars
*Captured:* 2026-04-27T14:57:50.176Z

## SteppedProgressBar - Circle

### Example: Example 1

1
Label for step 1

2
Label for step 2

Label for final step

Content of page 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Click here to complete this step. There is no other way forward. Previous Next

#### React (tsx)

```tsx
import { type ChangeEvent, useState } from 'react';

import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyText, dummyTextShort } from '../../../utils/data';
import Checkbox from '@rio-cloud/rio-uikit/components/checkbox/Checkbox';

const SteppedProgressBarExampleDefault = () => {
    const [selectedStep, setSelectedStep] = useState(1);
    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();

    const handlePageNext = () => {
        setSelectedStep(selectedStep + 1);
        setDisableFollowingPages(3);
    };

    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber);

    const pageContent = [
        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
        <SecondPageContent
            key='secondStep'
            pageNumber={2}
            onClickNext={handlePageNext}
            onClickPrevious={handlePagePrevious}
            onDisableFollowingPages={handleDisableFollowingPages}
        />,
        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
    ];

    return (
        <div className='steppedProgressBarExample'>
            <div className='margin-bottom-25'>
                <SteppedProgressBar
                    variant='circle'
                    selectedStepNumber={selectedStep}
                    onSelectedChanged={handleSelectedChanged}
                    disableFollowingPages={disableFollowingPages}
                    mobileBreakpoint={false}
                    labels={[
                        { icon: '1', label: 'Label for step 1' },
                        { icon: '2', label: 'Label for step 2' },
                        { icon: <i className='rioglyph rioglyph-ok' />, label: 'Label for final step' },
                    ]}
                />
            </div>
            {pageContent[selectedStep]}
        </div>
    );
};

export default SteppedProgressBarExampleDefault;

type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };

const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar justify-content-end'>
            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
                Next
            </Button>
        </div>
    </div>
);

type SecondPageContentProps = {
    pageNumber: number;
    onClickNext: VoidFunction;
    onClickPrevious: VoidFunction;
    onDisableFollowingPages: (pageNumber: number) => void;
};

const SecondPageContent = (props: SecondPageContentProps) => {
    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;

    const [isAccepted, setIsAccepted] = useState(false);

    const handleNext = () => isAccepted && onClickNext();

    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
        setIsAccepted(event.target.checked);
        if (!event.target.checked) {
            onDisableFollowingPages(pageNumber);
        }
    };

    return (
        <div className='panel panel-default panel-body padding-25'>
            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
            <div className='padding-y-20'>{dummyTextShort}</div>
            <Checkbox
                onChange={handleAccept}
                checked={isAccepted}
                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
            >
                Click here to complete this step. There is no other way forward.
            </Checkbox>
            <div className='btn-toolbar justify-content-between'>
                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                    Previous
                </Button>
                <Button
                    className='btn-icon-right'
                    iconName='rioglyph-chevron-right'
                    onClick={handleNext}
                    disabled={!isAccepted}
                >
                    Next
                </Button>
            </div>
        </div>
    );
};

type ThirdPageContentProps = {
    pageNumber: number;
    onClickPrevious: VoidFunction;
};

const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar'>
            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                Previous
            </Button>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="steppedProgressBarExample">
    <div class="margin-bottom-25">
        <div class="stepped-progress-bar variant-circle nav">
            <a data-rb-event-key="0" class="step-tab nav-link">
                <div class="step-tab-content">
                    <div class="item-icon">1</div>
                    <div class="item-label">Label for step 1</div>
                </div>
            </a>
            <a data-rb-event-key="1" class="step-tab nav-link active">
                <div class="step-tab-content">
                    <div class="item-icon">2</div>
                    <div class="item-label">Label for step 2</div>
                </div>
            </a>
            <a disabled="" data-rb-event-key="2" class="step-tab nav-link disabled">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-ok">
                        </i>
                    </div>
                    <div class="item-label">Label for final step</div>
                </div>
            </a>
        </div>
    </div>
    <div class="panel panel-default panel-body padding-25">
        <div class="text-size-h3">Content of page 2</div>
        <div class="padding-y-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <label class="checkbox padding-15 border rounded margin-bottom-20 " tabindex="0">
            <input type="checkbox" class="padding-15 border rounded margin-bottom-20 ">
            <span class="checkbox-text">
                <span>Click here to complete this step. There is no other way forward.</span>
            </span>
        </label>
        <div class="btn-toolbar justify-content-between">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-chevron-left">
                </span>Previous</button>
            <button type="button" class="btn btn-default btn-component btn-icon-right" disabled="" tabindex="0">
                <span class="rioglyph rioglyph-chevron-right">
                </span>Next</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
| └label | string \| ReactNode | — | The label shown below the step element. |
| └labelClassName | string | — | Additional classes to be set on the label element. |
| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
| selectedStepNumber | number | — | Index of the selected navigation item. |
| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
| className | string | — | Additional classes to be set on the wrapper element. |

## SteppedProgressBar - Rectangle

### Example: Example 2

Label for step 1

Label for step 2

Label for final step

Content of page 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Click here to complete this step. There is no other way forward. Previous Next

#### React (tsx)

```tsx
import { type ChangeEvent, useState } from 'react';

import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyText, dummyTextShort } from '../../../utils/data';

const SteppedProgressBarExampleDefault = () => {
    const [selectedStep, setSelectedStep] = useState(1);
    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();

    const handlePageNext = () => {
        setSelectedStep(selectedStep + 1);
        setDisableFollowingPages(3);
    };

    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);

    const pageContent = [
        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
        <SecondPageContent
            key='secondStep'
            pageNumber={2}
            onClickNext={handlePageNext}
            onClickPrevious={handlePagePrevious}
            onDisableFollowingPages={handleDisableFollowingPages}
        />,
        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
    ];

    return (
        <div className='steppedProgressBarExample'>
            <div className='margin-bottom-25'>
                <SteppedProgressBar
                    variant={SteppedProgressBar.VARIANT_RECTANGLE}
                    selectedStepNumber={selectedStep}
                    onSelectedChanged={handleSelectedChanged}
                    disableFollowingPages={disableFollowingPages}
                    mobileBreakpoint={false}
                    labels={[
                        {
                            icon: <i className='rioglyph rioglyph-document' />,
                            label: 'Label for step 1',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                        {
                            icon: <i className='rioglyph rioglyph-pdf-file' />,
                            label: 'Label for step 2',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                        {
                            icon: <i className='rioglyph rioglyph-print' />,
                            label: 'Label for final step',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                    ]}
                />
            </div>
            {pageContent[selectedStep]}
        </div>
    );
};

export default SteppedProgressBarExampleDefault;

type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };

const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar justify-content-end'>
            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
                Next
            </Button>
        </div>
    </div>
);

type SecondPageContentProps = {
    pageNumber: number;
    onClickNext: VoidFunction;
    onClickPrevious: VoidFunction;
    onDisableFollowingPages: (pageNumber: number) => void;
};

const SecondPageContent = (props: SecondPageContentProps) => {
    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;

    const [isAccepted, setIsAccepted] = useState(false);

    const handleNext = () => isAccepted && onClickNext();

    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
        setIsAccepted(event.target.checked);
        if (!event.target.checked) {
            onDisableFollowingPages(pageNumber);
        }
    };

    return (
        <div className='panel panel-default panel-body padding-25'>
            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
            <div className='padding-y-20'>{dummyTextShort}</div>
            <Checkbox
                onChange={handleAccept}
                checked={isAccepted}
                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
            >
                Click here to complete this step. There is no other way forward.
            </Checkbox>
            <div className='btn-toolbar justify-content-between'>
                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                    Previous
                </Button>
                <Button
                    className='btn-icon-right'
                    iconName='rioglyph-chevron-right'
                    onClick={handleNext}
                    disabled={!isAccepted}
                >
                    Next
                </Button>
            </div>
        </div>
    );
};

type ThirdPageContentProps = {
    pageNumber: number;
    onClickPrevious: VoidFunction;
};

const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar'>
            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                Previous
            </Button>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="steppedProgressBarExample">
    <div class="margin-bottom-25">
        <div class="stepped-progress-bar variant-rectangle nav">
            <a data-rb-event-key="0" class="step-tab flex-1-1-0 nav-link">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-document">
                        </i>
                    </div>
                    <div class="item-label">Label for step 1</div>
                </div>
            </a>
            <a data-rb-event-key="1" class="step-tab flex-1-1-0 nav-link active">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-pdf-file">
                        </i>
                    </div>
                    <div class="item-label">Label for step 2</div>
                </div>
            </a>
            <a disabled="" data-rb-event-key="2" class="step-tab flex-1-1-0 nav-link disabled">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-print">
                        </i>
                    </div>
                    <div class="item-label">Label for final step</div>
                </div>
            </a>
        </div>
    </div>
    <div class="panel panel-default panel-body padding-25">
        <div class="text-size-h3">Content of page 2</div>
        <div class="padding-y-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <label class="checkbox padding-15 border rounded margin-bottom-20 " tabindex="0">
            <input type="checkbox" class="padding-15 border rounded margin-bottom-20 ">
            <span class="checkbox-text">
                <span>Click here to complete this step. There is no other way forward.</span>
            </span>
        </label>
        <div class="btn-toolbar justify-content-between">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-chevron-left">
                </span>Previous</button>
            <button type="button" class="btn btn-default btn-component btn-icon-right" disabled="" tabindex="0">
                <span class="rioglyph rioglyph-chevron-right">
                </span>Next</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
| └label | string \| ReactNode | — | The label shown below the step element. |
| └labelClassName | string | — | Additional classes to be set on the label element. |
| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
| selectedStepNumber | number | — | Index of the selected navigation item. |
| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
| className | string | — | Additional classes to be set on the wrapper element. |

## SteppedProgressBar - Rectangle with custom content

### Example: Example 3

Initial step
Lorem ipsum dolor

Second step
Lorem ipsum dolor

Final step
Lorem ipsum dolor

Content of page 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Click here to complete this step. There is no other way forward. Previous Next

#### React (tsx)

```tsx
import { type ChangeEvent, useState } from 'react';

import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyText, dummyTextShort } from '../../../utils/data';

const SteppedProgressBarExampleDefault = () => {
    const [selectedStep, setSelectedStep] = useState(1);
    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();

    const handlePageNext = () => {
        setSelectedStep(selectedStep + 1);
        setDisableFollowingPages(3);
    };

    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);

    const pageContent = [
        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
        <SecondPageContent
            key='secondStep'
            pageNumber={2}
            onClickNext={handlePageNext}
            onClickPrevious={handlePagePrevious}
            onDisableFollowingPages={handleDisableFollowingPages}
        />,
        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
    ];

    return (
        <div className='steppedProgressBarExample'>
            <div className='margin-bottom-25'>
                <SteppedProgressBar
                    variant={SteppedProgressBar.VARIANT_RECTANGLE}
                    selectedStepNumber={selectedStep}
                    onSelectedChanged={handleSelectedChanged}
                    disableFollowingPages={disableFollowingPages}
                    mobileBreakpoint={false}
                    labels={[
                        {
                            label: (
                                <StepLabelContent
                                    label='Initial step'
                                    description='Lorem ipsum dolor'
                                    icon='rioglyph rioglyph-clipboard'
                                    done={selectedStep > 0}
                                />
                            ),
                            labelClassName: 'width-100pct text-left',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                        {
                            label: (
                                <StepLabelContent
                                    label='Second step'
                                    description='Lorem ipsum dolor'
                                    icon='rioglyph rioglyph-parcel'
                                    done={selectedStep > 1}
                                />
                            ),
                            labelClassName: 'width-100pct text-left',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                        {
                            label: (
                                <StepLabelContent
                                    label='Final step'
                                    description='Lorem ipsum dolor'
                                    icon='rioglyph rioglyph-print'
                                    done={selectedStep > 2}
                                />
                            ),
                            labelClassName: 'width-100pct text-left',
                            labelWrapperClassName: 'flex-1-1-0',
                        },
                    ]}
                />
            </div>
            {pageContent[selectedStep]}
        </div>
    );
};

export default SteppedProgressBarExampleDefault;

type StepLabelContentProps = {
    label: string;
    description: string;
    icon: string;
    done: boolean;
};

const StepLabelContent = ({ label, description, icon, done }: StepLabelContentProps) => (
    <div className='display-flex align-items-center gap-10'>
        <span className={`${done ? 'rioglyph rioglyph-ok text-color-success' : icon}  margin-x-10 text-size-h2`} />
        <div>
            <div className='text-colot-darkest text-medium'>{label}</div>
            <div className='text-color-darker'>{description}</div>
        </div>
    </div>
);

type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };

const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar justify-content-end'>
            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
                Next
            </Button>
        </div>
    </div>
);

type SecondPageContentProps = {
    pageNumber: number;
    onClickNext: VoidFunction;
    onClickPrevious: VoidFunction;
    onDisableFollowingPages: (pageNumber: number) => void;
};

const SecondPageContent = (props: SecondPageContentProps) => {
    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;

    const [isAccepted, setIsAccepted] = useState(false);

    const handleNext = () => isAccepted && onClickNext();

    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
        setIsAccepted(event.target.checked);
        if (!event.target.checked) {
            onDisableFollowingPages(pageNumber);
        }
    };

    return (
        <div className='panel panel-default panel-body padding-25'>
            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
            <div className='padding-y-20'>{dummyTextShort}</div>
            <Checkbox
                onChange={handleAccept}
                checked={isAccepted}
                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
            >
                Click here to complete this step. There is no other way forward.
            </Checkbox>
            <div className='btn-toolbar justify-content-between'>
                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                    Previous
                </Button>
                <Button
                    className='btn-icon-right'
                    iconName='rioglyph-chevron-right'
                    onClick={handleNext}
                    disabled={!isAccepted}
                >
                    Next
                </Button>
            </div>
        </div>
    );
};

type ThirdPageContentProps = {
    pageNumber: number;
    onClickPrevious: VoidFunction;
};

const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar'>
            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                Previous
            </Button>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="steppedProgressBarExample">
    <div class="margin-bottom-25">
        <div class="stepped-progress-bar variant-rectangle nav">
            <a data-rb-event-key="0" class="step-tab flex-1-1-0 nav-link">
                <div class="step-tab-content">
                    <div class="item-icon">
                    </div>
                    <div class="item-label width-100pct text-left">
                        <div class="display-flex align-items-center gap-10">
                            <span class="rioglyph rioglyph-ok text-color-success  margin-x-10 text-size-h2">
                            </span>
                            <div>
                                <div class="text-colot-darkest text-medium">Initial step</div>
                                <div class="text-color-darker">Lorem ipsum dolor</div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a data-rb-event-key="1" class="step-tab flex-1-1-0 nav-link active">
                <div class="step-tab-content">
                    <div class="item-icon">
                    </div>
                    <div class="item-label width-100pct text-left">
                        <div class="display-flex align-items-center gap-10">
                            <span class="rioglyph rioglyph-parcel  margin-x-10 text-size-h2">
                            </span>
                            <div>
                                <div class="text-colot-darkest text-medium">Second step</div>
                                <div class="text-color-darker">Lorem ipsum dolor</div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a disabled="" data-rb-event-key="2" class="step-tab flex-1-1-0 nav-link disabled">
                <div class="step-tab-content">
                    <div class="item-icon">
                    </div>
                    <div class="item-label width-100pct text-left">
                        <div class="display-flex align-items-center gap-10">
                            <span class="rioglyph rioglyph-print  margin-x-10 text-size-h2">
                            </span>
                            <div>
                                <div class="text-colot-darkest text-medium">Final step</div>
                                <div class="text-color-darker">Lorem ipsum dolor</div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="panel panel-default panel-body padding-25">
        <div class="text-size-h3">Content of page 2</div>
        <div class="padding-y-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <label class="checkbox padding-15 border rounded margin-bottom-20 " tabindex="0">
            <input type="checkbox" class="padding-15 border rounded margin-bottom-20 ">
            <span class="checkbox-text">
                <span>Click here to complete this step. There is no other way forward.</span>
            </span>
        </label>
        <div class="btn-toolbar justify-content-between">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-chevron-left">
                </span>Previous</button>
            <button type="button" class="btn btn-default btn-component btn-icon-right" disabled="" tabindex="0">
                <span class="rioglyph rioglyph-chevron-right">
                </span>Next</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
| └label | string \| ReactNode | — | The label shown below the step element. |
| └labelClassName | string | — | Additional classes to be set on the label element. |
| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
| selectedStepNumber | number | — | Index of the selected navigation item. |
| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
| className | string | — | Additional classes to be set on the wrapper element. |

## SteppedProgressBar - Road Sign

### Example: Example 4

Label for step 1

Label for step 2

Label for final step

Content of page 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Click here to complete this step. There is no other way forward. Previous Next

#### React (tsx)

```tsx
import { type ChangeEvent, useState } from 'react';

import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyText, dummyTextShort } from '../../../utils/data';

const SteppedProgressBarExampleDefault = () => {
    const [selectedStep, setSelectedStep] = useState(1);
    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();

    const handlePageNext = () => {
        setSelectedStep(selectedStep + 1);
        setDisableFollowingPages(3);
    };

    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);

    const pageContent = [
        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
        <SecondPageContent
            key='secondStep'
            pageNumber={2}
            onClickNext={handlePageNext}
            onClickPrevious={handlePagePrevious}
            onDisableFollowingPages={handleDisableFollowingPages}
        />,
        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
    ];

    return (
        <div className='steppedProgressBarExample'>
            <div className='margin-bottom-25'>
                <SteppedProgressBar
                    variant={SteppedProgressBar.VARIANT_ROADSIGN}
                    selectedStepNumber={selectedStep}
                    onSelectedChanged={handleSelectedChanged}
                    disableFollowingPages={disableFollowingPages}
                    mobileBreakpoint={false}
                    labels={[
                        {
                            icon: <i className='rioglyph rioglyph-document' />,
                            label: 'Label for step 1',
                        },
                        {
                            icon: <i className='rioglyph rioglyph-pdf-file' />,
                            label: 'Label for step 2',
                        },
                        {
                            icon: <i className='rioglyph rioglyph-print' />,
                            label: 'Label for final step',
                        },
                    ]}
                />
            </div>
            {pageContent[selectedStep]}
        </div>
    );
};

export default SteppedProgressBarExampleDefault;

type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };

const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar justify-content-end'>
            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
                Next
            </Button>
        </div>
    </div>
);

type SecondPageContentProps = {
    pageNumber: number;
    onClickNext: VoidFunction;
    onClickPrevious: VoidFunction;
    onDisableFollowingPages: (pageNumber: number) => void;
};

const SecondPageContent = (props: SecondPageContentProps) => {
    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;

    const [isAccepted, setIsAccepted] = useState(false);

    const handleNext = () => isAccepted && onClickNext();

    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
        setIsAccepted(event.target.checked);
        if (!event.target.checked) {
            onDisableFollowingPages(pageNumber);
        }
    };

    return (
        <div className='panel panel-default panel-body padding-25'>
            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
            <div className='padding-y-20'>{dummyTextShort}</div>
            <Checkbox
                onChange={handleAccept}
                checked={isAccepted}
                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
            >
                Click here to complete this step. There is no other way forward.
            </Checkbox>
            <div className='btn-toolbar justify-content-between'>
                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                    Previous
                </Button>
                <Button
                    className='btn-icon-right'
                    iconName='rioglyph-chevron-right'
                    onClick={handleNext}
                    disabled={!isAccepted}
                >
                    Next
                </Button>
            </div>
        </div>
    );
};

type ThirdPageContentProps = {
    pageNumber: number;
    onClickPrevious: VoidFunction;
};

const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
    <div className='panel panel-default panel-body padding-25'>
        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
        <div className='padding-y-25'>{dummyText}</div>
        <div className='btn-toolbar'>
            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
                Previous
            </Button>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="steppedProgressBarExample">
    <div class="margin-bottom-25">
        <div class="stepped-progress-bar variant-roadsign nav">
            <a data-rb-event-key="0" class="step-tab nav-link">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-document">
                        </i>
                    </div>
                    <div class="item-label">Label for step 1</div>
                </div>
            </a>
            <a data-rb-event-key="1" class="step-tab nav-link active">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-pdf-file">
                        </i>
                    </div>
                    <div class="item-label">Label for step 2</div>
                </div>
            </a>
            <a disabled="" data-rb-event-key="2" class="step-tab nav-link disabled">
                <div class="step-tab-content">
                    <div class="item-icon">
                        <i class="rioglyph rioglyph-print">
                        </i>
                    </div>
                    <div class="item-label">Label for final step</div>
                </div>
            </a>
        </div>
    </div>
    <div class="panel panel-default panel-body padding-25">
        <div class="text-size-h3">Content of page 2</div>
        <div class="padding-y-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <label class="checkbox padding-15 border rounded margin-bottom-20 " tabindex="0">
            <input type="checkbox" class="padding-15 border rounded margin-bottom-20 ">
            <span class="checkbox-text">
                <span>Click here to complete this step. There is no other way forward.</span>
            </span>
        </label>
        <div class="btn-toolbar justify-content-between">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-chevron-left">
                </span>Previous</button>
            <button type="button" class="btn btn-default btn-component btn-icon-right" disabled="" tabindex="0">
                <span class="rioglyph rioglyph-chevron-right">
                </span>Next</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |
| └icon | string \| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |
| └label | string \| ReactNode | — | The label shown below the step element. |
| └labelClassName | string | — | Additional classes to be set on the label element. |
| └labelWrapperClassName | string | — | Additional classes to be set on the label wrapping element. |
| selectedStepNumber | number | — | Index of the selected navigation item. |
| onSelectedChanged | (selectedKey: number) => void | — | Called with the new selected index after the user clicked a nav item. |
| variant | 'circle' \| 'rectangle' \| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |
| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |
| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |
| className | string | — | Additional classes to be set on the wrapper element. |