Email Input

Email input with native browser validation patterns.

Basic Usage

Email

<template>
  <spr-input-email v-model="inputModel" label="Email" placeholder="Enter email" />
</template>

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

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

Active State

Email

<template>
  <spr-input-email v-model="inputModel" label="Email" placeholder="Enter email" active />
</template>

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

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

Error State

Email

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

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

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

Disabled State

Email

<template>
  <spr-input-email v-model="inputModel" label="Email" placeholder="Enter email" :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.