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

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

Tabs Search Filter

ProNew

A search box above tabs that searches every tab at once, shows match counts in the tab names, selects the first tab with a match and announces the total.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this for settings and help pages organised in tabs, where people know what they want but not where it lives.

Do not use it when each tab is a different kind of content that should not be searched together.

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

TabsSearchFilter

Prop	Type	Default	Description
`tabs`	`{ value, label, items: string[] }[]`	-	Tabs and the searchable items in each.

Accessibility

Each tab is named with its matches ("Security, 2 matches") while a query is active, so the answer's location is spoken.
A polite status gives the total ("3 results for “in”"); an empty panel says "Nothing here matches."
When the active tab has no match the first tab with one is selected, so no one stares at an empty panel.

Keyboard

Key	Action
Type in the search field	filters and may switch the tab
Tab	from the field to the tabs

Testing

The pattern ships a Testing Library test (tabs-search-filter.test.tsx) that covers no query, counts and the total, jumping to a matching tab and no results.