ComponentServer-safe
Input
A refined field with inset and luminous Prism surface options.
Installation
Preview
Crisp border, layered depth and a soft focus halo.
Soft surface with an inset focus edge.
Use letters, numbers and hyphens only.
Usage
tsx
import { Input } from "@/components/ui/input"
export function InputDemo() {
return <Input placeholder="you@example.com" type="email" />
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "prism" | "default" | Switches between the soft inset field and the crisp luminous surface. |
type | React.HTMLInputTypeAttribute | "text" | Native input type. |
aria-invalid | boolean | false | Enables the destructive validation state. |
className | string | — | Overrides or extends input styling. |