TextField

A complete form field component that combines input, label, description, and error message.

Import

<script setup lang="ts">
import { TextField } from '@heroui-vue/vue'
</script>

Usage

Basic

Username

Email

We'll never share your email.

Password

Password is too short.

<template>
  <div class="flex flex-col gap-4">
    <TextField label="Username" placeholder="Enter username" />
    <TextField label="Email" type="email" placeholder="you@example.com" description="We'll never share your email." />
    <TextField label="Password" type="password" placeholder="••••••••" error="Password is too short." />
  </div>
</template>

<script setup>
import { TextField } from '@heroui-vue/vue'
</script>

With Description

<template>
  <TextField 
    label="Username"
    description="Choose a unique username"
    placeholder="Enter username"
  />
</template>

With Error

<template>
  <TextField 
    label="Password"
    :error="hasError ? 'Password must be at least 8 characters' : undefined"
    v-model="password"
  />
</template>

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

const password = ref('')
const hasError = computed(() => password.value.length > 0 && password.value.length < 8)
</script>

Required

<template>
  <TextField 
    label="Full Name"
    required
    placeholder="Enter your full name"
  />
</template>

Disabled

<template>
  <TextField 
    label="Disabled Field"
    :disabled="true"
    value="Cannot edit this"
  />
</template>

Input Types

<template>
  <TextField label="Email" type="email" />
  <TextField label="Password" type="password" />
  <TextField label="Number" type="number" />
  <TextField label="URL" type="url" />
  <TextField label="Tel" type="tel" />
</template>

With Prefix/Suffix

<template>
  <TextField label="Website">
    <template #prefix>https://</template>
    <template #suffix>.com</template>
  </TextField>

  <TextField label="Price">
    <template #prefix>$</template>
  </TextField>
</template>

API

TextField Props

Prop	Type	Default	Description
modelValue	string	-	The field value
label	string	-	The field label
description	string	-	The field description
placeholder	string	-	The input placeholder
type	string	'text'	The input type
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the field is disabled
readonly	boolean	false	Whether the field is read-only

TextField Events

Event	Type	Description
update:modelValue	(value: string) => void	Fired when value changes
blur	(event: FocusEvent) => void	Fired when field loses focus
focus	(event: FocusEvent) => void	Fired when field receives focus

TextField Slots

Slot	Description
label	Custom label content
description	Custom description content
prefix	Content before the input
suffix	Content after the input

Accessibility

• TextField combines all form field elements with proper associations
• Label is properly linked to input via for attribute
• Description uses aria-describedby
• Error messages use aria-describedby and aria-invalid
• Required fields are indicated with aria-required
• Full keyboard navigation support