Input

Single-line text input with label, helper text, and error state. Use Textarea for multi-line.

Email address

We'll use this for confirmation only.

Textarea#

Tell us about this brand

A few sentences — what they make, who makes it, and what's verifiable.

Usage#

Every field has a label. Placeholder text is not a label — placeholders disappear the moment the user types.
Helper text explains, error text corrects. When a field has an error, helper text is replaced by the error until the user fixes it.
Error text tells the user what to do. Not “Invalid email”. Try “That doesn't look like a valid email address.”
Focus is teal. Same rules as Button — never remove the focus ring.

Props#

Name	Type	Default	Description
label	string	—	Floating or above-field label.
helper	string	—	Supporting text below the field. Swapped for errors.
error	string	—	Error message. Sets invalid state and replaces helper text.
...htmlProps	InputHTMLAttributes<HTMLInputElement>	—	All native input attributes are forwarded.

Code#

tsx

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

<Input label="Email" placeholder="you@domain.com" />
<Input label="Email" error="That doesn't look like a valid email." />

<Textarea label="Notes" rows={4} />