Input

The React Input component lets users enter text in a form. It is used for fields like name, email, password, and other text inputs.

It works like a standard input field and can be used with a label, placeholder, and validation messages. For example, users can type their email and see an error or success message based on the input.

Built with React Aria Components and styled using Tailwind CSS. It is designed to be used with the Label component for accessibility and supports validation states, as well as controlled and uncontrolled inputs.

Installation

npx @tailgrids/cli add input

Usage

Import the component and pair it with a label for accessibility. The input accepts the standard HTML input props, along with the Tailgrids state variant and className.

import { Input } from "@/components/tailgrids/core/input";
import { Label } from "@/components/tailgrids/core/label";
import { useId } from "react";

export default function InputPreview() {
  const id = useId();

  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input
        id={id}
        type="email"
        placeholder="Enter your email"
        autoComplete="email"
      />
    </div>
  );
}

Examples

With Label and Hint

Use the Label and Description components to show a label and helper text.

Controlled

Use the native value and onChange props for controlled usage.

Uncontrolled

Use the defaultValue prop on field container for uncontrolled usage.

States

Use the state prop to switch between the built-in visual variants.

Disabled

Use disabled prop on field container to disable user interaction and apply disabled styles.

Custom Style

Use className to override or extend the default styling.

API Reference

Input

Input extends the native HTML input props from React Aria Components.

Accessibility

• Associate the input with a label using htmlFor and id.
• Use Description or helper text for additional context when needed.
• Prefer native validation props like required, minLength, maxLength, and pattern when possible.
• React Aria applies the correct focus-visible and invalid states for styling and assistive technology.