TextField

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

<TextField className="max-w-xs">
  <Label>Email</Label>
  <Input />
</TextField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/text-field

Usage

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>

Anatomy

A TextField wraps a Label, an Input, and optional Description and FieldError. Wrap the Input in an InputGroup with InputGroupAddon to render a prefix or suffix inside the field.

import { TextField } from '@/components/ui/text-field'
import { Label, Description, FieldError } from '@/components/ui/field'
import { Input, InputGroup, InputGroupAddon } from '@/components/ui/input'
;<TextField>
  <Label />
  <InputGroup>
    <InputGroupAddon />
    <Input />
  </InputGroup>
  <Description />
  <FieldError />
</TextField>

Value

The value is a string. Use defaultValue for uncontrolled state, or value with onChange to control it.

const [value, setValue] = React.useState('')

<TextField value={value} onChange={setValue}>
  <Label>Email</Label>
  <Input />
</TextField>

Validation

Mark a field with isRequired, and supply a custom validate function that returns an error string. By default validation is native (browser); set validationBehavior="aria" to defer to your own logic. Errors render in FieldError.

<TextField
  isRequired
  validate={(value) => (value.includes('@') ? null : 'Enter a valid email')}
>
  <Label>Email</Label>
  <Input />
  <FieldError />
</TextField>

Examples

Basic

Prefix & Suffix

Website

https://

@example.com

API Reference

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

Prop	Type	Default
	`string`	`—`
	`ReactNode \| function`	`—`
	`union`	`—`
	`union`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`string`	`—`
	`union`	`'text'`

	`string`	`—`
	`string`	`—`
	`function`	`—`

Last updated on 7/7/2026