Dropdown pill

A compact filter that opens a menu, used to build filter bars.

Live React portWildDropdownPill.vueDropdowns/Dropdown Pill

Try it

Press the pill and pick a range. From the keyboard, press Enter to open it and Escape to close it.

7 days

Variant

Size

Disabled

<WildDropdownPill
  variant="outline"
  size="md"
  label="Range"
  :value="range"
  :items="ranges"
/>

When to use

Use it in a filter bar, one pill per dimension: range, site, status.
Use it when the choice is one of a short list that fits in a menu.

Don’t use it

For a field in a form. Use a Select.
For several values at once. Use Filter chips.

Anatomy

A chip showing the current value, and a caret that opens a menu of the others.

7 days

rest

North paddock

accent

Custom range

disabled

<WildDropdownPill label="Range" value="7 days" />

Show the value, not the field name. “7 days” says what the bar is showing; the label goes to screen readers.

Selected

The pill fills in blue while its menu is open and once it holds anything but the default. The chosen row in the menu wears the same fill, so the choice reads as one object.

24 hours

7 days

30 days

Season to date

Custom rangeNeeds a paid plan

Hover the chosen row and it steps one shade darker. Keyboard focus on it adds a white inner ring.

Accessibility

The pill is a button that says whether its menu is open. Opening it moves focus to the chosen row, and closing it returns focus to the pill.

Key	What it does
Enter / Space / ↓	Opens the menu.
↑ / ↓	Moves between rows, skipping disabled ones.
Enter / Space	Picks the row and closes the menu.
Escape	Closes the menu without changing the value.

Props

Prop	Type	Default	Description
label	string	—	The field’s name, for screen readers.
value	string	—	The current choice, shown on the pill.
items	{ label, description?, disabled? }[]	—	The menu rows.
variant	'outline' \| 'accent' \| 'success' \| 'warning' \| 'error'	'outline'	The chip’s variant.
size	'sm' \| 'md' \| 'lg'	'md'	28, 32 or 36px tall.
disabled	boolean	false	Blocks opening.

Tokens

Token	Value	Where it lands
(no token)	24px	Pill corners, from the chip.
--color-border-default	#E6E6E6	Resting border.
--global-blue-1000	#1877F2	Selected pill and chosen row.
--global-blue-1100	#0C296A	Both on hover.
--color-white	#FFFFFF	Label and tick on the blue fill.
--global-neutral-grey-300	#F1F1F1	Row hover.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), …	The open menu.
(no token)	12px	The caret.