Skip to main content
The MtUrlField component provides a specialized input for URLs with automatic protocol handling and optional SSL toggle.

​
Import

import { MtUrlField } from '@meteroid/component-library';

​
Props

​
modelValue
string
v-model binding for the URL value.
​
label
string
Label text for the URL field.
​
placeholder
string
Placeholder text displayed when empty.
​
disabled
boolean
default:"false"
Disables the URL field.
​
required
boolean
default:"false"
Marks the field as required.
​
name
string
The name attribute for the input.
​
size
'small' | 'default'
default:"'default'"
The size of the field.
​
copyable
boolean
default:"false"
Adds a copy button to copy the URL to clipboard.
​
omitUrlHash
boolean
default:"false"
Removes the hash (#) portion from the URL.
​
omitUrlSearch
boolean
default:"false"
Removes the query string (?) portion from the URL.
​
helpText
string
Help text with additional information.
​
error
object
Error object with a detail property.
​
isInherited
boolean
default:"false"
Indicates if the value is inherited.
​
isInheritanceField
boolean
default:"false"
Enables inheritance functionality.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the URL value changes.
​
change
(value: string) => void
Emitted when the input loses focus.
​
inheritance-remove
() => void
Emitted when inheritance is removed.
​
inheritance-restore
() => void
Emitted when inheritance is restored.

​
Slots

​
suffix
slot
Content displayed after the input.
​
hint
slot
Additional hint content below the field.

​
Usage

​
Basic URL Field

<script setup>
import { ref } from 'vue';
const website = ref('');
</script>

<template>
  <mt-url-field 
    v-model="website"
    label="Website URL"
    placeholder="example.com"
  />
</template>

​
With SSL Toggle

<template>
  <mt-url-field 
    v-model="apiUrl"
    label="API URL"
    help-text="Toggle the lock icon to switch between HTTP and HTTPS"
  />
</template>

​
Copyable URL

<template>
  <mt-url-field 
    v-model="publicUrl"
    label="Public URL"
    copyable
  />
</template>

​
Omit Query Parameters

<template>
  <mt-url-field 
    v-model="cleanUrl"
    label="Base URL"
    omit-url-search
    omit-url-hash
  />
</template>

​
Small Size

<template>
  <mt-url-field 
    v-model="url"
    label="URL"
    size="small"
  />
</template>

​
With Validation

<script setup>
import { ref, computed } from 'vue';
const url = ref('');
const error = computed(() => {
  if (!url.value) return null;
  try {
    new URL(url.value.startsWith('http') ? url.value : `https://${url.value}`);
    return null;
  } catch {
    return { detail: 'Please enter a valid URL' };
  }
});
</script>

<template>
  <mt-url-field 
    v-model="url"
    label="Website"
    :error="error"
    required
  />
</template>

​
With Suffix

<template>
  <mt-url-field v-model="subdomain" label="Subdomain">
    <template #suffix>
      <span>.example.com</span>
    </template>
  </mt-url-field>
</template>

​
Features

​
Protocol Toggle

The URL field includes a visual toggle button showing a lock icon:
  • Locked (HTTPS): Green lock icon, uses https:// protocol
  • Unlocked (HTTP): Gray lock icon, uses http:// protocol
Click the lock icon to toggle between protocols.

​
Automatic Formatting

  • Removes multiple slashes from protocol
  • Trims trailing slashes (unless hash or search is present)
  • Decodes URI components for display
  • Validates URL structure

​
Accessibility

  • Uses native URL input type
  • Protocol toggle button has descriptive aria-label
  • Label properly associated with input
  • Error messages linked via aria-describedby
  • Copy button accessible via keyboard
  • Focus visible outline for keyboard navigation
  • Disabled state prevents interaction

Build docs developers (and LLMs) love

Get started for freeTalk to us