FORMS · COMPONENT
Input
Labelled text fields with helpful and error feedback.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Input } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [name, setName] = useState("Avery Morgan");
return <div style={{ display: "grid", gap: 24, width: "min(100%, 400px)" }}>
<Input label="Full name" value={name} onChange={e => setName(e.target.value)} helperText="The name shown on your profile." disabled={state === "disabled"} />
<Input label="Work email" type="email" placeholder="you@example.com" error={state === "error" ? "Enter a valid email address." : undefined} helperText="Use a demo address in this preview." />
<p role="status">Profile preview: {name || "Your name"}</p>
</div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A controlled text input and an email field demonstrate labels, supporting text, disabled state, and errors. Native input attributes remain available for your application’s form behaviour.
Try it
Change the full name and watch the profile text update. Switch to the error state to inspect the email feedback.