Text Field

Basic

A text field is a box where you can type in text, like your name or email.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/text-field

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react

Anatomy

import { TextField } from "@/components/ui/text-field"

<TextField
  name="name"
  type="text"
  label="Name"
  description="Enter your name"
  placeholder="John Doe"
  errorMessage="This field is required"
  prefix="..."
  suffix="..."
/>

Suffix and prefix

Enhance your TextField by adding a prefix or suffix. Whether it’s text or icons, it’s flexible to fit your design.

Suffix with button

Add a button to the suffix by simply including it in the suffix prop. While you can do the same with a prefix, it’s more common to see it as a suffix.

Revealable

When using a text field as a password input, you may want the option to reveal the password.

Validation

In this example, we’ll ensure it’s treated as a strict requirement.

Controlled

Manage the TextField value through the value prop for controlled usage.

Uncontrolled

Manage the TextField value through the defaultValue prop for uncontrolled usage.

Description

You can add a description to the text field by using the description prop.

Readonly

Set the TextField to readonly, preventing any edits.

Disabled

When the TextField is disabled, it becomes non-editable and appears inactive.