URL Input

URL input with native browser validation for properly formatted URLs.

Basic Usage

Website

https://

<template>
  <spr-input-url v-model="inputModel" label="Website" placeholder="https://example.com" />
</template>

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

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

Active State

Website

https://

<template>
  <spr-input-url v-model="inputModel" label="Website" placeholder="https://example.com" active />
</template>

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

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

Error State

Website

https://

<template>
  <spr-input-url v-model="inputModel" label="Website" placeholder="https://example.com" :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-url>
</template>

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

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

Disabled State

Website

https://

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.

<template>
  <spr-input-url v-model="inputModel" label="Website" placeholder="https://example.com" :disabled="true" />
</template>

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

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