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 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 pass the required props. Use the Label component to provide a label for the input.

import { Input } from "@/registry/core/input";
import { Label } from "@/registry/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} placeholder="Enter your email" />
    </div>
  );
}

Examples

With Label

Use the Label component and link it to the input using the id and htmlFor props.

Note: Labels are non-selectable with select-none for better UX. Placeholder text uses muted color for better visual hierarchy.

With Hint

Use a standard HTML element (like p) below the input to provide helper text.

Note: You can style the hint text based on the input state using status-specific text colors.

States

Use visual states to show validation feedback, or disable the input.

Note: Focus ring color matches the state (primary for default, danger for error, success for success). Disabled inputs have reduced opacity and prevent pointer events.

Controlled

Control the input value using React state.

Custom Style

Use className to override default styles.

API Reference

Input

Extends input element props.

Accessibility

• Label association: Connect a label to the input using htmlFor and id, so users know what the field is for.
• Keyboard support: Users can type in the input, move between fields using Tab, and interact using standard keyboard controls.
• Focus visibility: The input shows a clear focus style when selected, helping users see which field is active.
• Validation feedback: Use helper text or messages to show errors or success states clearly.