Filter dropdowns

Filter dropdowns are buttons with pre-built components that allow users to filter data in a dropdown menu. They are usually used to filter data in a table or report.

Design

A filter dropdown can have multiple different child components. A fully decked out (but non-functional) one looks like this:

Example

Usage

The <Filter.Dropdown> component forms the main structure of the filter dropdown.

You can then use various items within the dropdown, such as <Filter.Divider>, <Filter.FieldSet>, and <Filter.Field>.

A basic example:

const MyFilter = () => {
	const [selected, setSelected] = useState([]);
	const [filterState, setFilterState] = useState({});
 
	const options = [
		{ value: 1, label: 'Option 1' },
		{ value: 2, label: 'Option 2' },
		{ value: 3, label: 'Option 3' }
	];
 
	return (
		<Filter.Dropdown
			text={`${selected.length} options selected`}
			handleApplyClick={() => setSelected(filterState.reduce((acc, curr) => (curr.checked ? [...acc, curr.value] : acc), []))}
		>
			<Filter.SelectAll
				checked={allChecked}
				onChange={(_, checked) => {
					setAllChecked(checked);
					handleToggleAll(checked);
				}}
			/>
			<Filter.Fieldset>
				{options.map((option) => (
					<Filter.Field
						key={option.value}
						value={option.value}
						checked={filterState[option.value]?.checked}
						onChange={() => {
							setFilterState((state) => ({
								...state,
								[option.value]: {
									checked: !state[option.value]?.checked
								}
							}));
						}}
					>
						{option.label}
					</Filter.Field>
				))}
			</Filter.Fieldset>
		</Filter.Dropdown>
	);
};

Available sub-components

<Filter.Search>: A search input field.
<Filter.SelectAll>: A checkbox to select all options.
<Filter.Fieldset>: A container for <Filter.Field> components.
<Filter.Field>: A single filter option.
<Filter.Divider>: A divider line.
<Filter.Empty>: A message to display when no options are available.

Drawer Icon