Chip group — Wildeye Design System

Try it

Tab in, move with the arrow keys and press Space to choose.

Crop2 selected

Selection

Overflow

Variant

Size

Clearable

Disabled

<WildChipGroup
  v-model="crops"
  label="Crop"
  :max-visible="5"
  clearable
  :options="[
    { value: 'avocado', label: 'Avocado' },
    { value: 'kiwifruit', label: 'Kiwifruit' },
    { value: 'apples', label: 'Apples' },
    { value: 'citrus', label: 'Citrus' },
    …
  ]"
/>

When to use

Use it to choose values that combine, such as crops.
Use single selection for one value out of many short ones.

Don’t use it

For a few options that fit on one line. Use a Segmented controller.
To show filters already applied, each with a ×. Use Filter chips.

Anatomy

A label, the chips, and the group’s actions: a count, Clear all and +N more.

Crop2 selected

The count and Clear all sit above the row, so they never re-wrap it.

Single and multiple

Region

Crop2 selected

<WildChipGroup v-model="region" selection-mode="single"
  label="Region" :options="regions" clearable />
<WildChipGroup v-model="crops" label="Crop"
  :options="crops" clearable />

In single mode, pressing the chosen chip again keeps it, as a radio does. Clear goes back to none.

Overflow

Pick a rule by how many options there are and how much room the row has.

Use wrap for up to a dozen short options.

<WildChipGroup v-model="crops" :options="crops"
  :max-visible="5" />

A chosen chip never folds away, so +5 more counts only what’s hidden.

<WildChipGroup v-model="region" selection-mode="single"
  :options="regions" layout="scroll" />

Scroll keeps one line, and fades the edge that has more.

With icons

Sensor type2 selected

Choosing an icon chip swaps its icon for the tick, so its width doesn’t change.

Variants and sizes

outline

accent

Use outline, so the chosen chips are the only colour in the row.

<WildChipGroup v-model="status" :options="[
  { value: 'alarm', label: 'In alarm', variant: 'error' },
  { value: 'warning', label: 'Warning', variant: 'warning' },
  { value: 'offline', label: 'Offline' },
  { value: 'reporting', label: 'Reporting', variant: 'success' },
]" />

Give an option a status variant only when it filters on that state.

sm

md

lg

28, 32 and 36px. Use small in filter panels and table headers.

States

rest

hover

pressed

focus

not chosen

chosen

A chosen chip darkens under the pointer. The focus ring shows for the keyboard only.

one option disabled

group disabled

A disabled group leaves the tab order.

In context

Sites3 of 14 sites

Crop2 selected

Region

Te Puke Block 4Kiwifruit · Bay of Plenty18 kPa
North PumpKiwifruit · Bay of Plenty24 kPa
Katikati RidgeAvocado · Bay of Plenty31 kPa

Accessibility

Single mode is a radio group and multiple a set of toggle buttons. The chips are one tab stop.

Key	What it does
Tab	Reaches Clear all, then the chips, then +N more.
Arrow keys	Next or previous chip, skipping disabled ones. Single mode also chooses it.
Home / End	First or last chip.
Space / Enter	Toggles the chip, or chooses it.
Enter on Clear all	Clears the choice and focuses the first chip.

Props

Prop	Type	Default	Description
v-model	string \| null · string[]	—	One value in single mode, an array in multiple.
options	ChipOption[]	—	Value, label, and an optional icon, variant or disabled.
selection-mode	'single' \| 'multiple'	'multiple'	A radio group, or a row of toggles.
label / aria-label	string	—	The group’s visible name, or a hidden one.
variant	'outline' \| 'accent' \| 'success' \| 'warning' \| 'error'	'outline'	The chip’s variant. An option’s own wins.
size	'sm' \| 'md' \| 'lg'	'md'	28, 32 or 36px chips.
layout	'wrap' \| 'scroll'	'wrap'	Wrap onto new lines, or scroll one line.
max-visible	number	—	Folds the rest behind +N more.
clearable	boolean	false	Shows the count and Clear all.
clear-label	string	'Clear all'	Clear, in single mode.
disabled	boolean	false	Disables every chip.
name	string	—	Posts the value with a form.
@clear	() => void	—	Fired by Clear all.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Chosen fill; +N more and Clear all.
--color-white	#FFFFFF	Chosen label and tick.
--global-blue-1100	#0C296A	+N more and Clear all on hover.
--global-neutral-grey-500	#E6E6E6	Resting outline.
--global-blue-100	#EBFAFF	Accent ground.
--global-neutral-grey-1000	#4F4D55	The selection count.
(no token)	#0A090B at 8% / 12%	Chosen chip hover and press.
--global-blue-1000	2px white + 2px #1877F2	Focus ring.
--spacing-2	8px	Gap between chips.