<baht-steps>

Wizard progress indicator: numbered markers with labels, the current one highlighted, done ones checked.

Horizontal

current

HTMLReactAngular

Copy

<baht-steps current="1"></baht-steps>

<script>
  const el = document.querySelector('baht-steps');
  el.steps = [
    "Request",
    "Manager approval",
    "Fulfilment",
    "Review"
  ];
</script>

Sidebar variant

<baht-workflow show-steps> renders this automatically from its visible forms.

HTMLReactAngular

Copy

<baht-steps variant="sidebar" current="2"></baht-steps>

<script>
  const el = document.querySelector('baht-steps');
  el.steps = [
    "Request",
    "Manager approval",
    "Fulfilment",
    "Review"
  ];
</script>

Props

Name	Type	Default	Description
stepsJS	string[]	[]	Labels in order
current	number	0	Zero-based active index
variant	'default' | 'sidebar'	'default'	Horizontal strip or vertical rail (default | sidebar)