Choose a version:

SearchField

Captures search terms from merchants using a single-line input field. Includes visual styling to indicate search functionality, and an accessory to quickly clear the input.

Anchor to propertiesProperties

Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to id id string: A unique identifier for the element.
Anchor to placeholder placeholder string: A short hint that describes the expected value of the field.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to blur blur (event: <"s-search-field">) => void: Callback when the field loses focus.
Anchor to change change (event: <"s-search-field">) => void: Callback when the field loses focus after the user changes the value in the field.
Anchor to focus focus (event: <"s-search-field">) => void: Callback when the field is focused.
Anchor to input input (event: <"s-search-field">) => void: Callback when the user changes the value in the field.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-search-field placeholder="Search" />

Preview

Anchor to examplesExamples

SearchField usage patterns

Anchor to example-event-handlingEvent handling

Handle search input events

Was this section helpful?

Event handling

<s-search-field

placeholder="Search products..."

value=""

onInput={(event) => console.log('Input:', event.target.value)}

onChange={(event) => console.log('Change:', event.target.value)}

onFocus={(event) => console.log('Search focused')}

onBlur={(event) => console.log('Search blurred')}

Examples

Event handling

Description

Handle search input events

Default

<s-search-field
  placeholder="Search products..."
  value=""
  onInput={(event) => console.log('Input:', event.target.value)}
  onChange={(event) => console.log('Change:', event.target.value)}
  onFocus={(event) => console.log('Search focused')}
  onBlur={(event) => console.log('Search blurred')}
/>