Include Exclude Filter Picker

ProNew

A filter picker where each value cycles through include, exclude and off, so people can say with bug but not wontfix. Use this when a filter needs both what to keep and what to leave out.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

Guide and examples

When to use it

Use it for labels, tags and statuses in issue trackers, mail and search, where excluding a value is as common as requiring one.

Do not use it when only inclusion makes sense. Use a faceted multi-select, which is simpler to read.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	The values.
`value`	`{ include: string[]; exclude: string[] }`	-	The filter (controlled).
`defaultValue`	`{ include, exclude }`	empty	Initial filter.
`onValueChange`	`(value) => void`	-	Runs on every change.
`title`	`string`	`Labels`	Names the filter.

Accessibility

Each row ends with a visually hidden state: , included or , excluded, and shows a + or − in the box.
The button's accessible name carries the counts: Labels filter: 2 included, 1 excluded.
A hint under the list explains that Enter cycles through the three states.
A value can never be in both lists.

Testing

The pattern ships with a Testing Library test (include-exclude-filter-picker.test.tsx) that covers cycling through the states, the summary name, the two lists staying disjoint and clearing.

Guide and examples

When to use it

Use it for labels, tags and statuses in issue trackers, mail and search, where excluding a value is as common as requiring one.

Do not use it when only inclusion makes sense. Use a faceted multi-select, which is simpler to read.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	The values.
`value`	`{ include: string[]; exclude: string[] }`	-	The filter (controlled).
`defaultValue`	`{ include, exclude }`	empty	Initial filter.
`onValueChange`	`(value) => void`	-	Runs on every change.
`title`	`string`	`Labels`	Names the filter.

Accessibility

Each row ends with a visually hidden state: , included or , excluded, and shows a + or − in the box.
The button's accessible name carries the counts: Labels filter: 2 included, 1 excluded.
A hint under the list explains that Enter cycles through the three states.
A value can never be in both lists.

Testing

The pattern ships with a Testing Library test (include-exclude-filter-picker.test.tsx) that covers cycling through the states, the summary name, the two lists staying disjoint and clearing.