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 supports labels, helper text, validation states, and both controlled and uncontrolled usage.

Installation

npx @tailgrids/cli add input

Usage

Import the component and pass the required props.

import { Input } from "@/registry/core/input";

export default InputPreview = () => (
  <Input label="Email" placeholder="Enter your email" />
);

Examples

With Label

Use the label prop to describe the input field.

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

With Hint

Use the hint prop to show helper text below the input.

Note: The input uses peer class to enable styling of the hint text based on input state.

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

• Automatically generates unique IDs if not provided
• Label is properly associated with input via htmlFor
• Keyboard accessible with standard input behavior
• Focus ring provides clear visual feedback with ring-4 style
• Disabled state applies to both input and hint text
• Hint text uses semantic color coding for different states
• Supports all standard input accessibility attributes