Action List
-
Documentation
- action_list
Single select from data
A single select uses a radio input group under the hood. In this example, deselection is done with a "reset" event handler that compares the associated job id with the current user data, and if equal, resets the user and changeset.
Selected: -
Multiple select from data
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
- Item 12
Leading and trailing visual
- Item 12
Description
- Item Description
- Item Description
Description inline
- Item Description
- Item Description
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
- Single select from data
- Multiple select from data
- 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
-
Overview
- Introduction
- Installation and usage
- Try out
-
Components
- Action List
-
- Single select from data
- Multiple select from data
- 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
- Avatars
- Blank slate
- Box
- Branch name
- Breadcrumbs
- Button
- Checkbox
- Counter
- Dialog
- Drawer
- Dropdown
- Filter list
- Form group
- Header
- Input validation message
- Label
- Layout
- Link
- Loaders
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Select
- Select menu
- Side nav
- State
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Truncate
- Underline nav