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 FormEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/component";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@/components/ui/select";
export default function FieldCompleteFormDemo() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Full name: ${formData.get("fullName") || ""}
Email: ${formData.get("email") || ""}
Role: ${formData.get("role") || ""}`);
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-sm">
<Form onSubmit={onSubmit}>
<Field name="fullName">
<FieldLabel>Full Name <span className="text-destructive-foreground">*</span></FieldLabel>
<Input placeholder="John Doe" required type="text" />
<FieldError>Please enter a valid name.</FieldError>
</Field>
<Field name="email">
<FieldLabel>Email <span className="text-destructive-foreground">*</span></FieldLabel>
<Input placeholder="user@example.com" required type="email" />
<FieldError>Please enter a valid email.</FieldError>
</Field>
<Field name="role">
<FieldLabel>Role</FieldLabel>
<Select items={[{ label: "Select your role", value: null }, { label: "Developer", value: "developer" }, { label: "Designer", value: "designer" }, { label: "Product Manager", value: "manager" }, { label: "Other", value: "other" }]}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectPopup>
<SelectItem value="developer">Developer</SelectItem>
<SelectItem value="designer">Designer</SelectItem>
<SelectItem value="manager">Product Manager</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectPopup>
</Select>
<FieldDescription>This is an optional field</FieldDescription>
</Field>
<Field name="newsletter">
<div className="flex items-center gap-2">
<Checkbox />
<FieldLabel className="cursor-pointer">Subscribe to newsletter</FieldLabel>
</div>
</Field>
<Button disabled={loading} type="submit">{loading ? "Submitting…" : "Submit"}</Button>
</Form>
</div>
</div>
);
}