TextField

TextField allows a user to enter a plain text value with a keyboard.

On this page

Props

label

description

errorMessage

isDisabled

isReadOnly

isInvalid

<TextField>
  <Label>Email</Label>
  <Input />
</TextField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/text-field

Use a TextField to allow users to input custom text entries with a keyboard.

import { TextField } from '@/components/ui/text-field'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/field'

<TextField>
  <Label>Email</Label>
  <Input placeholder="hello@example.com" />
</TextField>

EmailEnter your email.

EmailEnter a valid email address.

Website

https://

@example.com

small (sm)

medium (md)

large (lg)

Name

mirrored text: Hello world!

A text field allows a user to enter a plain text value with a keyboard.

Last updated on 6/16/2026