Blazorise ListGroup component

List groups are a flexible and powerful component for displaying a series of content.

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

  • <ListGroup> the main container.

    • <ListGroupItem> the list group item, can be selectable or not.

Examples

Basic

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
  • An item
  • A second item
  • A third item
  • A fourth item
  • A disabled item
<ListGroup>
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
    <ListGroupItem>A fourth item</ListGroupItem>
    <ListGroupItem Disabled>A disabled item</ListGroupItem>
</ListGroup>

Selectable items

Add SelectedItem to indicate the current active selection.
  • An item
  • A second item
  • A third item
  • A fourth item
  • A disabled item
<ListGroup Mode="ListGroupMode.Selectable" @bind-SelectedItem="selectedItem">
    <ListGroupItem Name="first">An item</ListGroupItem>
    <ListGroupItem Name="second">A second item</ListGroupItem>
    <ListGroupItem Name="third">A third item</ListGroupItem>
    <ListGroupItem Name="fourth">A fourth item</ListGroupItem>
    <ListGroupItem Name="fifth" Disabled>A disabled item</ListGroupItem>
</ListGroup>

@code {
    private string selectedItem = "first";
}

Flush

Add Flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
  • An item
  • A second item
  • A third item
  • A fourth item
  • A disabled item
<ListGroup Flush>
    <ListGroupItem>An item</ListGroupItem>
    <ListGroupItem>A second item</ListGroupItem>
    <ListGroupItem>A third item</ListGroupItem>
    <ListGroupItem>A fourth item</ListGroupItem>
    <ListGroupItem Disabled>A disabled item</ListGroupItem>
</ListGroup>

Contextual colors

Use contextual utilities to style list items with a stateful background and color.
  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
<ListGroup>
    <ListGroupItem Color="Color.Default">Default</ListGroupItem>
    <ListGroupItem Color="Color.Primary">Primary</ListGroupItem>
    <ListGroupItem Color="Color.Secondary">Secondary</ListGroupItem>
    <ListGroupItem Color="Color.Success">Success</ListGroupItem>
    <ListGroupItem Color="Color.Danger">Danger</ListGroupItem>
    <ListGroupItem Color="Color.Warning">Warning</ListGroupItem>
    <ListGroupItem Color="Color.Info">Info</ListGroupItem>
    <ListGroupItem Color="Color.Light">Light</ListGroupItem>
    <ListGroupItem Color="Color.Dark">Dark</ListGroupItem>
</ListGroup>
Contextual classes also work with Selectable items. Note the addition of the hover styles here not present in the previous example. Also supported is the active state; apply it to indicate an active selection on a contextual list group item.
  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
<ListGroup Mode="ListGroupMode.Selectable">
    <ListGroupItem Name="none" Color="Color.Default">Default</ListGroupItem>
    <ListGroupItem Name="primary" Color="Color.Primary">Primary</ListGroupItem>
    <ListGroupItem Name="secondary" Color="Color.Secondary">Secondary</ListGroupItem>
    <ListGroupItem Name="success" Color="Color.Success">Success</ListGroupItem>
    <ListGroupItem Name="danger" Color="Color.Danger">Danger</ListGroupItem>
    <ListGroupItem Name="warning" Color="Color.Warning">Warning</ListGroupItem>
    <ListGroupItem Name="info" Color="Color.Info">Info</ListGroupItem>
    <ListGroupItem Name="light" Color="Color.Light">Light</ListGroupItem>
    <ListGroupItem Name="dark" Color="Color.Dark">Dark</ListGroupItem>
</ListGroup>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
  • A list item 14
  • A second list item 2
  • A third list item 1
<ListGroup Flush>
    <ListGroupItem Flex="Flex.JustifyContent.Between.AlignItems.Center">
        A list item
        <Badge Color="Color.Primary" Pill>14</Badge>
    </ListGroupItem>
    <ListGroupItem Flex="Flex.JustifyContent.Between.AlignItems.Center">
        A second list item
        <Badge Color="Color.Primary" Pill>2</Badge>
    </ListGroupItem>
    <ListGroupItem Flex="Flex.JustifyContent.Between.AlignItems.Center">
        A third list item
        <Badge Color="Color.Primary" Pill>1</Badge>
    </ListGroupItem>
</ListGroup>

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
  • List group item heading
    3 days ago

    Some placeholder content in a paragraph.

    And some small print.
  • List group item heading
    3 days ago

    Some placeholder content in a paragraph.

    And some muted small print.
  • List group item heading
    3 days ago

    Some placeholder content in a paragraph.

    And some muted small print.
<ListGroup Flush>
    <ListGroupItem>
        <Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is1.FromBottom">List group item heading</Heading>
            <Small>3 days ago</Small>
        </Div>
        <Paragraph Margin="Margin.Is1.FromBottom">Some placeholder content in a paragraph.</Paragraph>
        <Small>And some small print.</Small>
    </ListGroupItem>
    <ListGroupItem>
        <Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is1.FromBottom">List group item heading</Heading>
            <Small TextColor="TextColor.Muted">3 days ago</Small>
        </Div>
        <Paragraph Margin="Margin.Is1.FromBottom">Some placeholder content in a paragraph.</Paragraph>
        <Small TextColor="TextColor.Muted">And some muted small print.</Small>
    </ListGroupItem>
    <ListGroupItem>
        <Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is1.FromBottom">List group item heading</Heading>
            <Small TextColor="TextColor.Muted">3 days ago</Small>
        </Div>
        <Paragraph Margin="Margin.Is1.FromBottom">Some placeholder content in a paragraph.</Paragraph>
        <Small TextColor="TextColor.Muted">And some muted small print.</Small>
    </ListGroupItem>
</ListGroup>

Best Practices

Keep Items Consistent

Items within a list group should use a consistent structure so users can scan and compare them quickly. Render navigation as links and actions as buttons instead of making a non-interactive container appear clickable. If items are selectable, communicate the selected state with more than color and synchronize it with application state.

Component Choice

A list group is effective for relatively simple, stacked content. Use a Table or DataGrid when users must compare several aligned fields, sort data, or work efficiently with a large collection.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page