Components

Input

Hairline-bordered text field or textarea; border brightens on hover and focus.

Preview

components/forms/Input.jsx

Usage

src/components/ui/Input.tsx

tsx

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

<Input
  type="email"
  placeholder="you@example.com"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

<Input multiline rows={5} placeholder="Message…" />

API

props

Prop	Type	Default	Description
multiline	boolean	false	Render a textarea instead of a single-line input.
rows	number	4	Textarea rows (multiline only).
type	string	"text"	Native input type.
value / onChange	string / (e) => void	—	Controlled value handlers.
placeholder	string	—	Ghost text in --color-fg-subtle.
disabled	boolean	false	Half opacity, no lit state.
ariaLabel	string	—	Accessible name when no visible label exists.

Tokens consumed

semantic only

--color-bg-elevated--color-border--color-border-hover--color-fg--transition-border--radius-sm