`<bmx-step>`

One step of a bmx-stepper: its label and description for the step list, and the content shown while it is the current step. Only means anything inside a bmx-stepper.

9 properties · 0 events · 0 methods · 1 parts

Example

A step is an ordinary element holding ordinary content. It shows while it is the current step.

Shown as optional; a linear stepper lets it be passed over.

The icon replaces the step's number in its circle.

A step is only ever inside a bmx-stepper: it carries the label the step list is drawn from, and the stepper decides which one is showing.

Show markup

<div class="row" style="display: block">
  <bmx-stepper label="Steps" linear="false" style="max-inline-size: 40rem">
    <bmx-step label="Plain" description="A label and a line under it">A step is an ordinary element holding ordinary content. It shows while it is the current step.</bmx-step>
    <bmx-step label="Optional" optional>Shown as optional; a linear stepper lets it be passed over.</bmx-step>
    <bmx-step label="With an icon" icon='<svg viewBox="0 0 16 16"><path d="M8 2l1.8 3.7 4 .6-2.9 2.8.7 4L8 11.2 4.4 13.1l.7-4L2.2 6.3l4-.6z" fill="currentColor"/></svg>'>The icon replaces the step's number in its circle.</bmx-step>
  </bmx-stepper>
</div>
<p class="note">A step is only ever inside a <code>bmx-stepper</code>: it carries the label the step list is drawn from, and the stepper decides which one is showing.</p>

<bmx-step label="Shipping" description="Where it goes">…</bmx-step>

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the step showing. Set by `bmx-stepper`.
`description`	`description`	`string`	—	A short line under the label.
`disabled`	`disabled`	`boolean`	`false`	The step cannot be chosen.
`errorText`	`error-text`	`string`	—	What is wrong, shown under the label while the step is in error.
`icon`	`icon`	`string`	—	An inline SVG string, shown in the step's marker instead of its number.
`label`	`label`	`string`	—	The step's name in the step list.
`optional`	`optional`	`boolean`	`false`	The step may be left without being completed.
`state`	`state`	`'done' \| 'error'`	—	A state set by the page: `done` shows it completed, `error` shows it needs attention.
`value`	`value`	`string`	—	What the step is called in the stepper's `value` and events. Default: its label, then its position.

Slots

Slot	Description
`(default)`	The step's content.

CSS shadow parts

Part	Description
`base`	The box around the content.

CSS custom properties

Property	Description
`--bmx-step-display`	How the current step lays its content out. Block by default.