<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>

Chevron

variant="chevron" joins the steps into one strip that scrolls sideways when it does not fit, for the states of a record. Add show-done to tick the steps before the current one.

Props

Name	Type	Default	Description
stepsJS	string[]	[]	Labels in order
current	number	0	Zero-based active index
variant	'default' | 'sidebar' | 'chevron'	'default'	Horizontal strip, vertical rail or joined states (default | sidebar | chevron)
show-done	boolean	false	chevron: tick the steps before the current one