Reactstrap List Group
-Pro Component
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Examples
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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
import React from "react";
// reactstrap components
import { ListGroupItem, ListGroup } from "reactstrap";
function Example() {
return (
<>
<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
</>
);
}
export default Example;
Active items
Add
.active
to
a
.list-group-item
to indicate the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
import React from "react";
// reactstrap components
import { ListGroupItem, ListGroup } from "reactstrap";
function Example() {
return (
<>
<ListGroup>
<ListGroupItem className=" active">Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
</>
);
}
export default Example;
Links
import React from "react";
// reactstrap components
import { ListGroupItem, ListGroup } from "reactstrap";
function Example() {
return (
<>
<ListGroup>
<ListGroupItem
className=" list-group-item-action active"
href="#pablo"
onClick={(e) => e.preventDefault()}
tag="a"
>
Cras justo odio
</ListGroupItem>
<ListGroupItem
className=" list-group-item-action"
href="#pablo"
onClick={(e) => e.preventDefault()}
tag="a"
>
Dapibus ac facilisis in
</ListGroupItem>
<ListGroupItem
className=" list-group-item-action"
href="#pablo"
onClick={(e) => e.preventDefault()}
tag="a"
>
Morbi leo risus
</ListGroupItem>
<ListGroupItem
className=" list-group-item-action"
href="#pablo"
onClick={(e) => e.preventDefault()}
tag="a"
>
Porta ac consectetur ac
</ListGroupItem>
<ListGroupItem
className=" list-group-item-action disabled"
href="#pablo"
onClick={(e) => e.preventDefault()}
tag="a"
>
Vestibulum at eros
</ListGroupItem>
</ListGroup>
</>
);
}
export default Example;
With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
import React from "react";
// reactstrap components
import { Badge, ListGroupItem, ListGroup } from "reactstrap";
function Example() {
return (
<>
<ListGroup>
<ListGroupItem className=" d-flex justify-content-between align-items-center">
Cras justo odio{" "}
<Badge color="primary" pill>
14
</Badge>
</ListGroupItem>
<ListGroupItem className=" d-flex justify-content-between align-items-center">
Dapibus ac facilisis in{" "}
<Badge color="primary" pill>
2
</Badge>
</ListGroupItem>
<ListGroupItem className=" d-flex justify-content-between align-items-center">
Morbi leo risus{" "}
<Badge color="primary" pill>
1
</Badge>
</ListGroupItem>
</ListGroup>
</>
);
}
export default Example;
Props
If you want to see more examples and properties please check the official Reactstrap Documentation.