v2.1.8
/
Use our Nuxt starter

Stepper

A stepper component to visualize progress in a multistep workflow.
GitHub
Demo
Nuxt UI

Usage

Use the Stepper component to display a list of items in a stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

Items

Use the items prop as an array of objects with the following properties:

  • title?: string
  • description?: AvatarProps
  • content?: string
  • icon?: IconComponent
  • value?: string | number
  • disabled?: boolean
  • slot?: string
  • class?: any
  • b24ui?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }
Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}
Click on the items to navigate through the steps.

Color

Use the color prop to change the color of the Stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the Stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

Orientation

Use the orientation prop to change the orientation of the Stepper. Defaults to horizontal.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable navigation through the steps.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
{
  "wait": "Loading client-side content..."
}
This can be useful when you want to force navigation with controls.

Examples

With controls

You can add additional controls for the stepper using buttons.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Address
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

Control active item

You can control the active item by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to the index.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
This is the Address step.
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

With content slot

Use the #content slot to customize the content of each item.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
This is the Address step.
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

  • #{{ item.slot }}
Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Address
Step 0 of 0
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

itemsStepperItem[]
size'md' "xs" | "sm" | "md" | "lg" | "xl"
color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
orientation'horizontal' "horizontal" | "vertical"

The orientation of the stepper.

defaultValue string | number

The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.

disabledboolean
lineartrueboolean

Whether or not the steps must be completed in order.

modelValue string | number
b24ui { root?: ClassNameValue; header?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; trigger?: ClassNameValue; indicator?: ClassNameValue; icon?: ClassNameValue; separator?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; content?: ClassNameValue; }

Slots

Slot Type
indicator{ item: StepperItem; b24ui: object; }
title{ item: StepperItem; }
description{ item: StepperItem; }
content{ item: StepperItem; }

Emits

Event Type
next[value: StepperItem]
prev[value: StepperItem]
update:modelValue[value: string | number | undefined]

Expose

You can access the typed component instance using useTemplateRef.

<script setup lang="ts">
const stepper = useTemplateRef('stepper')
</script>

<template>
  <B24Stepper ref="stepper" />
</template>

This will give you access to the following:

NameType
next() => void
prev() => void
hasNextRef<boolean>
hasPrevRef<boolean>

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    stepper: {
      slots: {
        root: 'flex gap-4',
        header: 'flex',
        item: 'group text-center relative w-full',
        container: 'relative',
        trigger: 'cursor-pointer rounded-full font-(--ui-font-weight-medium) text-center align-middle flex items-center justify-center group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active) focus-visible:outline-(--b24ui-background-active) bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) focus-visible:outline-2 focus-visible:outline-offset-2',
        indicator: 'flex items-center justify-center size-full',
        icon: 'shrink-0',
        separator: 'absolute rounded-(--ui-border-radius-circle) group-data-[disabled]:opacity-75 group-data-[state=completed]:bg-(--b24ui-background-active) bg-(--ui-color-base-6)',
        wrapper: '',
        title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color)',
        description: 'text-(--b24ui-typography-description-color) text-wrap',
        content: 'size-full'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex-col',
            container: 'flex justify-center',
            separator: 'top-[calc(50%-2px)] h-0.5',
            wrapper: 'mt-1'
          },
          vertical: {
            header: 'flex-col gap-4',
            item: 'flex text-start',
            separator: 'start-[calc(50%-1px)] -bottom-[10px] w-0.5'
          }
        },
        size: {
          xs: {
            trigger: 'size-[28px] text-(length:--ui-font-size-sm)',
            icon: 'size-[26px]',
            title: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)',
            wrapper: 'mt-[6px]'
          },
          sm: {
            trigger: 'size-[32px] text-(length:--ui-font-size-md)',
            icon: 'size-[28px]',
            title: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-sm)',
            wrapper: 'mt-[8px]'
          },
          md: {
            trigger: 'size-[42px] text-(length:--ui-font-size-xl)',
            icon: 'size-[38px]',
            title: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-md)',
            wrapper: 'mt-[10px]'
          },
          lg: {
            trigger: 'size-[48px] text-(length:--ui-font-size-2xl)',
            icon: 'size-[44px]',
            title: 'text-(length:--ui-font-size-xl)',
            description: 'text-(length:--ui-font-size-xl)',
            wrapper: 'mt-[12px]'
          },
          xl: {
            trigger: 'size-[60px] text-(length:--ui-font-size-3xl)',
            icon: 'size-[56px]',
            title: 'text-(length:--ui-font-size-2xl)',
            description: 'text-(length:--ui-font-size-2xl)',
            wrapper: 'mt-[14px]'
          }
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            separator: 'start-[calc(50%+16px)] end-[calc(-50%+16px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            separator: 'start-[calc(50%+20px)] end-[calc(-50%+20px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            separator: 'start-[calc(50%+28px)] end-[calc(-50%+28px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            separator: 'start-[calc(50%+32px)] end-[calc(-50%+32px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            separator: 'start-[calc(50%+36px)] end-[calc(-50%+36px)]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            separator: 'top-[30px]',
            item: 'gap-1.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            separator: 'top-[38px]',
            item: 'gap-2'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            separator: 'top-[46px]',
            item: 'gap-2.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            separator: 'top-[54px]',
            item: 'gap-3'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            separator: 'top-[62px]',
            item: 'gap-3.5'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        stepper: {
          slots: {
            root: 'flex gap-4',
            header: 'flex',
            item: 'group text-center relative w-full',
            container: 'relative',
            trigger: 'cursor-pointer rounded-full font-(--ui-font-weight-medium) text-center align-middle flex items-center justify-center group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active) focus-visible:outline-(--b24ui-background-active) bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) focus-visible:outline-2 focus-visible:outline-offset-2',
            indicator: 'flex items-center justify-center size-full',
            icon: 'shrink-0',
            separator: 'absolute rounded-(--ui-border-radius-circle) group-data-[disabled]:opacity-75 group-data-[state=completed]:bg-(--b24ui-background-active) bg-(--ui-color-base-6)',
            wrapper: '',
            title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color)',
            description: 'text-(--b24ui-typography-description-color) text-wrap',
            content: 'size-full'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex-col',
                container: 'flex justify-center',
                separator: 'top-[calc(50%-2px)] h-0.5',
                wrapper: 'mt-1'
              },
              vertical: {
                header: 'flex-col gap-4',
                item: 'flex text-start',
                separator: 'start-[calc(50%-1px)] -bottom-[10px] w-0.5'
              }
            },
            size: {
              xs: {
                trigger: 'size-[28px] text-(length:--ui-font-size-sm)',
                icon: 'size-[26px]',
                title: 'text-(length:--ui-font-size-xs)',
                description: 'text-(length:--ui-font-size-xs)',
                wrapper: 'mt-[6px]'
              },
              sm: {
                trigger: 'size-[32px] text-(length:--ui-font-size-md)',
                icon: 'size-[28px]',
                title: 'text-(length:--ui-font-size-sm)',
                description: 'text-(length:--ui-font-size-sm)',
                wrapper: 'mt-[8px]'
              },
              md: {
                trigger: 'size-[42px] text-(length:--ui-font-size-xl)',
                icon: 'size-[38px]',
                title: 'text-(length:--ui-font-size-md)',
                description: 'text-(length:--ui-font-size-md)',
                wrapper: 'mt-[10px]'
              },
              lg: {
                trigger: 'size-[48px] text-(length:--ui-font-size-2xl)',
                icon: 'size-[44px]',
                title: 'text-(length:--ui-font-size-xl)',
                description: 'text-(length:--ui-font-size-xl)',
                wrapper: 'mt-[12px]'
              },
              xl: {
                trigger: 'size-[60px] text-(length:--ui-font-size-3xl)',
                icon: 'size-[56px]',
                title: 'text-(length:--ui-font-size-2xl)',
                description: 'text-(length:--ui-font-size-2xl)',
                wrapper: 'mt-[14px]'
              }
            },
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              size: 'xs',
              class: {
                separator: 'start-[calc(50%+16px)] end-[calc(-50%+16px)]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'sm',
              class: {
                separator: 'start-[calc(50%+20px)] end-[calc(-50%+20px)]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'md',
              class: {
                separator: 'start-[calc(50%+28px)] end-[calc(-50%+28px)]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'lg',
              class: {
                separator: 'start-[calc(50%+32px)] end-[calc(-50%+32px)]'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xl',
              class: {
                separator: 'start-[calc(50%+36px)] end-[calc(-50%+36px)]'
              }
            },
            {
              orientation: 'vertical',
              size: 'xs',
              class: {
                separator: 'top-[30px]',
                item: 'gap-1.5'
              }
            },
            {
              orientation: 'vertical',
              size: 'sm',
              class: {
                separator: 'top-[38px]',
                item: 'gap-2'
              }
            },
            {
              orientation: 'vertical',
              size: 'md',
              class: {
                separator: 'top-[46px]',
                item: 'gap-2.5'
              }
            },
            {
              orientation: 'vertical',
              size: 'lg',
              class: {
                separator: 'top-[54px]',
                item: 'gap-3'
              }
            },
            {
              orientation: 'vertical',
              size: 'xl',
              class: {
                separator: 'top-[62px]',
                item: 'gap-3.5'
              }
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'air-primary'
          }
        }
      }
    })
  ]
})

Pagination

A navigation component with buttons or links for pagination.

Tabs

A collection of tab panels shown individually.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24