{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-field-7","type":"registry:block","title":"Settings form with validation","description":"Settings form with validation","dependencies":[],"registryDependencies":["button","checkbox","field","input","switch","textarea"],"files":[{"path":"c-field-7.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldTitle,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto w-full max-w-xs\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"settings-name\">\n            Display Name <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input id=\"settings-name\" defaultValue=\"Alex Johnson\" />\n          <FieldDescription>This is your public display name.</FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"settings-slug\">URL Slug</FieldLabel>\n          <Input id=\"settings-slug\" defaultValue=\"alex johnson\" />\n          <FieldError>\n            Slug can only contain lowercase letters, numbers, and hyphens.\n          </FieldError>\n        </Field>\n        <Field>\n          <div className=\"flex items-center justify-between\">\n            <FieldLabel htmlFor=\"settings-bio\">Bio</FieldLabel>\n            <span className=\"text-muted-foreground text-xs\">24/160</span>\n          </div>\n          <Textarea\n            id=\"settings-bio\"\n            defaultValue=\"Software engineer & open source contributor.\"\n            className=\"min-h-[80px]\"\n          />\n          <FieldDescription>\n            Brief description for your profile.\n          </FieldDescription>\n        </Field>\n        <FieldSeparator />\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Email Notifications</FieldTitle>\n            <FieldDescription>\n              Receive emails about account activity.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"settings-email-notif\" defaultChecked />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Marketing Emails</FieldTitle>\n            <FieldDescription>\n              Receive emails about new features and tips.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"settings-marketing\" />\n        </Field>\n        <FieldSeparator />\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"settings-terms\" />\n          <FieldContent>\n            <FieldTitle>Terms of Service</FieldTitle>\n            <FieldDescription>\n              I agree to the <a href=\"#\">Terms of Service</a> and{\" \"}\n              <a href=\"#\">Privacy Policy</a>.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Button className=\"w-full\">Save Changes</Button>\n      </FieldGroup>\n    </div>\n  )\n}","target":"components/examples/c-field-7.tsx"}],"meta":{"order":7,"label":"Settings Form"}}