Input

React Input components are used to collect text input from users. They are commonly used in forms for entering names, emails, passwords, and other text-based data.

This Input component is built with React and styled using Tailwind CSS. It is designed to be used with the Label component for accessibility and supports validation states and both controlled and uncontrolled usage.

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

• Labels must be manually associated with inputs via htmlFor and id
• Keyboard accessible with standard input behavior
• Focus ring provides clear visual feedback with ring-4 style
• Status-specific colors can be used for hint text to provide semantic feedback
• Supports all standard input accessibility attributes