Skip to main content
The MtTextField component provides a single-line text input with various features like validation, copying, and character limits.

​
Import

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

​
Props

​
modelValue
string | number
The value of the text field.
​
label
string
A label for your text field. Usually used to guide the user what value this field controls.
​
placeholder
string
A placeholder text being displayed if no value is set.
​
helpText
string
A text that helps the user to understand what this field does.
​
size
'small' | 'default'
default:"'default'"
The size of the text field.
​
copyable
boolean
default:"false"
Toggles the copy function of the text field.
​
copyableTooltip
boolean
default:"false"
If set to true the tooltip will change on successful copy.
​
disabled
boolean
default:"false"
Determines if the field is disabled.
​
required
boolean
default:"false"
Determines if the field is required.
​
maxLength
number
If set to a value a character counter will be displayed.
​
error
object
An error in your business logic related to this field.
​
isInherited
boolean
default:"false"
Toggles the inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.
​
disableInheritanceToggle
boolean
default:"false"
Determines the active state of the inheritance toggle.
​
name
string
The name attribute for the input.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the text value changes.
​
change
(value: string) => void
Emitted when input loses focus.
​
focus
(event: FocusEvent) => void
Emitted when the field gains focus.
​
blur
(event: FocusEvent) => void
Emitted when the field loses focus.
​
inheritance-restore
(event: unknown) => void
Emitted when inheritance is restored.
​
inheritance-remove
(event: unknown) => void
Emitted when inheritance is removed.

​
Slots

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

​
Usage

​
Basic Text Field

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

<template>
  <mt-text-field 
    v-model="name"
    label="Name"
    placeholder="Enter your name"
  />
</template>

​
With Character Limit

<template>
  <mt-text-field 
    v-model="bio"
    label="Bio"
    :max-length="160"
    help-text="Short description about yourself"
  />
</template>

​
Copyable Field

<template>
  <mt-text-field 
    v-model="apiKey"
    label="API Key"
    copyable
    copyable-tooltip
  />
</template>

​
Small Size

<template>
  <mt-text-field 
    v-model="compactValue"
    label="Value"
    size="small"
  />
</template>

​
With Prefix and Suffix

<template>
  <mt-text-field v-model="username" label="Username">
    <template #prefix>
      <span>@</span>
    </template>
    <template #suffix>
      <mt-icon name="regular-user" />
    </template>
  </mt-text-field>
</template>

​
Required Field

<script setup>
import { ref, computed } from 'vue';
const email = ref('');
const error = computed(() => 
  !email.value ? { detail: 'This field is required' } : null
);
</script>

<template>
  <mt-text-field 
    v-model="email"
    label="Email"
    :error="error"
    required
  />
</template>

​
Disabled Field

<template>
  <mt-text-field 
    v-model="lockedValue"
    label="Status"
    disabled
  />
</template>

​
Accessibility

  • Uses native text input for proper behavior
  • Label properly associated with input via for attribute
  • Error messages linked via aria-describedby
  • Character count announced to screen readers
  • Focus visible outline for keyboard navigation
  • Placeholder text accessible
  • Required fields marked with asterisk

Build docs developers (and LLMs) love

Get started for freeTalk to us