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.