Text Field

Text Field

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

Installation

npx shadcn@latest add @intentui/text-field

Composed components

Manual installation

npm i react-aria-components @intentui/icons

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.

Pending

Activate the loading state on your TextField with the isPending prop.

Revealable

When using a text field as a password input, you may want the option to reveal the password. To enable this feature, simply add the isRevealable prop. However, ensure that the input type is explicitly set to 'password', as this is a required condition.

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.