TextField

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/textfield.json

npx shadcn@latest add https://prototyper-ui.com/r/textfield.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/textfield.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/textfield.json

This will add the following files to your project:

• components/ui/textfield.tsx

Note: This component depends on Field. It will be installed automatically.

Usage

import { TextField, Input } from "@/components/ui/textfield"
import { FieldLabel } from "@/components/ui/field"

<TextField>
  <FieldLabel>Name</FieldLabel>
  <Input placeholder="Enter your name" />
</TextField>

Anatomy

<TextField>
  <FieldLabel />
  <Input />
  <FieldDescription />
  <FieldError />
</TextField>

Or with TextArea:

<TextField>
  <FieldLabel />
  <TextArea />
  <FieldDescription />
  <FieldError />
</TextField>

* Use either Input or TextArea, not both.

Examples

Description

Disabled

Multiline

Read Only

Reusable

Validation

Styling

Data Slots

Use data-slot attributes to target specific parts of the text field:

Customization Examples

/* Remove border and shadow from all inputs */
[data-slot="input"] {
  @apply border-0 shadow-none;
}

/* Custom focus ring color */
[data-slot="input"]:focus {
  @apply ring-2 ring-blue-500;
}

{/* Override size via className */}
<Input className="h-12 text-lg" placeholder="Large input" />

API Reference

TextField

Root wrapper that provides form field context. Built on Base UI Field.Root.

All Base UI Field props are forwarded via ...props.

Input

A styled single-line text input built on Base UI Input.

All Base UI Input props are forwarded via ...props.

TextArea

A styled multi-line text area using a native <textarea> element.

All native textarea props are forwarded via ...props.

ProtoTextField

A convenience wrapper that composes TextField, Input/TextArea, FieldLabel, FieldDescription, and FieldError into a single component.

All Base UI Field props are forwarded via ...props.

inputVariants

A cva helper exported for applying input styles outside of the <Input> component.

import { inputVariants } from "@/components/ui/textfield"

<input className={inputVariants({ size: "sm" })} />

Accessibility

Keyboard Interactions

ARIA Attributes

• TextField renders as a Base UI Field.Root, automatically associating the label, description, and error message with the input via aria-labelledby, aria-describedby, and aria-errormessage.
• When validation fails, data-invalid is set on the input and the field root.
• data-disabled is set when the field is disabled.
• Screen readers announce the label, description, and any error messages associated with the input.

Related