Storybook
-
Theme
-
Light
-
Dark
-
System
-
Light tone
-
Light
-
Light high contrast
-
Light colorblind
-
Light Tritanopia
-
Dark tone
-
Dark
-
Dark dimmed
-
Dark high contrast
-
Dark colorblind
-
Dark Tritanopia
-
Reset to default
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- 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
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
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