dotUI

TextField

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

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

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>

Use the controls below to experiment with different TextField props and see the live preview and code update.

label

description

errorMessage

isDisabled

isReadOnly

isInvalid

startIcon

endIcon

<TextField>
  <Input />
</TextField>

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