Search bar

Filters a list or page by text, with a clear button once there is a query.

Refined portWildSearchBar.vueForms/Search Bar

Try it

Type into it, then clear it with the ×. Clearing puts focus back in the field.

Size

Disabled

<WildSearchBar
  v-model="query"
  size="md"
  placeholder="Search sites"
/>

Don’t use it

A magnifier, the text field and a clear button, in one frame.

<WildSearchBar v-model="query"
  placeholder="Search sites" />

The clear button appears only once there’s a query to clear.

Three heights: 36, 40 and 44px. The default is md.

The frame is the text input’s, so a search bar and a text field focus the same way on one form.

rest

hover

focus

error

disabled

The field is named by ariaLabel, or by its placeholder when there’s none. The clear button is named “Clear search”.

Key	What it does
Tab	Moves to the field, then to the clear button.
Enter / Space	On the clear button, empties the query and returns focus to the field.

Prop	Type	Default	Description
value	string	—	The query.
onChange	(value: string) => void	—	Called on every keystroke.
onClear	() => void	—	Shows the clear button while there’s a query.
placeholder	string	'Search'	Shown while empty. Also the fallback name.
size	'sm' \| 'md' \| 'lg'	'md'	Height: 36, 40 or 44px.
error	boolean	false	Red frame.
disabled	boolean	false	Blocks typing and dims the frame.
trailing	ReactNode	—	A slot at the end, such as a shortcut hint.
width	number \| string	'100%'	Frame width.
ariaLabel	string	—	Accessible name for the field.
autoFocus	boolean	false	Focuses the field on mount.
state	'rest' \| 'hover' \| 'focus'	—	Forces a frame, for static examples.

Token	Value	Where it lands
--radius-field	10px	The frame.
--global-neutral-grey-800	#ADACB0	Frame on hover.
--global-blue-1000	#1877F2	Frame on focus.
--color-error	#E12121	Frame on error.
--global-neutral-grey-900	#7F7D83	Magnifier, and the clear button at rest.
--global-neutral-grey-400 / -1100	#ECECED / #2D2B32	Clear button ground and ink on hover.
--size-icon-sm	16px	The magnifier.