Filter chips — Wildeye Design System

Try it

Remove a filter and the count widens with it. Tab into the row, then use the arrow keys and Backspace.

Size

Label

Count

Icons

Disabled

<WildFilterChips
  :chips="activeFilters"
  label="Filters"
  :count="countLabel"
  empty-text="No filters applied"
  @remove="removeFilter"
  @clear="clearFilters"
/>

Focus lands where the chip was. Remove one and the next chip takes the focus, or Clear all does when it was the last.

When to use

Use filter chips to show the filters narrowing a list, each one removable.
Put them under the list’s title, with the count of what’s left.

Don’t use it

To choose the filters in the first place. Use a Chip group or a Dropdown pill.

Anatomy

A label, the chips, Clear all and the count, on one line that wraps. Only the chips wrap; the label and count hold the ends.

The field is in regular weight and the value in 500, so a row scans by what was chosen.

Chip content

A value on its own, a field and its value, and an optional icon.

value

field and value

with icon

truncated

Add the field when values could be confused, as in “Alarms: Active”. Values past 240px truncate, and the tooltip carries the whole value.

Sizes

28 under a table, 32 in a toolbar, 36 beside a large search field.

sm · 28

md · 32

lg · 36

Text steps with the height: 12, 13 and 14px. The × target is 24px, and 28px at large.

States

The chip isn’t a button. Its states belong to the ×, and the chip answers them.

rest

hover

pressed

focus

disabled

Hovering the × fills a blue circle behind it, a shade deeper when pressed. Focus rings the whole chip, because the chip is what goes.

disabled row

no filters

Disabled locks the chips and leaves the count readable. With no filters, the row says so in secondary ink.

In context

Add filters from the button, remove them from the chips, and watch the rows change.

Sites

Bore 12Soil moisture 18 kPa · Kiwifruit · 64% battery
Emu ParkSoil moisture 55 kPa · Kiwifruit · 88% battery
Omokoroa Bore 10Soil moisture 38 kPa · Kiwifruit · 61% battery
Pongakawa Bore 17Soil moisture 75 kPa · Kiwifruit · Offline
and 39 more

“43 of 120 sites” says how much is hidden as well as what’s left. New chips scale in at the end of the row.

Accessibility

The row is one tab stop. A screen reader hears which filter went, and the new count.

Key	What it does
Tab	Moves into the row, onto the chip focused last, then out.
→ / ←	Moves between chips and Clear all, wrapping at the ends.
Home / End	Moves to the first or last item.
Backspace / Delete	Removes the focused chip.
Enter / Space	Removes the focused chip, or clears all from Clear all.

Props

Prop	Type	Default	Description
chips	{ id, label, field?, icon? }[]	—	The filters, in the order they were added.
size	'sm' \| 'md' \| 'lg'	'sm'	28, 32 or 36px tall.
label	string	—	A leading label, which also names the row.
count	string	—	The result count, announced when it changes.
clear-label	string	'Clear all'	Shown from two chips up.
empty-text	string	—	Shown when there are no chips.
aria-label	string	'Active filters'	The row’s name with no visible label.
disabled	boolean	false	Locks the chips and Clear all.
@remove	(id: string) => void	—	A chip’s ×, Backspace or Delete.
@clear	() => void	—	Clear all.

Tokens

Token	Value	Where it lands
--global-blue-100	#EBFAFF	Chip ground.
--global-blue-200	#D6F4FF	The × circle on hover.
--global-blue-300	#BDEDFF	Chip edge; the × circle pressed.
--global-blue-400	#A3E7FF	Chip edge while the × is hovered.
--global-blue-1100	#0C296A	Chip text; the × on hover.
--global-blue-1000	#1877F2	The × at rest; Clear all; focus.
--global-neutral-grey-1000	#4F4D55	Count and empty text.
(no token)	24px	Chip radius.