Filter sidebar

Filter sidebar is used for displaying filtering options in a search result or catalogue page.

import { ... } from '@ag.ds-next/react/filter-sidebar';

Filter sidebar is used in catalogue or search results pages to contain filtering options for a list of Cards.

The Filter sidebar collapses on mobile devices, and displays a number of active filter options in the header.

Visit the example page in Storybook to see it used in context.

Read the Search filters pattern to understand how and when to use this component
Use the activeFiltersCount prop to display the number of active filters in the header on mobile devices
Use the onClearFilters prop to enable a reset button at the top of Filter sidebar.

Don't

Use outside of the context of filtering items.

Open in Playroom, opens in a new tab

(() => {
	const listData = [
		{
			title: 'Example article one',
			desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc.',
			author: 'Lando Norris',
		},
		{
			title: 'Example article two',
			desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc.',
			author: 'Toto Wolff',
		},
		{
			title: 'Example article three',
			desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eget nunc.',
			author: 'Stefano Domenicali',
		},
	];

	return (
		<Columns gap={{ xs: 1, md: 3 }}>
			<Column columnSpan={{ xs: 12, md: 4 }}>
				<FilterSidebar activeFiltersCount={3}>
					<FormStack>
						<TextInput block label="Example input 2" value="Example" />
						<TextInput block label="Example input 3" value="Example" />
						<TextInput block label="Example input 1" value="Example" />
						<TextInput block label="Example input 4" value="Example" />
					</FormStack>
				</FilterSidebar>
			</Column>
			<Column columnSpan={{ xs: 12, md: 8 }}>
				<Stack gap={2}>
					<Text
						as="h2"
						fontSize="md"
						fontWeight={{ xs: 'normal', md: 'bold' }}
						lineHeight="heading"
					>
						Search results
					</Text>
					<Stack as="ul" gap={1}>
						{listData.map((item) => (
							<Card as="li" shadow clickable key={item.id}>
								<CardInner>
									<Stack gap={0.5} width="100%" flexWrap="wrap">
										<H3>
											<CardLink href="#">{item.title}</CardLink>
										</H3>

										<Text as="p">{item.desc}</Text>

										<Flex
											gap={0.5}
											flexWrap="wrap"
											justifyContent="space-between"
											alignItems="center"
										>
											<Text color="muted" fontSize="xs">
												{item.author}
											</Text>
										</Flex>
									</Stack>
								</CardInner>
							</Card>
						))}
					</Stack>
				</Stack>
			</Column>
		</Columns>
	);
})();

Search filters – Search filters help users find what they're looking for by displaying options that meet specified criteria.

Edit this page

Filter sidebar

Related patterns