Components
Loading preview...
A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.
npx shadcn@latest add https://21st.dev/r/coss.com/field"use client";
import type React from "react";
import { cn } from "@/lib/utils";
import {
Field,
FieldLabel,
FieldValidity,
} from "@/components/ui/component";
function Input({
className,
...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
return (
<span
className={cn(
"relative inline-flex w-full rounded-lg border border-input bg-background text-sm text-foreground shadow-sm transition-shadow has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24",
className,
)}
data-slot="input-control"
>
<input
className="h-8 w-full min-w-0 rounded-[inherit] bg-transparent px-3 leading-8 outline-none placeholder:text-muted-foreground/60"
{...props}
/>
</span>
);
}
export default function FieldWithValidityDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-sm">
<Field>
<FieldLabel>Email</FieldLabel>
<Input placeholder="Enter your email" required type="email" />
<FieldValidity>
{(validity) => (
<div className="flex w-full flex-col gap-2">
{validity.error && (
<p className="text-destructive-foreground text-xs">
{validity.error}
</p>
)}
<div className="w-full rounded-md bg-muted p-2">
<pre className="max-h-60 overflow-y-auto font-mono text-xs [scrollbar-width:none]">
{JSON.stringify(validity, null, 2)}
</pre>
</div>
</div>
)}
</FieldValidity>
</Field>
</div>
</div>
);
}