v2.1.16
/
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
<script setup lang="ts">
const items = ref([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper :items="items" />
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper :items="items" class="w-full" />
</template>
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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper color="air-primary-alert" :items="items" class="w-full" />
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper size="xl" :items="items" class="w-full" />
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper orientation="vertical" :items="items" class="w-full" />
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper disabled :items="items" />
</template>
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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import ArrowLeftLIcon from '@bitrix24/b24icons-vue/outline/ArrowLeftLIcon'
import ArrowRightLIcon from '@bitrix24/b24icons-vue/outline/ArrowRightLIcon'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]

const stepper = useTemplateRef('stepper')
</script>

<template>
  <div class="w-full">
    <B24Stepper ref="stepper" :items="items">
      <template #content="{ item }">
        <Placeholder class="h-[200px]">
          {{ item.title }}
        </Placeholder>
      </template>
    </B24Stepper>

    <div class="flex gap-2 justify-between mt-4">
      <B24Button
        :disabled="!stepper?.hasPrev"
        label="Prev"
        @click="stepper?.prev()"
      >
        <template #leading>
          <ArrowLeftLIcon class="text-(--ui-btn-color) size-(--ui-btn-icon-size)" />
        </template>
      </B24Button>

      <B24Button
        :disabled="!stepper?.hasNext"
        label="Next"
        @click="stepper?.next()"
      >
        <template #trailing>
          <ArrowRightLIcon class="text-(--ui-btn-color) size-(--ui-btn-icon-size)" />
        </template>
      </B24Button>
    </div>
  </div>
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import { onMounted, ref } from 'vue'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]

const active = ref(0)

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = (active.value + 1) % items.length
  }, 2000)
})
</script>

<template>
  <B24Stepper v-model="active" :items="items" class="w-full">
    <template #content="{ item }">
      <Placeholder class="h-[200px]">
        This is the {{ item?.title }} step.
      </Placeholder>
    </template>
  </B24Stepper>
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]
</script>

<template>
  <B24Stepper ref="stepper" :items="items" class="w-full">
    <template #content="{ item }">
      <Placeholder class="h-[200px]">
        This is the {{ item?.title }} step.
      </Placeholder>
    </template>
  </B24Stepper>
</template>

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
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon,
    slot: 'address'
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon,
    slot: 'shipping'
  }, {
    title: 'Checkout',
    description: 'Confirm your order',
    slot: 'checkout'
  }
]
</script>

<template>
  <B24Stepper :items="items" class="w-full">
    <template #address>
      <Placeholder class="h-[200px]">
        Address
      </Placeholder>
    </template>

    <template #shipping>
      <Placeholder class="h-[200px]">
        Shipping
      </Placeholder>
    </template>

    <template #checkout>
      <Placeholder class="h-[200px]">
        Checkout
      </Placeholder>
    </template>
  </B24Stepper>
</template>

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