`<c-steps>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-steps v-model="step">
      <c-step>Choose resources</c-step>

      <c-step>Billing details</c-step>

      <c-step>Review</c-step>

      <c-step>Confirmation</c-step>
    </c-steps>

    <div class="example-row">
      <c-button outlined :disabled.prop="step === 1" @click="step--">
        Previous
      </c-button>

      <c-button :disabled.prop="step === 5" @click="step++">Next</c-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const step = ref(1);
</script>

Basic · c-step

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-steps value="3">
      <c-step>Choose resources</c-step>

      <c-step>Billing details</c-step>

      <c-step>Review</c-step>

      <c-step>Confirmation</c-step>
    </c-steps>
  </div>
</template>

API reference

`<c-steps>`

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`number \| string`	`1`	Value of the accordion (current step number)

Slots

Slot	Description
`default`	Default slot

CSS parts

Style from outside with c-steps::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The flex row laying out the projected c-step children and their dividers
`label`	The current step's label shown below the row in the collapsed (mobile) layout

`<c-step>`

Properties

Property	Attribute	Type	Default	Description
`complete`	`complete`	`boolean`	`false`	Mark step as complete
`current`	`current`	`boolean`	`false`	Mark step as current

Slots

Slot	Description
`default`	Default slot for the label

CSS parts

Style from outside with c-step::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The step's grid container holding the indicator and the label
`indicator`	Wrapper around the state indicator (incomplete dot or completed check)
`dot`	The circular indicator shown while the step is incomplete
`complete`	The filled circle with the check mark shown when the step is complete
`label`	Wrapper around the slotted label text