Text Field

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/text-field

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

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="..."
/>

Examples

Prefix and suffix

Wrap Input with InputGroup to add prefix and suffix content.

Suffix button

Wrap Input with InputGroup to add a button as the suffix.

Revealable

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

Validation

Set isRequired to require a value when the form is submitted.

Controlled

Pass value and update it with onChange to control the text field.

Uncontrolled

Use defaultValue to set the initial text of an uncontrolled text field.

Description

Add Description inside TextField to provide supporting text.

Readonly

Set the TextField to readonly, preventing any edits.

Disabled

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

Component API

TextField