name

PHX UI

Components

Alerts
Badges
Accordions
Progress bars
Breadcrumbs
Buttons
Images
Lists
Pagination
Tabs
Typography
Form elements
Form steps
Form validation
Default tables
Datatables

Forms

Steps

Liveview steps

Use the following example for steps with Liveview

Step 1 of 4

Basic information

Enter your basic information
Step 2 of 4

Address

Enter your address information.
Step 3 of 4

Contact

Enter your contact information.
Step 4 of 4

Review

Review all details.

step-0

%{
  active: true,
  description: "Enter your basic information",
  href: "/steps",
  key: "step-0",
  name: "Basic information",
  status: "current"
}

step-0

%{
  active: false,
  description: "Enter your address information.",
  href: "/steps/step-1",
  key: "step-1",
  name: "Address",
  status: "upcoming"
}

step-0

%{
  active: false,
  description: "Enter your contact information.",
  href: "/steps/step-2",
  key: "step-2",
  name: "Contact",
  status: "upcoming"
}

step-0

%{
  active: false,
  description: "Review all details.",
  href: "/steps/step-3",
  key: "step-3",
  name: "Review",
  status: "upcoming"
}

Form steps

Sample form steps components

Step 1

Lorem ipsum dolor

Step 2

Lorem ipsum dolor

Step 3

Lorem ipsum dolor

Step 4

Lorem ipsum dolor

@elixirphoenix v1.7.10