Forms
SearchField
Search input with v-model support. Wraps the Polaris <s-search-field> web component.
Usage
<script setup>
const query = ref('')
</script>
<template>
<ShSearchField v-model="query" label="Search products" placeholder="Search…" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | Bound value (use with v-model) |
label | string | — | Input label |
maxLength | number | — | Maximum character length |
minLength | number | — | Minimum character length |
placeholder | string | — | Placeholder text |
error | string | — | Error message |
details | string | — | Help text below the input |
autocomplete | string | — | Autocomplete attribute |
defaultValue | string | — | Default value (uncontrolled) |
labelAccessibilityVisibility | 'visible' | 'exclusive' | — | Label visibility for assistive tech |
readOnly | boolean | — | Makes the field read-only |
required | boolean | — | Marks the field as required |
disabled | boolean | — | Disables the field |
id | string | — | Element ID |
name | string | — | Form field name |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when value changes (v-model) |
input | InputEvent | Native input event |
change | InputEvent | Native change event |
focus | InputEvent | Emitted on focus |
blur | InputEvent | Emitted on blur |
Slots
| Slot | Description |
|---|---|
default | Additional content |
Polaris Element
Renders as <s-search-field>. See Polaris SearchField docs.