Username Input
Username specific input with potential future validation rules.
Basic Usage
vue
<template>
<spr-input-username v-model="inputModel" label="Username" placeholder="Enter username" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Active State
vue
<template>
<spr-input-username v-model="inputModel" label="Username" placeholder="Enter username" active />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Error State
vue
<template>
<spr-input-username v-model="inputModel" label="Username" placeholder="Enter username" :error="true">
<template #icon>
<Icon icon="ph:warning-circle-fill" />
</template>
</spr-input-username>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Disabled State
vue
<template>
<spr-input-username v-model="inputModel" label="Username" placeholder="Enter username" :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:
Only the visual intent (username context) differs; no additional props or unique events are introduced at this time.