ListGroup
ListGroups are versatile components that can be used to display a list of items. They can be used in a variety of ways, including as a navigation menu, a checklist, or a simple list of items. Other components like Accordion and DragAndDrop can be used in conjunction with ListGroup to create more complex layouts.
Result
Loading...
Live Editor
function Example() {const options = [{label: 'General',id: '1',},{label: 'Sharing Rules',id: '2',},{label: 'Alliance Partners',id: '3',},{label: 'Alerts',id: '4',},{label: 'Client History',id: '5',},{label: 'Branding',id: '6',},{label: 'Monte Carlo',id: '7',},];const [activeId, setActiveId] = React.useState('');const [activeLabel, setActiveLabel] = React.useState('');function handleItemClick(e, { itemId }) {const activeItem = options.find((option) => option.id === itemId);setActiveId(activeItem.id);setActiveLabel(activeItem.label);}return (<ListGroup id="list-group-demo" activeLabel={activeLabel} onItemClick={handleItemClick}>{options.map((option) => (<ListGroup.Item key={option.id} id={option.id} active={activeId === option.id} action>{option.label}</ListGroup.Item>))}</ListGroup>);}
Template, Header, and Body components
The contents of a ListGroupItem can have a lot of variability. The ListGroup.Item.Template, ListGroup.Item.Header, and ListGroup.Item.Body components can be used to help you build a list group item with render props for each section of the item.
Result
Loading...
Live Editor
<ListGroup collapse={false}><ListGroup.Item><ListGroup.Item.Templateprefix="Prefix"header={<ListGroup.Item.Headertitle="Title"prefix="Prefix"helper="Helper"actions="Actions"icon="Icon"/>}body={<ListGroup.Item.Bodydescription="Description"footer="Footer"alert="Alert"actions="Actions"/>}/></ListGroup.Item></ListGroup>
More complex layouts
Result
Loading...
Live Editor
<ListGroup collapse={false}><ListGroup.Item><ListGroup.Item.Headertitle="Title"prefix={<Switch aria-label="switch in item" />}helper="Helper"actions={<Button size="sm">Edit</Button>}icon={<span className="icon-chevron-right" />}/></ListGroup.Item><ListGroup.Item active><ListGroup.Item.Headertitle="Title"prefix={<Switch aria-label="switch in item" light />}helper="Helper"actions={<div className="d-flex gap-2"><Badge variant="outline-success">Tag 1</Badge><Badge variant="outline-warning">Tag 2</Badge></div>}icon={<span className="icon-check" />}/></ListGroup.Item><ListGroup.Item><ListGroup.Item.Headertitle="Title"prefix={<Checkbox aria-label="checkbox in item" />}icon={<span className="icon-chevron-right" />}/></ListGroup.Item><ListGroup.Item><ListGroup.Item.Headertitle="Title"prefix={<span className="icon-star-01" />}icon={<span className="icon-check" />}actions={<Tooltip title="Tooltip" placement="top"><span className="icon-help-circle fs-xl" /></Tooltip>}/></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />} /></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />}><ListGroup.Item.Body description="Description goes here underneath all of the items above and respects indentation for inputs." /></ListGroup.Item.Header></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />}><ListGroup.Item.Bodydescription="Description goes here underneath all of the items above and respects indentation for inputs."footer="The footer has lighter italicized text."/></ListGroup.Item.Header></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />}><ListGroup.Item.Bodydescription="Description goes here underneath all of the items above and respects indentation for inputs."footer="The footer has lighter italicized text."actions={<div className="d-flex gap-3"><Button size="sm" variant="outline-primary">Edit</Button><Button size="sm" variant="outline-danger">Delete</Button></div>}/></ListGroup.Item.Header></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />}><ListGroup.Item.Bodydescription="Description goes here underneath all of the items above and respects indentation for inputs."footer="The footer has lighter italicized text."alert={<Alert variant="info" size="sm">Alert</Alert>}/></ListGroup.Item.Header></ListGroup.Item><ListGroup.Item><ListGroup.Item.Header title="Title" icon={<span className="icon-chevron-right" />}><ListGroup.Item.Bodydescription="Description goes here underneath all of the items above and respects indentation for inputs."footer="The footer has lighter italicized text."alert={<Alert variant="info" size="sm">Alert</Alert>}actions={<div className="d-flex gap-3"><Button size="sm" variant="outline-primary">Edit</Button><Button size="sm" variant="outline-danger">Delete</Button></div>}/></ListGroup.Item.Header></ListGroup.Item></ListGroup>
As a checklist
Result
Loading...
Live Editor
<ListGroup collapse={false}><ListGroup.Item active action><ListGroup.Item.Header title="Item 1" icon={<span className="icon-check" />} /></ListGroup.Item><ListGroup.Item active action><ListGroup.Item.Header title="Item 2" icon={<span className="icon-check" />} /></ListGroup.Item><ListGroup.Item action><ListGroup.Item.Header title="Item 3" /></ListGroup.Item><ListGroup.Item active action><ListGroup.Item.Header title="Item 4" icon={<span className="icon-check" />} /></ListGroup.Item></ListGroup>
Analytics
The ListGroup component is trackable through Kyber Analytics. This is the default analytics config.
export default {
value: 'ListGroup',
actions: {
onItemClick: { type: 'LISTGROUP_ITEMCLICK', payload: 'Click' },
},
};