List group
Group list rows with shared borders and separators.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
horizontal | horizontal | Lay out items in a row (separator becomes vertical between items) | boolean | boolean | false |
flush | flush | Remove outer rounding (for edge-aligned / inset layouts) | boolean | boolean | false |
ariaLabel | aria-label | Accessible name when the list needs a label | string | string | "" |
Slots
| Name | Description |
|---|---|
default | `duo-list-group-item` elements (or other listitem content) |
Usage
List group wraps duo-list-group-item rows (or other listitem content) with shared borders and separators—vertical by default, or horizontal with horizontal.
Do
- Place each row in
duo-list-group-iteminside the default slot. - Set
aria-labelon the group when the list needs an accessible name beyond visible headings. - Use
flushwhen the group sits flush to a parent edge and outer rounding should be removed.
Don’t
- Don’t use a list group for a single standalone row—use a card or plain list item pattern instead.
Related component
duo-list-group-item is the row primitive used inside duo-list-group. Compose items with slotted content, links, or actions as shown in Storybook examples.