Github

Search

Search captures search queries with a fixed leading icon and a clear action.

Component variations

Basic Search

Standard search input with a clear button when text is entered

Disabled

Search input in its disabled state

Usage Guidelines

Import

Import the search component in your module or component:

import-search.ts

Copy code

Basic Implementation

Here is a basic example of using the search component:

search-example.html

Copy code

Implementation with all available APIs

Here is an example of using the search component with all available APIs:

search-example.html

Copy code

Listening to Events

Handle live changes and committed search queries:

search-events.html

Copy code

search-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
placeholder
string
'Search'
No
Placeholder text shown when input is empty
value
string
''
No
Current value of the search input
disabled
boolean
false
No
Whether the search input is disabled

Outputs

Event
Type
Description
valueChange
EventEmitter<string>
Emitted on every input change (live typing or clear)
searchCommit
EventEmitter<string>
Emitted when the user presses Enter or the input loses focus

Best Practices

When to Use

  • Use Search when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Search when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use concise placeholder text that describes what the user can search for
  • The clear action only appears when the search field has a value
  • Use the search commit event to trigger searches on Enter key or blur
  • For standard form text entry, use vd-input instead
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the search features in this section

example.html

Copy code