input - examples - Adam Jurek

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/input.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/input.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Field, Input } from "@sushindustries/ui";
import { useState } from "react";

export function ContactForm() {
	const [email, setEmail] = useState("");
	const invalid = email.length > 0 && !email.includes("@");

	return (
		<form className="flex flex-col gap-4">
			<Field
				label="Email"
				error={invalid ? "That doesn't look like an email" : undefined}
			>
				<Input
					type="email"
					value={email}
					onChange={(event) => setEmail(event.target.value)}
				/>
			</Field>
			<button type="submit" className="btn">
				Send
			</button>
		</form>
	);
}

tsx

What this example is not

The validation here is a placeholder check, not a real one - a form that matters would validate on submit and on blur, not on every keystroke, so the error does not appear while somebody is still mid-word typing their address.