PxStepperHeader

A single step header — icon, title, description, and active/inactive styling based on how its stepValue compares to the current activeStep. Used to build custom step indicators (PxFormWizard renders its own step nav internally rather than using this component).

Basic Usage

Demo

<script setup>
import { ref } from 'vue'
import { User, Building2, CheckCircle } from '@lucide/vue'
import { PxStepperHeader } from 'praxis-vue-ui'

const activeStep = ref('1')
</script>

<template>
  <PxStepperHeader
    :icon="User"
    title="Personal Information"
    description="Your name and contact details"
    step-value="1"
    :active-step="activeStep"
    @activate="activeStep = '1'"
  />
  <PxStepperHeader
    :icon="Building2"
    title="Organization"
    description="Company and role"
    required
    step-value="2"
    :active-step="activeStep"
    @activate="activeStep = '2'"
  />
</template>

Props

Props

Prop	Type	Default	Description
iconrequired	Component	—	Icon component rendered inside the step's circle marker.
titlerequired	string	—	Step title text.
descriptionrequired	string	—	Step description text, shown below the title.
required	boolean	false	Shows a red asterisk next to the title.
stepValue	string | number	'1'	This step's own identifying value.
activeStep	string | number	'1'	The currently active step's value — the marker is styled as 'reached' while stepValue <= activeStep.

Emits

Event	Payload	Description
activate	—	Emitted when the step header is clicked.