# Auto Form with Field Overrides

> Shows the override layer of a generated form: relabelled fields, a textarea and a radio group instead of the defaults, a hidden field, custom option labels, a disabled field and a custom order. Use this when the schema is right but the presentation needs a nudge.

A shadcn/ui block from the [@tealmac](https://ui.tealmac.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/tealmac/auto-form-field-overrides).

- Page, with a live preview: https://shadcn.exchange/r/tealmac/auto-form-field-overrides
- Screenshot: https://shadcn.exchange/shot/tealmac/auto-form-field-overrides/light.png
- Registry item: https://ui.tealmac.com/r/auto-form-field-overrides.json
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/tealmac/auto-form-field-overrides.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@tealmac/auto-form`

## Files

### `registry/patterns/auto-form-field-overrides/auto-form-field-overrides.tsx`

```tsx
"use client"

import * as React from "react"

import { AutoForm, type JsonSchema } from "@/components/ui/auto-form"

const schema: JsonSchema = {
  type: "object",
  title: "New ticket",
  required: ["subject", "priority"],
  "x-order": ["subject", "priority", "details", "notify", "internalId"],
  properties: {
    internalId: { type: "string", default: "TKT-1042" },
    notify: { type: "boolean", title: "notify" },
    details: { type: "string", maxLength: 1000 },
    priority: {
      type: "string",
      enum: ["low", "normal", "urgent"],
      default: "normal",
    },
    subject: { type: "string", minLength: 3 },
  },
}

export interface AutoFormFieldOverridesProps {
  onSubmit?: (values: Record<string, unknown>) => void
}

export function AutoFormFieldOverrides({
  onSubmit,
}: AutoFormFieldOverridesProps) {
  return (
    <div className="w-full max-w-md">
      <AutoForm
        schema={schema}
        fieldConfig={{
          subject: {
            label: "What do you need help with?",
            placeholder: "Short summary",
          },
          priority: {
            widget: "radio",
            optionLabels: {
              low: "Low (a week)",
              normal: "Normal (2 days)",
              urgent: "Urgent (today)",
            },
          },
          details: {
            widget: "textarea",
            description:
              "Steps to reproduce, what you expected, what happened.",
          },
          notify: { widget: "switch", label: "Email me updates" },
          internalId: { disabled: true, label: "Ticket number" },
        }}
        submitLabel="Open ticket"
        onSubmit={(values) => onSubmit?.(values)}
      />
    </div>
  )
}
```