Agriculture Design System
Design System for import and export services

Filter sidebar

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

View in StorybookView in Github
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.

On mobile devices, the filter sidebar collapses into an accordion, where the number of active filter options is displayed prominently in the header. If filter tags are used, they can be displayed outside the accordion to provide users with a clear, interactive way to view and remove specific filters. For more guidance on filter tags, see the Search Filters pattern.

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

Do

  • 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 tabOpen responsive preview
() => {
	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 1" />
						<TextInput block label="Example input 2" />
						<TextInput block label="Example input 3" />
						<TextInput block label="Example input 4" />
					</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, index) => (
							<Card as="li" shadow clickable key={index}>
								<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>
	);
};

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Render>
	    {() => {
	    	const listData = [
	    		{
	    			author: 'Lando Norris',
	    			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.',
	    			title: 'Example article one',
	    		},
	    		{
	    			author: 'Toto Wolff',
	    			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.',
	    			title: 'Example article two',
	    		},
	    	];
	    
	    	return (
	    		<Columns gap={1.5}>
	    			<Column columnSpan={{ xs: 12 }}>
	    				<H4>Filter sidebar: on light background</H4>
	    			</Column>
	    			<Column columnSpan={{ xs: 12, md: 4 }}>
	    				<FilterSidebar activeFiltersCount={3}>
	    					<FormStack>
	    						<TextInput block label="Example input 1" />
	    						<TextInput block label="Example input 2" />
	    						<TextInput block label="Example input 3" />
	    						<TextInput block label="Example input 4" />
	    					</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, index) => (
	    							<Card as="li" clickable key={index} shadow>
	    								<CardInner>
	    									<Stack flexWrap="wrap" gap={0.5} width="100%">
	    										<H3>
	    											<CardLink href="#">{item.title}</CardLink>
	    										</H3>
	    
	    										<Text as="p">{item.desc}</Text>
	    
	    										<Flex
	    											alignItems="center"
	    											flexWrap="wrap"
	    											gap={0.5}
	    											justifyContent="space-between"
	    										>
	    											<Text color="muted" fontSize="xs">
	    												{item.author}
	    											</Text>
	    										</Flex>
	    									</Stack>
	    								</CardInner>
	    							</Card>
	    						))}
	    					</Stack>
	    				</Stack>
	    			</Column>
	    		</Columns>
	    	);
	    }}
	</Render>
</Box>

Dark palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Render>
	    {() => {
	    	const listData = [
	    		{
	    			author: 'Lando Norris',
	    			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.',
	    			title: 'Example article one',
	    		},
	    		{
	    			author: 'Toto Wolff',
	    			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.',
	    			title: 'Example article two',
	    		},
	    	];
	    
	    	return (
	    		<Columns gap={1.5}>
	    			<Column columnSpan={{ xs: 12 }}>
	    				<H4>Filter sidebar: on dark background</H4>
	    			</Column>
	    			<Column columnSpan={{ xs: 12, md: 4 }}>
	    				<FilterSidebar activeFiltersCount={3}>
	    					<FormStack>
	    						<TextInput block label="Example input 1" />
	    						<TextInput block label="Example input 2" />
	    						<TextInput block label="Example input 3" />
	    						<TextInput block label="Example input 4" />
	    					</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, index) => (
	    							<Card as="li" clickable key={index} shadow>
	    								<CardInner>
	    									<Stack flexWrap="wrap" gap={0.5} width="100%">
	    										<H3>
	    											<CardLink href="#">{item.title}</CardLink>
	    										</H3>
	    
	    										<Text as="p">{item.desc}</Text>
	    
	    										<Flex
	    											alignItems="center"
	    											flexWrap="wrap"
	    											gap={0.5}
	    											justifyContent="space-between"
	    										>
	    											<Text color="muted" fontSize="xs">
	    												{item.author}
	    											</Text>
	    										</Flex>
	    									</Stack>
	    								</CardInner>
	    							</Card>
	    						))}
	    					</Stack>
	    				</Stack>
	    			</Column>
	    		</Columns>
	    	);
	    }}
	</Render>
</Box>
  • Tags – Tags classify content using keywords or labels. They are added to a web page, asset or content to help users search for related content quickly and easily.
  • Search filters – Search filters help users find what they’re looking for by displaying options that meet specified criteria.
Edit this page