Input autocomplete — Wildeye Design System

Try it

Type “pu” and press Enter, then try “ohau”, the arrow keys and Escape.

Site or logger16 on this account

Choose where this alarm watches.

v-model""@select—

Size

Min characters

Row icons

Sub-lines

Free text

Error

Disabled

<WildInputAutoComplete
  v-model="query"
  :options="sites"
  label="Site or logger"
  hint="16 on this account"
  placeholder="Search sites and loggers"
  help="Choose where this alarm watches."
  size="sm"
  :max-results="6"
  clearable
  @select="watch"
>
  <template #leading>
    <MagnifyingGlassIcon />
  </template>
</WildInputAutoComplete>

When to use

Use it to pick one site, logger or person from a long list.
Turn on allow-custom when the answer may be outside the list.
Turn on clear-on-select to add several in a row.

Don’t use it

For a short list. Use Select.
For text with nothing to suggest. Use Text input.
When the answer must be on the list. Use Search select.

Anatomy

The text input’s frame, with a list 4px below. Rows hold a name, optional icon and sub-line, and a tick on the choice.

Site or logger16 on this account

The typed part is bold, so each row shows why it matched.

Matching

Case, extra spaces and macrons are ignored. Start-of-name matches rank first, then start-of-word, then anywhere.

ranked by where it matches

macrons folded

“ho” ranks Hokio Beach Bore first and Pukekohe Packhouse last.

Rows

Add an avatar and sub-line when names alone could be confused.

label only · 34px

avatar and sub-line · 44px

Showing 4 of 6. Keep typing to narrow.

Free text

With allow-custom, the typed text is the last row. Enter still takes the first match.

matches, then your text

only your text

States

rest

hover

focus

error

error, focused

disabled

Focus adds a blue inner edge and halo. Error adds a red edge.

nothing matches

No matches for “bore 99”

reopened on a choice

In context

Alarm recipients

Soil moisture below 18% · North Pump

RecipientsPeople or email addresses

HHemi ParataAAna Tupouops@emupark.co.nz

Message

WildEye: soil moisture at North Pump is 16.2% (below 18%) as of 05:40.

3 recipients.

Each pick empties the field and keeps focus.

Content

Label it with what it holds: Site or logger, Recipients.
Write the placeholder as what to search: Search sites and loggers.
Make custom-label a verb: Use, Add.

Accessibility

Focus stays in the field. Screen readers hear the highlighted row and count.

Key	What it does
Typing	Filters and highlights the first match.
↓ / ↑	Opens the list, or moves the highlight and skips unavailable rows.
Space	Types a space. It never picks a row.
Enter	Takes the highlighted row, or typed text with allow-custom.
Escape	Closes the list, then clears a clearable field.
Tab	Leaves without choosing.

Props

Prop	Type	Default	Description
v-model	string	—	The query text.
options	{ key, value, sub?, leading?, disabled? }[]	—	Suggestions; disabled ones show but are skipped.
@select	(item: KeyValue \| string)	—	The chosen suggestion, or typed text.
label	string	—	Visible name.
aria-label	string	—	Name when there is no visible label.
hint	string	—	Context beside the label.
help	string	—	Guidance under the field.
error	boolean \| string	false	A string shows as the message.
placeholder	string	'Search…'	Empty-field text.
min-chars	number	1	Characters before the list opens.
max-results	number	8	Rows before the “keep typing” line.
allow-custom	boolean	false	Offer the typed text as a choice.
custom-label	string	'Use'	Verb on the free-text row.
clear-on-select	boolean	false	Empty the field after each pick.
auto-highlight	boolean	true	Highlight the first match.
no-match-text	string	'No matches'	Said when nothing matches.
clearable	boolean	false	Clear button once there is text.
size	'sm' \| 'lg'	'sm'	36px or 44px.
required	boolean	false	Marks the label, sets aria-required.
disabled	boolean	false	Flat grey, takes no input.
v-model:open	boolean	—	Controlled open state.
#leading	slot	—	Icon ahead of the text.

Tokens

Token	Value	Where it lands
--global-neutral-grey-600	#DCDCDE	Resting border, 1px.
--global-blue-1000	#1877F2	Focus edge, halo, tick, add mark.
--color-error	#E12121	Error edge and message.
--global-neutral-grey-500	#E6E6E6	List edge, disabled border.
--global-neutral-grey-300	#F1F1F1	Highlighted row.
--global-neutral-grey-200	#F5F5F5	Disabled ground.
--global-neutral-grey-1000	#4F4D55	Placeholder and secondary lines.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	The list surface.
--radius-lg	8px	Frame and list corners.
--font-weight-bold	600	The matched part.