Action List
Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent. single-column format, with room for icons, descriptions, side information, and other rich visuals.
-
Documentation
-
action_list
Form: single select
Selected: -
Form: multiple select
Selected: -
Form: selecting items with phx-*
An example of selecting items using
phx-click
and phx-value-item
.
Selected: -
Basic action list
-
Item
-
Item
-
Item
With separators
-
Item
-
Item
-
Item
Common attributes
-
Descructive item
-
Disabled item
-
A very long text abbreviated by ellipsis
Heights
-
Regular
-
Medium
-
Large
Leading visual
-
Item
-
Item
-
Item
Trailing visual
-
Item12
Leading and trailing visual
-
Item12
Description
-
ItemDescription
-
ItemDescription
Description inline
-
ItemDescription
-
ItemDescription
Section divider
-
Item
-
Item
Section divider, filled
-
Item
-
Item
Section divider with title
-
Item
-
Title
-
Item
Section divider with title, filled
-
Item
-
Title
-
Item
Section divider with title and description
-
Item
-
Title
A descriptive text -
Item
Single select
-
Option
-
Option
-
Option
Single select with custom leading visual
-
Option
-
Option
-
Option
Single select with selected link marker
-
Option
-
Option
-
Option
Multiple select
-
Option
-
Option
-
Option
Multiple select with custom leading visual
Uses
leading_visual
slot.
-
Option
-
Option
-
Option
Multiple select with checkmark icons
Uses attribute
is_checkmark_icon
.
-
Option
-
Option
-
Option
Multiple select with link marker
Uses attribute
is_selected_link_marker
.
-
Option
-
Option
-
Option
Sub group
Section title
-
Sub item
-
Sub item
Section title
-
Sub item
-
Sub item
Section title
-
Sub item
-
Sub item
-
On this page
-
Top of page
-
Documentation
-
Stories
-
Form: single select
-
Form: multiple select
-
Form: selecting items with phx-*
-
Basic action list
-
With separators
-
Common attributes
-
Heights
-
Links
-
Leading visual
-
Trailing visual
-
Leading and trailing visual
-
Selected states
-
Description
-
Description inline
-
Section divider
-
Section divider, filled
-
Section divider with title
-
Section divider with title, filled
-
Section divider with title and description
-
Single select
-
Single select with custom leading visual
-
Single select with selected link marker
-
Multiple select
-
Multiple select with custom leading visual
-
Multiple select with checkmark icons
-
Multiple select with link marker
-
Sub group
-
Top of page