Field

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.

Cby coss

Install

npx shadcn@latest add https://21st.dev/r/coss.com/field

Loading preview...

"use client";
import { Checkbox } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group";
import { Field, FieldItem, FieldLabel } from "@/components/ui/component";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
export default function FieldCheckboxGroupDemo() {
  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="frameworks" render={(props: any) => <Fieldset {...props} />}>
          <FieldsetLegend className="font-medium text-sm">Frameworks</FieldsetLegend>
          <CheckboxGroup defaultValue={["react"]}>
            <FieldItem><FieldLabel><Checkbox value="react" /> React</FieldLabel></FieldItem>
            <FieldItem><FieldLabel><Checkbox value="vue" /> Vue</FieldLabel></FieldItem>
            <FieldItem><FieldLabel><Checkbox value="svelte" /> Svelte</FieldLabel></FieldItem>
          </CheckboxGroup>
        </Field>
      </div>
    </div>
  );
}