Text Field

Copy MarkdownOpen

Example

Features

Text fields can be built with <input> or <textarea> and <label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.

• Accessible – Uses a native <input> element. Label, description, and error message elements are automatically associated with the field.
• Validation – Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add text-field

Anatomy

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

<TextField
  label="label belongs here"
  description="You can add description here"
  error="You can add error message here"
  startContent={"..."}
  endContent={"..."}
/>

Another Examples

Start and End Content

This example shows how to add customizable elements at the start and end of the input field, such as icons or buttons, to enhance user interaction and improve UI clarity.

With Form

This example demonstrates how to integrate the text field component within a form context, showcasing form validation, error handling, and submission behavior seamlessly.

Props

Loading types…