Skip to main content

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.Template
			prefix="Prefix"
			header={
				<ListGroup.Item.Header
					title="Title"
					prefix="Prefix"
					helper="Helper"
					actions="Actions"
					icon="Icon"
				/>
			}
			body={
				<ListGroup.Item.Body
					description="Description"
					footer="Footer"
					alert="Alert"
					actions="Actions"
				/>
			}
		/>
	</ListGroup.Item>
</ListGroup>

More complex layouts​

Result
Loading...
Live Editor
<div data-testid="pw-listgroup-complex">
	<ListGroup collapse={false}>
		<ListGroup.Item>
			<ListGroup.Item.Header
				title="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.Header
				title="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.Header
				title="Title"
				prefix={<Checkbox aria-label="checkbox in item" />}
				icon={<span className="icon-chevron-right" />}
			/>
		</ListGroup.Item>
		<ListGroup.Item>
			<ListGroup.Item.Header
				title="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.Body
					description="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.Body
					description="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.Body
					description="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.Body
					description="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>
</div>

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' },
	},
};

Props​

ListGroup​

ListGroupItem​

ListGroupItemHeader​

ListGroupItemBody​

ListGroupItemContent​