Stepper

Step 2 of 3

Loading...

All Complete

Loading...

Vertical

Loading...

<flint-step-connector>

• Tag: <flint-step-connector>
• Class: FlintStepConnector

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintStepConnector } from 'flint-ui';

Usage

<flint-step-connector></flint-step-connector>

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the connector line.
completed	completed	boolean	false	Whether the connector represents a completed step transition.

CSS Custom Properties

Property	Default
--flint-surface-1	—
--flint-font-family	—
--flint-border-color	—
--flint-text-color-muted	—
--flint-input-border-color	—
--flint-primary-color	—
--flint-text-color	—
--flint-text-color-on-primary	—
--flint-error-color	—
--flint-primary-focus-ring	—

---

<flint-step-label>

• Tag: <flint-step-label>
• Class: FlintStepLabel

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintStepLabel } from 'flint-ui';

Usage

<flint-step-label></flint-step-label>

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	Whether the label's step is currently active.
disabled	disabled	boolean	false	Whether the label's step is disabled.
error	error	boolean	false	Whether the label's step is in an error state.

Slots

Name	Description
(default)	Default slot for content
optional

---

<flint-step-content>

• Tag: <flint-step-content>
• Class: FlintStepContent

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintStepContent } from 'flint-ui';

Usage

<flint-step-content></flint-step-content>

Properties

Property	Attribute	Type	Default	Description
open	open	boolean	true	Whether the content is visible. Defaults true so standalone usage always shows.

Slots

Name	Description
(default)	Default slot for content

---

<flint-step>

Step: an individual step within a stepper.

• Tag: <flint-step>
• Class: FlintStep

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintStep } from 'flint-ui';

Usage

<flint-step></flint-step>

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	Whether this step is the currently active step.
completed	completed	boolean	false	Whether this step has been completed.
disabled	disabled	boolean	false	Whether this step is disabled and non-interactive.
optional	optional	boolean	false	Whether this step is optional.
error	error	boolean	false	Whether this step is in an error state.
last	last	boolean	false	Whether this is the last step in the stepper.
clickable	clickable	boolean	false	Whether this step can be clicked to navigate to it.
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the step.
alternativeLabel	alternative-label	boolean	false	Whether to display the label below the step icon instead of beside it.
stepIndex	step-index	number	0	Zero-based index of this step within the stepper.
optionalLabel	optional-label	string	'Optional'	Text shown below the label when the step is optional.
prevCompleted	prev-completed	boolean	false	Set by FlintStepper — true when the immediately preceding step is completed. Controls whether the leading connector is rendered in the primary colour.

Events

Event	Detail	Description
flint-step-click	—	Fired when a non-linear step is clicked.

Slots

Name	Description
(default)	Default slot for content
icon
label

CSS Custom Properties

Property	Default
--flint-stepper-connector-color	—
--flint-stepper-icon-size	32px

---

<flint-stepper>

Stepper: a multi-step progress indicator.

• Tag: <flint-stepper>
• Class: FlintStepper

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintStepper } from 'flint-ui';

Usage

<flint-stepper></flint-stepper>

Properties

Property	Attribute	Type	Default	Description
activeStep	active-step	number	0	Zero-based index of the currently active step.
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the stepper.
alternativeLabel	alternative-label	boolean	false	Whether to display step labels below the icons instead of beside them.
nonLinear	non-linear	boolean	false	Whether steps can be navigated in any order (enables clickable steps).
label	label	string	'steps'	Accessible label for the stepper landmark (maps to aria-label on the list element).

Events

Event	Detail	Description
flint-step-change	—	Fired when the active step changes via step click.

Slots

Name	Description
(default)	Default slot for content

CSS Custom Properties

Property	Default
--flint-stepper-connector-color	—
--flint-stepper-icon-size	32px

---

<flint-mobile-stepper>

• Tag: <flint-mobile-stepper>
• Class: FlintMobileStepper

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintMobileStepper } from 'flint-ui';

Usage

<flint-mobile-stepper></flint-mobile-stepper>

Properties

Property	Attribute	Type	Default	Description
steps	steps	number	0	Total number of steps.
activeStep	active-step	number	0	Zero-based index of the currently active step.
variant	variant	'text' | 'dots' | 'progress'	'dots'	Progress indicator style: text counter, dot indicators, or a progress bar.
position	position	'top' | 'bottom' | 'static'	'static'	Positioning of the mobile stepper within its container.
backLabel	back-label	string	'Back'	Label text for the Back navigation button (supports i18n).
nextLabel	next-label	string	'Next'	Label text for the Next navigation button (supports i18n).

Slots

Name	Description
back-button
next-button

---