ListGroup
The ListGroup component provides an organized list structure with items, dividers, and sections for displaying grouped content.
Examples
(3)Properties
(7)Playground
Basic Usage
Compose a vertical list by nesting
ListGroupItem elements inside a ListGroup. Use the variant prop to switch between default, bordered, and flush styles.Two-line rows
Pass
label and description for a stacked row. These take precedence over children, which renders as a single line of text and so cannot hold a layout block. description is optional — a label on its own reads the same as children, and mixing both row shapes in one group stays aligned.Trailing value
value renders muted text at the end of the row, before endSection. A two-line row already claims the free space, so its value sits flush right on its own; a single-line row only takes its natural width, so the value is what gets pushed to the edge and endSection follows it.Scan to open this page on your phonereact-ui-library.com/components/ListGroup
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources