---
title: React List Group Component
name: List group
description: React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website.
route: /components/list-group/
other_frameworks: list-group
---

## Basic example

The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.

<ExampleSnippet component="ListGroupExample" componentName="React List Group" />

## Active items

Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.

<ExampleSnippet component="ListGroupActiveItemsExample" componentName="React List Group" />

## Disabled items

Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.

<ExampleSnippet component="ListGroupDisabledItemsExample" componentName="React List Group" />

## Links and buttons

Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.

<ExampleSnippet component="ListGroupLinksAndButtonsExample" componentName="React List Group" />

<ExampleSnippet component="ListGroupLinksAndButtons2Example" componentName="React List Group" />

## Flush

Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

<ExampleSnippet component="ListGroupFlushExample" componentName="React List Group" />

## Horizontal

Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**

<ExampleSnippet component="ListGroupHorizontalExample" componentName="React List Group" />

## Contextual classes

Use contextual classes to style list items with a stateful background and color.

<ExampleSnippet component="ListGroupContextualClassesExample" componentName="React List Group" />

Contextual classes also work with `<a>`s or `<button>`s. 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.

<ExampleSnippet component="ListGroupContextualClasses2Example" componentName="React List Group" />

<Callout color="warning" type="colorAssistiveTechnologies" />

## With badges

Add badges to any list group item to show unread counts, activity, and more.

<ExampleSnippet component="ListGroupWithBadgesExample" componentName="React List Group" />

## Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/).

<ExampleSnippet component="ListGroupCustomContentExample" componentName="React List Group" />

## Checkboxes and radios

Place CoreUI's checkboxes and radios within list group items and customize as needed.

<ExampleSnippet component="ListGroupCheckboxesAndRadiosExample" componentName="React List Group" />

<ExampleSnippet component="ListGroupCheckboxesAndRadios2Example" componentName="React List Group" />

And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.

<ExampleSnippet component="ListGroupCheckboxesAndRadios3Example" componentName="React List Group" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CListGroup /&gt;](./api/#clistgroup)
- [&lt;CListGroupItem /&gt;](./api/#clistgroupitem)
