Search Input

Search input optimized for filtering lists or triggering search queries.

Basic Usage

Search

<template>
  <spr-input-search v-model="inputModel" label="Search" placeholder="Search..." />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Active State

Search

<template>
  <spr-input-search v-model="inputModel" label="Search" placeholder="Search..." active />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Error State

Search

<template>
  <spr-input-search v-model="inputModel" label="Search" placeholder="Search..." :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-search>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Disabled State

Search

<template>
  <spr-input-search v-model="inputModel" label="Search" placeholder="Search..." :disabled="true" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

API Reference

This username input shares the same props, events, slots, and validation behavior as the base Input component. Refer to the canonical API documentation here:

Input Component API Reference

Only the visual intent (username context) differs; no additional props or unique events are introduced at this time.