Text input
Displays an input with an optional label, description and error message.
Preview
Must be at least 8 characters long
<script lang="ts" setup>
import { TextInput } from "~/components/ui/text-input";
</script>
<template>
<TextInput
label="Password"
description="Must be at least 8 characters long"
placeholder="Password"
class="w-64"
/>
</template>Usage
import { TextInput } from '~/components/ui/text-input';<TextInput
label="Email"
description="Your personal email address"
error="..."
v-model="..."
/>Examples
With an error
Yor work email address
That's not a real email address
<script lang="ts" setup>
import { TextInput } from "~/components/ui/text-input";
</script>
<template>
<TextInput
label="Email"
description="Yor work email address"
placeholder="Email"
value="test@email.com"
error-message="That's not a real email address"
class="w-64"
/>
</template>