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
-
Introduction
-
Components
-
Action list
-
-
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
-
-
Action menu
-
Alert
-
Avatar
-
Blankslate
-
Box
-
Branch name
-
Breadcrumb
-
Button
-
Button group
-
Checkbox
-
Checkbox group
-
Circle badge
-
Counter
-
Dialog
-
Drawer
-
Dropdown
-
Ellipsis
-
Filter list
-
Form control
-
Header
-
Input validation message
-
Label
-
Layout
-
Link
-
Menu
-
Octicon
-
Pagination
-
Progress
-
Radio button
-
Radio group
-
Radio tabs
-
Select
-
Select menu
-
Side nav
-
Spinner
-
State label
-
Styled HTML
-
Subhead
-
Subnav
-
Tabnav
-
Text input
-
Textarea
-
Theme
-
Theme menu
-
Theme menu options
-
Timeline
-
Toggle switch
-
Truncate
-
Underline nav