Components

#List group ListGroup, ListGroupItem

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

#Centers by default

  • Item 1
  • Item 2
  • ...
<ListGroup>
  <ListGroupItem>Item 1</ListGroupItem>
  <ListGroupItem>Item 2</ListGroupItem>
  <ListGroupItem>...</ListGroupItem>
</ListGroup>;

#Linked

Set the href or onClick prop on ListGroupItem, to create a linked or clickable element.

Link 1Link 2
function alertClicked() {
  alert('You clicked the third ListGroupItem');
}

render(
  <ListGroup>
    <ListGroupItem href="#link1">Link 1</ListGroupItem>
    <ListGroupItem href="#link2">Link 2</ListGroupItem>
    <ListGroupItem onClick={alertClicked}>Trigger an alert</ListGroupItem>
  </ListGroup>
);

#Styling by state

Set the active or disabled prop to true to mark or disable the item.

Link 1Link 2Link 3
<ListGroup>
  <ListGroupItem href="#" active>
    Link 1
  </ListGroupItem>
  <ListGroupItem href="#">Link 2</ListGroupItem>
  <ListGroupItem href="#" disabled>
    Link 3
  </ListGroupItem>
</ListGroup>;

#Styling by color

Set the bsStyle prop to style the item

  • Success
  • Info
  • Warning
  • Danger
<ListGroup>
  <ListGroupItem bsStyle="success">Success</ListGroupItem>
  <ListGroupItem bsStyle="info">Info</ListGroupItem>
  <ListGroupItem bsStyle="warning">Warning</ListGroupItem>
  <ListGroupItem bsStyle="danger">Danger</ListGroupItem>
</ListGroup>;

#With header

Set the header prop to create a structured item, with a heading and a body area.

Heading 1

Some body text

Heading 2

Linked item

Heading 3

Danger styling

<ListGroup>
  <ListGroupItem header="Heading 1">Some body text</ListGroupItem>
  <ListGroupItem header="Heading 2" href="#">
    Linked item
  </ListGroupItem>
  <ListGroupItem header="Heading 3" bsStyle="danger">
    Danger styling
  </ListGroupItem>
</ListGroup>;

#With custom component children

When using ListGroupItems directly, ListGroup looks at whether the items have href or onClick props to determine which DOM elements to emit. However, with custom item components as children to ListGroup, set thecomponentClass prop to specify which element ListGroup should output.

  • Custom Child 1
  • Custom Child 2
  • Custom Child 3
function CustomComponent({ children }) {
  return (
    <li className="list-group-item" onClick={() => {}}>
      {children}
    </li>
  );
}

render(
  <ListGroup componentClass="ul">
    <CustomComponent>Custom Child 1</CustomComponent>
    <CustomComponent>Custom Child 2</CustomComponent>
    <CustomComponent>Custom Child 3</CustomComponent>
  </ListGroup>
);

#Props

#ListGroup[source]

NameTypeDefaultDescription
componentClass
elementType

You can use a custom element type for this component.

If not specified, it will be treated as 'li' if every child is a non-actionable <ListGroupItem>, and 'div' otherwise.

bsClass
string
'list-group'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#ListGroupItem[source]

NameTypeDefaultDescription
active
any
disabled
any
header
node
listItem
boolean
false
onClick
function
href
string
type
string
bsStyle
one of: "success", "warning", "danger", "info"

Component visual or contextual style variants.

bsClass
string
'list-group-item'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.