FLIN App

Default

Default three-step indicator at step one.

Step 1

Step 2

Step 3

E-commerce Flow

Four-step checkout at the shipping stage.

Cart

Shipping

Payment

Confirm

Payment Step

Checkout flow progressed to the payment stage.

Cart

Shipping

Payment

Confirm

Final Step

Checkout at the confirmation step — nearly complete.

Cart

Shipping

Payment

Confirm

Registration Flow

Step indicator used for a multi-step registration process.

Account

Profile

Preferences

Survey Flow

Step indicator for a multi-page form or survey.

Personal

Experience

Feedback

Done

Usage

Props

Prop	Type	Default	Description
`steps`	text	"Step 1,Step 2,Step 3"	Comma-separated step labels
`current`	text	"1"	Current active step (1-based)

CheckoutSteps

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Default

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } E-commerce Flow

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Payment Step

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Final Step

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Registration Flow

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Survey Flow

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props

Default

E-commerce Flow

Payment Step

Final Step

Registration Flow

Survey Flow

Usage

Props