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 { Field, FieldDescription, FieldItem, FieldLabel } from "@/components/ui/component";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
import { Radio, RadioGroup } from "@/components/ui/radio-group";
export default function FieldRadioGroupDemo() {
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 className="gap-4" name="plan" render={(props: any) => <Fieldset {...props} />}>
<FieldsetLegend className="font-medium text-sm">Choose Plan</FieldsetLegend>
<RadioGroup defaultValue="free">
<FieldItem><FieldLabel><Radio value="free" /> Free</FieldLabel></FieldItem>
<FieldItem><FieldLabel><Radio value="pro" /> Pro</FieldLabel></FieldItem>
<FieldItem><FieldLabel><Radio value="enterprise" /> Enterprise</FieldLabel></FieldItem>
</RadioGroup>
<FieldDescription>Select the plan that fits your needs.</FieldDescription>
</Field>
</div>
</div>
);
}