Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Popover Filter Chip

ProNew

One chip of a filter bar that reads as a sentence, such as Status is Open or Closed, opens its checkbox choices in a popover and has its own named remove button.

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.

field

Guide and examples

When to use it

Use this for filter bars above tables and lists, where each active filter is a chip people can edit or remove.

Do not use it for single-choice filters (use a select chip) or for filters that need typing a value.

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.

Log in Get Pro for $35

Props

PopoverFilterChip

Prop	Type	Default	Description
`field`	`string`	-	Field name, e.g. Status.
`options`	`{ value, label }[]`	-	Choices.
`selected / onSelectedChange`	`string[] / fn`	-	Chosen values.
`onRemove`	`() => void`	-	Remove the chip.

Accessibility

The chip's name is the sentence ("Status is Open or Closed"; "Status is any" when empty); the remove button is named "Remove filter: Status is Open".
The chip and its remove button are separate tab stops, so one interactive element is not nested in another.
Choices are a fieldset named after the field, so each checkbox is announced with its group.

Keyboard

Key	Action
Enter or Space on the chip	opens the choices
Tab	from the chip to Remove

Testing

The pattern ships a Testing Library test (popover-filter-chip.test.tsx) that covers the sentence name, joining with or, the any state, the fieldset and removing.