Form

Input

Single-line text field. Border transitions to primary on focus.

Preview

Code

src/components/ui/Input.tsx

import type { InputHTMLAttributes } from "react";

/**
 * Input — `input` token from hyliox-waitlist-card.md. Border transitions to
 * `primary` on focus (hyliox-motion-system.md's `input-focus` interaction).
 */
export function Input({ className = "", ...props }: InputHTMLAttributes<HTMLInputElement> & { className?: string }) {
  return (
    <input
      {...props}
      className={`h-12 w-full rounded-md border border-border-subtle bg-(--glass-input-bg) px-4 text-base text-on-surface placeholder:text-secondary transition-colors focus:border-primary focus:outline-none md:text-sm ${className}`}
    />
  );
}

Installation

Usage

import { Input } from "@/components/ui/Input";

<Input placeholder="Enter your email address…" />

Props

Prop	Type	Default	Description
className	string	""	Extra classes merged onto the input.
...props	InputHTMLAttributes<HTMLInputElement>	—	Any native input prop (value, onChange, type, etc.).

Accessibility

Pair with a visible <label> (via htmlFor/id) in real usage — this component intentionally doesn't render one, since label copy and placement are context-specific.