List Group

A 400 px card of list rows with an optional header — sixteen ready patterns: basic, icon, avatar, brand, metric, selectable, toggle, sortable, expandable, grouped, ranking, comparison, tree, action, discussion and master–detail.

See alsoList ItemProList PanelPro

Usage

Installation

List Group comes with WunderUI Core and Pro, in the @wunderui/react package from your plan. See the plans.

import {
  ListGroup,
  ListGroupActions,
  ListGroupActionsProps,
  ListGroupDetails,
  ListGroupDetailsProps,
  ListGroupDiscussion,
  ListGroupDiscussionProps,
  ListGroupExpandable,
  ListGroupExpandableItem,
  ListGroupExpandableProps,
  ListGroupHeader,
  ListGroupHeaderProps,
  ListGroupMasterDetail,
  ListGroupMasterDetailItem,
  ListGroupMasterDetailProps,
  ListGroupProps,
  ListGroupSection,
  ListGroupSectionProps,
  ListGroupSelectable,
  ListGroupSelectableItem,
  ListGroupSelectableProps,
  ListGroupSortable,
  ListGroupSortableItem,
  ListGroupSortableProps,
  ListGroupToggle,
  ListGroupToggleItem,
  ListGroupToggleProps,
  ListGroupTree,
  ListGroupTreeProps,
} from "@wunderui/react"

Examples

• ListGroupdata-slot="list-group"

  The 400 px card (16 px radius, 8 px padding) with an optional header and rows from items or children. Basic, icon, avatar, brand, metric, ranking and comparison lists are this card with different slots.

• ListGroupHeaderdata-slot="list-group-header"Optional

  Title, optional description, count badge or link action at the top of the card.

• ListGroupSectiondata-slot="list-group-section"Optional

  A labelled run of rows inside a group, with a count badge (Today 3, Yesterday 2).

• List Itemdata-slot="list-item"

  A row inside the special groups; the same row as List Item.

• List Item Rowdata-slot="list-item-row"

  The rounded surface of such a row.

• List Row Click Areadata-slot="list-row-click-area"

  A layer under the controls that lets a click anywhere on a selectable or toggle row reach its control.

• ListGroupActionsOptional

  A command menu (role="menu"): icon, title, description and a Kbd shortcut per action; one tab stop, arrow keys and typeahead.

• ListGroupDiscussionOptional

  Comments with author and time, a like that toggles, replies that show and hide, and an inline reply composer.

• List Commentdata-slot="list-comment"

  One comment of the discussion: avatar, author, time, text and the reaction buttons.

• List Threaddata-slot="list-thread"Optional

  A comment with its replies; threads are divided by a hairline.

• ListGroupExpandableOptional

  Rows that are disclosure buttons; the open row shows its details below. One open at a time unless multiple.

• ListGroupDetailsdata-slot="list-group-details"Optional

  The detail box an expandable row opens: label and value pairs on a subtle surface, then actions.

• ListGroupMasterDetaildata-slot="list-group-master-detail"Optional

  An inbox-style listbox on the left and the detail of the chosen row on the right; stacks below 720 px.

• ListGroupSelectableOptional

  A checkbox or radio per row, controlled with value or uncontrolled; a click anywhere on the row toggles it.

• ListGroupSortableOptional

  Rows with drag handles. Drag with a pointer, press Alt with an arrow key, or use Move up and Move down in the row menu; every move is announced.

• ListGroupToggleOptional

  A switch per row; the row toggles it, and disabled rows stay readable at half opacity.

• ListGroupTreeOptional

  Nested folders and items in a role="tree", indented 20 px per level, with the full arrow-key pattern.

• When to use

  Use a List Group for a self-contained list in a settings page, a sidebar or next to a chart: a few rows under one heading. For a dashboard card with loading and empty states, use a List Panel.

• Do

  Choose the group by what people do with the rows: pick (Selectable), switch (Toggle), reorder (Sortable), open (Expandable, Tree, Master–Detail) or run (Action).

• Do

  Keep a group to about five to eight rows and link to the full list with the header action.

• Do

  Name every group with a title or aria-label; the lists, trees and menus inside take their accessible name from it.

• Don’t

  Don't mix dividers and no dividers in one group. Lists with figures and states get dividers; feeds, rankings and timelines go without.

• Don’t

  Don't rely on drag alone. Sortable already offers Alt with the arrow keys and the row menu, so keep the handle visible.

API Reference