URL Field

Source

<script setup lang="ts">
import { ref } from "vue";
import MtUrlField from "@shopware-ag/meteor-component-library/MtUrlField";

const url = ref("https://shopware.com");
</script>

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

Usage

URL Field is a single-line input for entering and normalizing a web address such as external links, landing pages, or reference URLs stored in forms. Use it when the value should point to a website or route, and when protocol handling like https:// and http:// should stay visible and easy to change.

import { MtUrlField } from "@shopware-ag/meteor-component-library";

Examples

Disabled

<script setup lang="ts">
import MtUrlField from "@shopware-ag/meteor-component-library/MtUrlField";
</script>

<template>
  <mt-url-field label="Website" disabled model-value="https://shopware.com" />
</template>

Error

<script setup lang="ts">
import { ref } from "vue";
import MtUrlField from "@shopware-ag/meteor-component-library/MtUrlField";

const value = ref("");
</script>

<template>
  <mt-url-field
    v-model="value"
    label="Website"
    placeholder="https://example.com"
    :error="{ detail: 'Enter a valid URL.' }"
  />
</template>

Hint

<script setup lang="ts">
import { ref } from "vue";
import MtUrlField from "@shopware-ag/meteor-component-library/MtUrlField";

const value = ref("");
</script>

<template>
  <mt-url-field v-model="value" label="Website" placeholder="https://example.com">
    <template #hint>Include the https:// prefix.</template>
  </mt-url-field>
</template>

API reference

Props

Prop	Type	Default
`omit-url-hash`	`boolean`
`omit-url-search`	`boolean`
`copyable`	`boolean`
`error`	`{ detail: string; }`
`label`	`string`
`required`	`boolean`
`is-inheritance-field`	`boolean`
`is-inherited`	`boolean`
`help-text`	`string`
`disabled`	`boolean`
`placeholder`	`string`
`name`	`string`
`size`	`"default" \| "small"`	`"default"`
`model-value`	`string`

Events

Event	Payload
`update:modelValue`	`[value: string \| undefined]`
`change`	`[value: string]`
`inheritance-remove`	`[]`
`inheritance-restore`	`[]`

Slots

Slot	Bindings
`suffix`	`any`
`hint`	`any`

Best practices

Use a clear label such as Website or Target URL.
Add help text when users need rules about valid links or allowed domains.
Enable copyable when users often reuse the saved URL elsewhere.

Don't

Do not use URL Field for general text input.
Do not ask users to type the full protocol if the field already helps manage it.
Do not use it for multiple links in one field.

Behavior

URL Field uses a native type="url" input and keeps the protocol toggle visible beside the input.
The component normalizes entered URLs and can omit search parameters or hashes when configured.
copyable adds a quick way to copy the current URL from the field.

Accessibility

Always provide a visible label so users know what kind of link is expected.
Keep help text specific when only certain URLs or domains are allowed.
Make sure the final saved URL is understandable if the protocol toggle changes the output value.

Text Field: when the value is general text and should not be normalized as a URL.

Edit this pageorReport an issue

Unit Field

A numeric input combined with a unit selector for measurements.

Theme Provider

Provides library-wide settings, such as future flags, to the Meteor components beneath it.