<TextField aria-label="Email">
<Input placeholder="hello@example.com" />
</TextField>npx shadcn@latest add @dotui/text-fieldUse 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.
<TextField>
<Input />
</TextField>mirrored text: Hello world!
A text field allows a user to enter a plain text value with a keyboard.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
union | — | ||
boolean | — | ||
boolean | — | ||
DOMRenderFunction<"div", TextFieldRenderProps> | — | ||
string | — | ||
string | — | ||
function | — | ||
Last updated on 5/22/2026