Filter - TUX Docs

Set of select menus used for filtering items.

Filter Container
Specifications
1. Properties
2. Styling
  1. Colors
Changelog
Related
1. Contains
2. Contained In
Examples

Set of select menus used for filtering items. Uses Mixitup. if additional settings are needed for a custom filter, add data-mix-type with a custom value, and add the corresponding functionality to the switch statement in /src/scripts/components/filter.js

In addition to the filter component include, you will also need a div with a class of mixitup and some optional HTML attributes that map to config options when Mixitup is instantiated. Each item in your list to filter needs a class of mix plus any additional classes that match the filter controls. Check out the mixitup documentation for more information.

data-mix-scope: Can be either global or local. Defaults to local, which means it will only look inside the mix container for controls.
data-mix-counter: id of another HTML element on the page to be updated with the current total of matching mix items on each filter action.
data-mix-counter-label: description of items to be used in the counter. Defaults to 'result'.
data-mix-per-page: Number of items to show per page. If ommitted, pagination will be disabled.
data-mix-pager: id of a ul tag on the page to act as the container for the pagination controls mixitup generates.
data-mix-type: Used for initial filtering and other customizations. Refer to src/scripts/components/filter.js for more details and available options.
data-placeholder: id of another HTML element on the page to be shown when no items match the current filter.

Specifications

Properties

Property	Type	Description	Required	Default
attributes	`array`	List of dimensions with with options for each one	Yes	-
└ item	`object`	-	-	-
└ name	`string`	Unique filter-group name for mixitup's multi-dimensional filtering	-	-
└ label	`string`	Name of this attribute	-	-
└ default_value	`string`	Value for first option in list	-	-
└ default	`string`	Label for first option in list	-	-
└ type	`string`	Control to render Allowed Values: `"accordion"`, `"select"`	-	`"select"`
└ options	`array\|object`	By default an array of options is passed in. If an object is provided instead with a key of `_optgroups` set to `true`, the filter will use an array of arrays in the `groups` key	-	-
└ item	`object`	If array, individual option item	-	-
└ value	`string`	-	-	-
└ label	`string`	-	-	-
└ _optgroups	`boolean`	Flag to enable grouping of options	-	-
└ groups	`object`	Key names are used as optgroup labels, values are arrays of key/value pairs for the action `option` elements	-	-
└ [additionalProperties]	`string`	-	-	-
enable_search	`boolean`	Option to enable search field. Searches data-title attribute on mix items	No	`false`
enable_status	`boolean`	Option to enable section for current filter terms / clear buttons	No	`false`
enable_reset	`boolean`	Show a reset button to clear filter	No	`false`

Styling

Colors

Name	Application	Custom Property	Roles	Default Opacity	Description
bg-color	background	-	surface	-	-
text-color	text	-	on-surface	-	-
status-bg-color	background	-	on-background	-	-
status-text-color	text	-	background	-	-

Changelog

6.29.0 (2025-06-11)

fix: remove highlight class from reset button (#813) (95c8940)
fix: style reset button like a regular link (#807) (76b6b2d)

6.19.0 (2024-12-11)

fix: add grid area (#707) (c628829)
fix: grid area for every size (#714) (c2efc02)

6.17.0 (2024-11-13)

feat: style updates for program finder redesign (#671) (48a5ba9)

6.12.1 (2024-06-12)

fix: set correct prefixes for space vars for color system v2 (f023a65)

6.12.1 (2024-06-12)

fix: set correct prefixes for space vars for color system v2 (f023a65)

6.5.0 (2023-12-13)

fix: correctly set size of close buttons in status (#521) (a71d793)
fix: enable status bar outside of program-specific setting (cb997c7)
fix: only sort for "program-specific" (5d315da)

3.2.0 (2023-04-03)

fix: adjust layout of faq results counter (#396) (dd357fd)
fix: adjust spacing of search activity icon in (#398) (369de25)

1.32.0 (2022-04-26)

feat: support optgroups in attribute options (e79510f)

1.27.0 (2021-12-10)

fix: add check for vertical filter element (120e485)
fix: support 0 or more accordion filters (b65171c)

1.24.0 (2021-09-15)

fix: fix bug where results were changing order (#141) (9ade4e2)
feat: added filter by url query parameters (#142) (9802261)

1.23.0 (2021-08-04)

fix: added filter types to components page (#134) (6c3bdaf)
fix: only apply sticky if 10 or less options (635f256)
fix: only apply sticky style on screens tall enough (f87eb9a)

1.20.1 (2021-06-02)

fix: add correct spacing to heading (0cf3a9e)

1.19.1 (2021-05-04)

fix: remove fixed height set on md and up (#91) (83d600a)

1.18.0 (2021-04-01)

fix: scroll up on page change, reset page on filter update, style active page (#60) (ef6af3e)

1.5.0 (2020-06-23)

feat: add option for status/reset buttons (db0d98e)

1.2.0 (2020-04-17)

fix: update select styling (4d79695)
feat: add boxed style variation (4adfe51)
feat: add search option (db38533)
feat: support counters, pagination, scope per instance (b17472d)

1.1.0

filter added

Contains

Other core components embedded within this template.

Accordion

Contained In

Other components that use this component (not including freeform content slots).

Filter List

Examples

Category 1, Tag A

Red

Category 2, Tag A

Red

Category 3, Tag B

Green

Category 2, Tag B

Green

Category 3, Tag A

Red

Category 1, Tag C

Blue

Category 1, Tag A

Red

Category 2, Tag A

Red

Category 3, Tag B

Green

Category 2, Tag B

Green

Category 3, Tag A

Red

Category 1, Tag C

Blue

Code

<aero-filter pagination="cumulative" per-page="2">
	<button slot="controlstoggle">Toggle Filter Controls</button>
	{# <button slot="pagecontrolnext">Show More</button> #}
	<button slot="pagecontrolprev">Previous</button>
	<button slot="pagecontrolnext">Next</button>
	<form slot="controls">
		<fieldset>
			<label for="search">Search</label>
			<input type="search" id="search" name="search" />
		</fieldset>
		<fieldset data-dimension="color">
			<label for="aero-filter-color">Color</label>
			<select name="color" id="aero-filter-color">
				<option value="">All</option>
				<option value="red">Red</option>
				<option value="blue">Blue</option>
				<option value="green">Green</option>
			</select>
		</fieldset>
		<fieldset data-dimension="category">
			<label for="aero-filter-category">Category</label>
			<select name="category" id="aero-filter-category">
				<option value="">All</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</fieldset>
		<fieldset data-dimension="tag">
			<label for="aero-filter-tag">Tag</label>
			<select name="tag" id="aero-filter-tag">
				<option value="">All</option>
				<option value="a">A</option>
				<option value="b">B</option>
				<option value="c">C</option>
			</select>
		</fieldset>
		<x-button class="tux-c-button--narrow" variant="filled" type="submit">Filter Programs</x-button>
		<x-button class="tux-c-button--narrow" variant="outlined" type="reset">Reset Filters</x-button>
	</form>
	<div class="tux-l-auto-grid">
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '1',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Vehicula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '2',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Consectetur</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'green',
			'data-filter-category': '3',
			'data-filter-tag': 'b'
		}">
			<x-slot name="header">
				<h2 class="h4">Vulputate</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3, Tag B</p>
				<p>Green</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'green',
			'data-filter-category': '2',
			'data-filter-tag': 'b'
		}">
			<x-slot name="header">
				<h2 class="h4">Sem Magna</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2, Tag B</p>
				<p>Green</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '3',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'blue',
			'data-filter-category': '1',
			'data-filter-tag': 'c'
		}">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1, Tag C</p>
				<p>Blue</p>
			</x-slot>
		</x-card>
		{# repeat of all items #}
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '1',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Vehicula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '2',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Consectetur</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'green',
			'data-filter-category': '3',
			'data-filter-tag': 'b'
		}">
			<x-slot name="header">
				<h2 class="h4">Vulputate</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3, Tag B</p>
				<p>Green</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'green',
			'data-filter-category': '2',
			'data-filter-tag': 'b'
		}">
			<x-slot name="header">
				<h2 class="h4">Sem Magna</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2, Tag B</p>
				<p>Green</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'red',
			'data-filter-category': '3',
			'data-filter-tag': 'a'
		}">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3, Tag A</p>
				<p>Red</p>
			</x-slot>
		</x-card>
		<x-card :attrs="{
			'aero-filter-item': '',
			'data-filter-color': 'blue',
			'data-filter-category': '1',
			'data-filter-tag': 'c'
		}">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1, Tag C</p>
				<p>Blue</p>
			</x-slot>
		</x-card>
	</div>
</aero-filter>

Category 1

Tag A

Category 2

Tag A

Category 3

Tag B

Category 2

Tag B

Category 3

Tag B

Category 1

Tag C

Code

<div class="mixitup" data-placeholder="unique-id-no-items">
	{{ include( 'components/filter.twig', {
		attributes: [
			{
				name: 'category',
				label: 'Category',
				default: 'Select Category',
				options: [
					{
						value: 'category-1',
						label: 'Category 1'
					},
					{
						value: 'category-2',
						label: 'Category 2'
					},
					{
						value: 'category-3',
						label: 'Category 3'
					}
				],
			},
			{
				name: 'tag',
				label: 'Tag',
				default: 'Select Tag',
				options: [
					{
						value: 'tag-a',
						label: 'Tag A'
					},
					{
						value: 'tag-b',
						label: 'Tag B'
					},
					{
						value: 'tag-c',
						label: 'Tag C'
					}
				],
			}
		]
	} ) }}
	<div class="tux-c-filter-placeholder" id="unique-id-no-items" style="display: none;">
		<p>No programs were found matching the selected filters.</p>
	</div>
	<div class="tux-l-card-grid">
		<x-card class="mix category-1 tag-a">
			<x-slot name="header">
				<h2 class="h4">Vehicula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-a">
			<x-slot name="header">
				<h2 class="h4">Consectetur</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-b">
			<x-slot name="header">
				<h2 class="h4">Vulputate</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-b">
			<x-slot name="header">
				<h2 class="h4">Sem Magna</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-a">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-1 tag-c">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag C</p>
			</x-slot>
		</x-card>
	</div>
</div>

Category 1

Tag A

Category 2

Tag A

Category 3

Tag B

Category 2

Tag B

Category 3

Tag B

Category 1

Tag C

Code

<div class="mixitup" data-placeholder="unique-id-no-items">
	{{ include( 'components/filter.twig', {
		class: 'tux-c-filter--vertical',
		filter_title: 'Filter Items',
		enable_reset: true,
		enable_search: true,
		attributes: [
			{
				name: 'category',
				label: 'Category',
				default: 'Select Category',
				options: [
					{
						value: 'category-1',
						label: 'Category 1'
					},
					{
						value: 'category-2',
						label: 'Category 2'
					},
					{
						value: 'category-3',
						label: 'Category 3'
					}
				],
			},
			{
				name: 'tag',
				label: 'Tag',
				default: 'Select Tag',
				options: [
					{
						value: 'tag-a',
						label: 'Tag A'
					},
					{
						value: 'tag-b',
						label: 'Tag B'
					},
					{
						value: 'tag-c',
						label: 'Tag C'
					}
				],
			}
		]
	} ) }}
	<div class="tux-c-filter-placeholder" id="unique-id-no-items" style="display: none;">
		<p>No programs were found matching the selected filters.</p>
	</div>
	<div class="tux-l-card-grid">
		<x-card class="mix category-1 tag-a">
			<x-slot name="header">
				<h2 class="h4">Vehicula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-a">
			<x-slot name="header">
				<h2 class="h4">Consectetur</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-b">
			<x-slot name="header">
				<h2 class="h4">Vulputate</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-b">
			<x-slot name="header">
				<h2 class="h4">Sem Magna</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-a">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-1 tag-c">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag C</p>
			</x-slot>
		</x-card>
	</div>
</div>

Category 1

Tag A

Category 2

Tag A

Category 3

Tag B

Category 2

Tag B

Category 3

Tag B

Category 1

Tag C

Code

<div class="mixitup" data-placeholder="unique-id-no-items">
	{{ include( 'components/filter.twig', {
		class: 'tux-c-filter--vertical',
		filter_title: 'Filter Items',
		enable_reset: true,
		enable_search: true,
		attributes: [
			{
				name: 'category',
				label: 'Category',
				default: 'Select Category',
				type: 'accordion_filter',
				options: [
					{
						value: 'category-1',
						label: 'Category 1',
						count: 2
					},
					{
						value: 'category-2',
						label: 'Category 2',
						count: 2
					},
					{
						value: 'category-3',
						label: 'Category 3',
						count: 2
					}
				],
			},
			{
				name: 'tag',
				label: 'Tag',
				default: 'Select Tag',
				type: 'accordion_filter',
				options: [
					{
						value: 'tag-a',
						label: 'Tag A',
						count: 3
					},
					{
						value: 'tag-b',
						label: 'Tag B',
						count: 2
					},
					{
						value: 'tag-c',
						label: 'Tag C',
						count: 1
					}
				],
			}
		]
	} ) }}
	<div class="tux-c-filter-placeholder" id="unique-id-no-items" style="display: none;">
		<p>No programs were found matching the selected filters.</p>
	</div>
	<div class="tux-l-card-grid">
		<x-card class="mix category-1 tag-a">
			<x-slot name="header">
				<h2 class="h4">Vehicula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-a">
			<x-slot name="header">
				<h2 class="h4">Consectetur</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag A</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-b">
			<x-slot name="header">
				<h2 class="h4">Vulputate</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-2 tag-b">
			<x-slot name="header">
				<h2 class="h4">Sem Magna</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 2</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-3 tag-a">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 3</p>
				<p>Tag B</p>
			</x-slot>
		</x-card>
		<x-card class="mix category-1 tag-c">
			<x-slot name="header">
				<h2 class="h4">Ligula</h2>
			</x-slot>
			<x-slot name="content">
				<p>Category 1</p>
				<p>Tag C</p>
			</x-slot>
		</x-card>
	</div>
</div>

Table of Contents

Filter Container

Specifications

Properties

Styling

Colors

Changelog

6.29.0 (2025-06-11)

6.19.0 (2024-12-11)

6.17.0 (2024-11-13)

6.12.1 (2024-06-12)

6.12.1 (2024-06-12)

6.5.0 (2023-12-13)

3.2.0 (2023-04-03)

1.32.0 (2022-04-26)

1.27.0 (2021-12-10)

1.24.0 (2021-09-15)

1.23.0 (2021-08-04)

1.20.1 (2021-06-02)

1.19.1 (2021-05-04)

1.18.0 (2021-04-01)

1.5.0 (2020-06-23)

1.2.0 (2020-04-17)

1.1.0

Related

Contains

Contained In

Examples

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula

Filter Items

Filter Items

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula

Filter Items

Filter Items

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula