Text Field

Source

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

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

<template>
  <mt-text-field v-model="value" label="Text field label" />
</template>

Usage

Text Field is a single-line input for short free-form text values such as names, titles, and identifiers. Use it when users should type one value in a single-line input and when shared field features such as hint, helpText, error, or inheritance are helpful.

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

Examples

Disabled

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

<template>
  <mt-text-field label="Label" disabled model-value="Read-only value" />
</template>

Error

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

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

<template>
  <mt-text-field
    v-model="value"
    label="Label"
    placeholder="Enter a value"
    :error="{ detail: 'This field is required.' }"
  />
</template>

Hint

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

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

<template>
  <mt-text-field v-model="value" label="Label" placeholder="name@example.com">
    <template #hint>We never share your input.</template>
  </mt-text-field>
</template>

API reference

Props

Prop	Type	Default
`copyable` Toggles the copy function of the text field.	`boolean`	`false`
`error` An error in your business logic related to this field.	`Record<string, any>`	`null`
`label` A label for your text field. Usually used to guide the user what value this field controls.	`string`	`null`
`required` Determines if the field is required.	`boolean`	`false`
`is-inheritance-field` Determines if the field is inheritable.	`boolean`	`false`
`is-inherited` Toggles the inheritance visualization.	`boolean`	`false`
`help-text` A text that helps the user to understand what this field does.	`string`	`null`
`disabled` Determines if the field is disabled.	`boolean`	`false`
`placeholder` A placeholder text being displayed if no value is set.	`string`	`""`
`name`	`string`	`null`
`size` The size of the text field.	`string`	`"default"`
`model-value` The value of the text field.	`string \| number`	`""`
`disable-inheritance-toggle` Determines the active state of the inheritance toggle.	`boolean`	`false`
`copyable-tooltip` If set to true the tooltip will change on successful copy.	`boolean`	`false`
`max-length` If set to a value a character counter will be displayed.	`number`	`undefined`
`id-suffix`	`string`	`""`
`on-update:model-value`	`((...args: any[]) => any) \| undefined`
`on-change`	`((...args: any[]) => any) \| undefined`
`on-inheritance-remove`	`((...args: any[]) => any) \| undefined`
`on-inheritance-restore`	`((...args: any[]) => any) \| undefined`
`on-blur`	`((...args: any[]) => any) \| undefined`
`on-focus`	`((...args: any[]) => any) \| undefined`

Exposed

Name	Type
`currentValue`	`string \| number`
`hasFocus`	`boolean`
`hasError`	`boolean`
`hasDisabledInput`	`boolean`

Best practices

Use a clear visible label that describes the expected value.
Keep the content short enough for a single-line input.
Add help text or hint content when users need more context.

Don't

Do not use Text Field for longer multi-line content.
Do not rely on the placeholder as the only instruction.
Do not use it when a more specific field type would guide input better.

Behavior

Text Field supports shared field features such as prefix, suffix, hint, helpText, error, and inheritance handling.
copyable adds a copy button for reference-heavy values that users may need to copy out of the field.
maxLength can show a live character counter when the value length matters.

Accessibility

Always provide a visible label so users understand what value is expected.
Use a more specific field type when browser input behavior or validation would improve accessibility.

Email Field: when the value must be an email address.
URL Field: when the value should be a link and URL-specific behavior is helpful.
Number Field: when the value should behave like a number with numeric constraints or stepping.
Unit Field: when users should enter a number together with a selectable unit.
Password Field: when the value is sensitive and should be hidden by default.
Search: when the value is meant to filter or find content in the interface.

Edit this pageorReport an issue

Text Editor

A flexible rich text editor for adding WYSIWYG and raw HTML editing to Meteor interfaces.

Textarea

A multi-line input for longer free-form text in a form.