Components
Loading preview...
A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/interfaces-fieldimport {
Field,
FieldContent,
FieldError,
FieldLabel,
} from "@/components/ui/interfaces-field"
import { Input } from "@/components/ui/input"
export default function DemoErrorState() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<div className="w-full max-w-md">
<Field data-invalid="true">
<FieldLabel htmlFor="email">Email</FieldLabel>
<FieldContent>
<Input
id="email"
placeholder="Enter email"
aria-invalid="true"
/>
<FieldError>Invalid email address</FieldError>
</FieldContent>
</Field>
</div>
</div>
)
}