Dropdown pill

Dropdown

A menu that opens from a trigger and holds a list of choices or actions.

Refined portWildDropdown.vueDropdowns/DropdownWDropdown, WDropdownMenu

Try it

Pick an item, then reopen the menu from the keyboard and use the arrow keys.

Content

Align

Min width

Choice descriptions

Disabled item

<WildDropdown v-model:open="open" :min-width="240">
  <template #trigger="{ toggle }">
    <WildButton variant="borders" size="sm" icon="chevron-down" @click="toggle">{{ range }}</WildButton>
  </template>
  <WildDropdownItem label="Last 7 days" :selected="range === 'Last 7 days'" @click="range = 'Last 7 days'" />
  <WildDropdownItem label="Last 30 days" :selected="range === 'Last 30 days'" @click="range = 'Last 30 days'" />
  <WildDropdownItem label="Last 90 days" :selected="range === 'Last 90 days'" @click="range = 'Last 90 days'" />
  <WildDropdownItem label="This month" :selected="range === 'This month'" @click="range = 'This month'" />
</WildDropdown>

States

A chosen item is filled blue with a tick. Destructive items are red, and disabled items turn grey but keep their place.

Last 7 days

Last 30 days

Last 90 days

This month

choices

Edit site

Download

Delete site

actions

<WildDropdownItem label="Last 30 days" selected />
<WildDropdownItem label="This month" disabled />
<WildDropdownItem label="Delete site" icon="trash" variant="destructive" />

Accessibility

The trigger announces a menu and whether it’s open. Choices are read as radio items with their checked state.

Key	What it does
Enter / Space	On the trigger, opens on the chosen item. In the menu, picks and closes.
Down / Up	On the trigger, opens on the first or last item. In the menu, moves and wraps.
Home / End	Moves to the first or last item.
A letter	Moves to the next item starting with it.
Escape	Closes and returns focus to the trigger.
Tab	Closes the menu and moves on.

Props

Prop	Type	Default	Description
open	boolean	false	Open state, bound with v-model:open.
align	'start' \| 'end'	'start'	Trigger edge the menu aligns to.
placement	'bottom' \| 'top'	'bottom'	Preferred side; flips when there isn’t room.
minWidth	number	200	Narrowest width in px; grows to fit.
maxHeight	number	400	Height in px past which it scrolls.
matchTriggerWidth	boolean	false	Sets the menu to the trigger’s width.
fullWidth	boolean	false	Container spans its parent.
closeOnClickOutside	boolean	true	Closes on a press outside.
closeOnEscape	boolean	true	Closes on Escape.
closeOnScroll	boolean	true	Closes when the page scrolls.
repositionOnScroll	boolean	false	With closeOnScroll off, follows the trigger instead of closing.
#trigger	slot { open, toggle }	—	The button that opens the menu.
Item label	string	—	The item’s text.
Item value	string \| number	—	Sent with @click.
Item selected	boolean	false	Fills the chosen item and adds a tick.
Item showCheckmark	boolean	true	Shows the selected item’s tick.
Item disabled	boolean	false	Greys the item out and blocks it; arrow keys skip it.
Item icon	string	—	Icon name, shown before the label.
Item variant	'default' \| 'destructive'	'default'	Destructive turns the item red.
Item description	string	—	A second line under the label.
Item @click	(value) => void	—	Fires with value when picked.

Tokens

Token	Value	Where it lands
--global-neutral-grey-500	#E6E6E6	Menu border.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Menu elevation.
--radius-lg	8px	Menu corners.
--global-cool-grey-1200	#24262B	Item label.
--global-cool-grey-900	#595E6A	Item icon and description.
--global-neutral-grey-300	#F1F1F1	Item hover.
--global-blue-1000	#1877F2	Chosen item fill and focus ring.
--global-blue-1100	#0C296A	Chosen item fill on hover.
--color-white	#FFFFFF	Chosen item label and tick.
--global-red-900	#BC1C1C	Destructive label.
--global-red-100	#FEEBEB	Destructive item hover.
--global-neutral-grey-200	#F5F5F5	Chosen item fill when disabled.
--global-neutral-grey-800	#ADACB0	Disabled label, icon and tick.

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"
/>

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.

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.

Advanced multi-select

Picks many items from a large, grouped list, with search, select-all and a running count.

Live React portWildAdvancedMultiSelectDropdown.vueDropdowns/Advanced Multi-Select

Try it

Search for “bore”, then tick one site in a group and watch its group and client go mixed.

Size

Chips

Disabled

<WildAdvancedMultiSelectDropdown
  v-model="chosen"
  :nodes="sites"
/>

When to use

Use it to choose many sites from a list grouped by client and group.
Use it when people pick whole groups at once, such as every site a client owns.

Don’t use it

For a flat list, or a single choice. Use Search select.
For a few options that should all stay visible. Use Checkbox.

Anatomy

Trigger: the placeholder, a count of selected sites, or the select-all label.
Search: filters as you type, and opens each match’s client and group.
Select all: ticks or clears every site.
Tree: clients, groups and sites, each with a checkbox.
Chips: one per top-level client or site with a selection, each removable.

Selection

Ticking a client or group ticks every site under it. When only some are ticked, its box shows mixed, and so does Select all.

Orchard Holdings · 2/5Canterbury Ag

<WildAdvancedMultiSelectDropdown v-model="chosen" :nodes="sites" />

A fully selected client shows as a blue chip. A part-selected one counts its own sites, here 2/5.

Sizes

Three heights. The default is sm, at 36px.

sm · 36

md · 40

lg · 44

<WildAdvancedMultiSelectDropdown :nodes="sites" />
<WildAdvancedMultiSelectDropdown size="md" :nodes="sites" />
<WildAdvancedMultiSelectDropdown size="lg" :nodes="sites" />

States

Disabled dims the trigger to 40% and locks its chips.

none

some

all

disabled

Content

Name the items in placeholder and allItemsLabel when they aren’t sites.
Keep labels short. Long ones end in an ellipsis.

Accessibility

The trigger announces the summary it shows. Each tree row announces its level and whether it’s checked, unchecked or mixed.

Key	What it does
Enter / Space	On the trigger, opens or closes the panel. On Select all or a row, ticks or clears every site it covers.
Tab	Moves through search, Select all and the tree. Tabbing out closes the panel.
↓ / ↑	Moves between visible rows, and ↓ from the search into the tree.
→	Opens a client or group, or moves to its first child.
←	Closes a client or group, or moves to its parent.
Home / End	First or last visible row.
Escape	Closes the panel and returns focus to the trigger.

Props

Prop	Type	Default	Description
nodes	TreeNode[]	—	{ id, label, children? }, nested to any depth.
v-model	SelectionOutput	—	The ticked sites: { mode, selectedNodeIds, selectedLeafIds }.
placeholder	string	'Select sites...'	Trigger text when nothing is selected.
allItemsLabel	string	'All Sites'	Select-all row, and the trigger when all are selected.
size	'sm' \| 'md' \| 'lg'	'sm'	Trigger height: 36, 40 or 44px.
showChips	boolean	true	Shows the chips under the trigger.
maxHeight	number	400	Height cap on the whole panel, in px.
disabled	boolean	false	Dims the trigger and locks its chips.
virtualized	boolean	false	Reserved for long lists. Has no effect yet.
@change	(value: SelectionOutput) => void	—	Fires with the new selection on every tick.
@open / @close	() => void	—	When the panel opens or closes.

Tokens

Token	Value	Where it lands
--radius-xl	10px	Trigger and search corners.
--radius-lg	8px	Panel corners.
--radius-md	6px	Row corners.
--color-border-default	#E6E6E6	Borders at rest, and the panel dividers.
--color-grey-800	#7F7D83	Trigger border on hover, and chevrons.
--color-grey-200	#F1F1F1	Trigger fill on hover.
--color-grey-100	#F5F5F5	Row fill on hover.
--color-primary-active	#1877F2	Open border and keyboard focus ring.
--color-primary-light	#EBFAFF	Select all, once everything is selected.
--global-blue-1100	#0C296A	Select all text on that fill, 12.75:1 (blue-1000 would be 3.96:1).
--color-grey-1100	#1D1C20	Row and value text.
(no token)	#4F4D55	Placeholder and no-match text.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), …	Panel elevation.

Search select

A select you can type into, for lists too long to scan by eye.

Refined portWildSearchSelect.vue

Try it

Open it and type “ohau” or a client’s name. The list holds 120 sites.

Site

Search by site or client.

Selection

Size

Error

Disabled

<WildSearchSelect
  v-model="siteId"
  label="Site"
  placeholder="Select site"
  search-placeholder="Search sites or clients"
  help="Search by site or client."
  :options="sites"
/>

When to use

Use it for lists too long to scan, such as sites or clients.
Use multiple when more than one choice is allowed.
Add meta to each option when names repeat across clients.

Don’t use it

For a dozen options or fewer. Use Select.
For two to five options that should all show. Use Radio group.
When the answer may not be in the list. Use Input autocomplete.

Anatomy

A label and hint, the trigger, and a panel: a search row, rows with their meta, and a count line when the list is cut short.

Site120 sites

Showing the first 6 of 31 matches. Keep typing to narrow.

Multiple selection

Rows become checkboxes and the panel stays open. Choices show as chips, or as the first and a +N badge when space is tight.

Bore 12North PumpTank 3 — Woolshed

chips

+N badge

Sizes

The same heights as Select. The rows grow with the field.

sm · 36

lg · 44

States

Site

Choose a site to continue.

error

Site

disabled

Client

Site

Pick a client and the site list unlocks with its sites.

Content

Label it with a noun: Site, Client.
Write the placeholder as Select plus the noun: Select site.
Make disabledText say what unlocks the field: Choose a client first.
Keep meta short. A long one is cut off to fit.

Accessibility

The trigger announces its label and value. Opening focuses the search, and a screen reader follows the highlight and hears the count as you type.

Key	What it does
Enter / Space / ↓ / ↑	On the trigger, opens the list.
A letter	On the trigger, opens it already searching.
↓ / ↑	Moves the highlight. Wraps and skips unavailable rows.
Page Down / Page Up	Moves the highlight eight rows.
Enter	Chooses the highlighted row. In multiple, ticks or unticks it and stays open.
Escape / Alt + ↑	Closes the list, focus back on the trigger.
Tab	Closes the list and moves on.
Backspace / Delete	On a chip’s cross, removes that choice.

Props

Prop	Type	Default	Description
v-model	string \| string[] \| null	—	The choice, or choices with multiple.
options	{ value, label, meta?, disabled? }[]	—	The choices. Meta is searched too.
label	string	—	The field’s visible name.
ariaLabel	string	—	Accessible name without a visible label.
placeholder	string	'Select option'	Trigger text before anything is chosen.
required	boolean	false	Asterisk on the label; announced as required.
multiple	boolean	false	Allows more than one choice.
error	boolean \| string	—	A string is shown as the message.
disabled	boolean	false	Can’t be opened or tabbed to.
disabledText	string	—	Trigger text while disabled.
maxDisplayItems	number	50	Rows listed before the count line.
size	'sm' \| 'lg'	'sm'	Height: 36 or 44px.
showChips	boolean	true	Multiple only: chips, or first choice and +N.
hint	string	—	Short context beside the label.
help	string	—	Guidance under the field.
searchPlaceholder	string	'Search'	Placeholder in the search row.
noMatchText	string	'Nothing found'	Shown when nothing matches.
name	string	—	Posts the value with a form.

Tokens

Token	Value	Where it lands
--radius-lg	8px	Trigger and panel corners.
--global-neutral-grey-600	#DCDCDE	Trigger border at rest.
--global-neutral-grey-800	#ADACB0	Trigger border on hover.
--global-blue-1000	#1877F2	Focused or open edge, the tick, Clear all.
--color-error	#E12121	Trigger edge on error.
--global-neutral-grey-500	#E6E6E6	Panel edge, disabled border.
--global-neutral-grey-300	#F1F1F1	Highlighted row.
--global-neutral-grey-200	#F5F5F5	Disabled ground.
--global-neutral-grey-400	#ECECED	Dividers inside the panel.
--global-neutral-grey-1000	#4F4D55	Placeholder, meta, count line.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	The open panel.

Icon menu

A menu hung off one icon button, for the actions on a table or list row.

Refined portWildIconMenu.vueWIconMenu, KebabGlyph

Try it

Open it with a click or the arrow keys, then pick an action.

Nothing picked yet

Size

Row icons

Disabled

<WildIconMenu
  name="kebab"
  aria-label="Actions for Alarm 1"
  size="md"
  :options="alarmActions"
  @select="onAction"
/>

Accessibility

The trigger is a menu button, so a screen reader hears its label and that it opens a menu. Pass ariaLabel.

Key	What it does
Enter / Space	On the trigger, opens the menu on the first action. On an action, runs it.
Down / Up arrow	On the trigger, opens on the first or last action. In the menu, moves between actions.
Home / End	Moves to the first or last action.
A letter	Moves to the next action starting with it.
Escape	Closes the menu and returns focus to the trigger.
Tab	Closes the menu and moves on.

Props

Prop	Type	Default	Description
name	string	—	Trigger icon name. Use a kebab for row actions.
options	{ Id, Name, Icon? }[]	[]	The actions, in order. The refined menu adds Destructive and Disabled.
ariaLabel	string	'Menu'	Accessible name for the trigger.
size	'sm' \| 'md' \| 'lg'	'md'	Trigger size: 24, 28 or 32px.
iconClass	string	'h-4 w-4 …'	Classes on the trigger icon: 16px, grey.
disabled	boolean	false	Blocks the trigger, so the menu never opens.
menuClass	string	'w-44'	Menu width. The default is 176px.
portal	boolean	true	Renders the menu on the body, above clipping tables.
@select	(option) => void	—	Fires with the picked action.
@open-change	(open: boolean) => void	—	Fires when the menu opens or closes.

Tokens

Token	Value	Where it lands
--global-neutral-grey-900	#7F7D83	Trigger icon at rest.
--global-neutral-grey-1200	#1D1C20	Trigger icon on hover.
--global-neutral-grey-300	#F1F1F1	Trigger and row hover.
--global-neutral-grey-400	#ECECED	Trigger ground while pressed or open.
--global-neutral-grey-800	#ADACB0	Disabled trigger icon and row text.
--global-blue-1000	#1877F2	Trigger icon while open; focus ring.
--global-neutral-grey-500	#E6E6E6	Menu border.
--global-cool-grey-1200	#24262B	Action text.
--global-cool-grey-900	#595E6A	Row icons.
--global-red-900	#BC1C1C	Destructive action text.
--global-red-100	#FEEBEB	Destructive row hover.
--shadow-dropdown	0 4px 12px	Menu elevation.

Link popup

A table link that opens related detail in a shared popup window, so the list keeps its place.

Refined portWildLinkPopup.vueWLinkPopup

Try it

Click a last sent date, then another, and watch both open in the same window.

Alarm	Last sent
High pressure	Tue Sep 29 2026, opens in a new window
Low tank level	Mon Sep 28 2026, opens in a new window
Logger offline	Fri Sep 25 2026, opens in a new window

Disabled

<WildLinkPopup
  :text="dateFormatter(params)"
  :link="formatHistoryLink(params)"
  title="Alarm history"
/>

States

Hover underlines the text. Use disabled for viewers without edit rights, so it shows as plain text.

Tue Sep 29 2026, opens in a new window

rest

Tue Sep 29 2026, opens in a new window

hover

Tue Sep 29 2026, opens in a new window

focus

Tue Sep 29 2026

disabled

Tue Sep 29 2026, opens in a new window

truncated

<WildLinkPopup :text="dateFormatter(params)" :link="formatHistoryLink(params)" title="Alarm history" />
<WildLinkPopup :text="dateFormatter(params)" :link="formatHistoryLink(params)" title="Alarm history" disabled />

Text too long for its cell ends in an ellipsis, and hovering it shows the full text.

Accessibility

It’s a link, and a screen reader hears its text followed by “opens in a new window”. A disabled one is plain text and leaves the tab order.

Key	What it does
Tab	Moves focus to the link.
Enter	Opens the link in a 960 × 640 window.
Ctrl / Cmd + Enter	Opens it in a new tab instead.
Shift + Enter	Opens it in a new browser window.

Props

Prop	Type	Default	Description
text	string	—	The words shown, such as a formatted date.
link	string	—	The address the window opens.
title	string	—	The window’s name. The same name reuses the same window.
disabled	boolean	false	Plain text, with no link and no tab stop.
state	'rest' \| 'hover' \| 'focus'	—	Pins a state for static examples. Omit for live use.
style	CSSProperties	—	Inline styles on the link or plain text.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Link text, on white grounds.
--global-neutral-grey-1100	#2D2B32	Disabled text.
--font-weight-bold	600	Text weight.
--color-primary-active	#1877F2	Keyboard focus ring, outside a 2px gap.
(no token)	960 × 640	Window size.

Dropdowns

Try it

When to use

States

Content

Accessibility

Props

Tokens

Try it

When to use

Anatomy

Selected

Accessibility

Props

Tokens

Try it

When to use

Anatomy

Selection

Sizes

States

Content

Accessibility

Props

Tokens

Try it

When to use

Anatomy

Multiple selection

Sizes

States

Content

Accessibility

Props

Tokens

Try it

When to use

Anatomy

Sizes

Content

Accessibility

Props

Tokens

Try it

When to use

States

Content

Accessibility

Props

Tokens