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

Usage

Import the component and pass the required props.

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

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

Examples

With Label

Use the label prop to describe the input field.

<Input label="Full Name" placeholder="John Doe" />

With Hint

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

<Input
  label="Username"
  placeholder="Choose a username"
  hint="Must be 3-20 characters long"
/>

States

Use visual states to show validation feedback.

Controlled

Control the input value using React state.

import { useState } from "react";

export default () => {
  const [value, setValue] = useState("");

  return (
    <Input
      label="Controlled Input"
      value={value}
      onChange={e => setValue(e.target.value)}
      hint={`${value.length} characters`}
    />
  );
};

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

Notes

• The input uses peer class to enable styling of the hint text based on input state
• Focus ring color matches the state (primary for default, danger for error, success for success)
• Placeholder text uses muted color for better visual hierarchy
• Disabled inputs have reduced opacity and prevent pointer events
• Labels are non-selectable with select-none for better UX