Input

Text input field for collecting user information with support for labels, hints, and validation states.

Installation

Usage

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

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

Examples

With Label

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

With Hint

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

States

Controlled

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
• All standard input HTML attributes are supported

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