---
title: JSON Field
description: A form component for editing structured JSON data with schema-driven form fields and a raw JSON editor.
icon: braces
sidebar:
  badge: Updated
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/json-field
```

<ComponentPreview name="json-field-demo" description="A JSON Field component with form mode." />

## When to use

The JSON Field component renders a dynamic form from a JSON Schema, with the ability to switch between form mode and raw JSON editing. Use it when users need to input or edit structured JSON data.

## Usage

```tsx
import { JSONField } from '@/registry/components/json-field';
```

```tsx
const schema = {
  type: 'object',
  properties: {
    name: { type: 'string', description: 'Full name' },
    age: { type: 'integer', description: 'Age in years' },
    active: { type: 'boolean' },
  },
};

<JSONField onChange={setValue} schema={schema} value={value} />;
```

## Examples

### Default

<ComponentPreview name="json-field-demo" description="A JSON Field component with form mode." />

### Form Integration

Use with React Hook Form for validation and form state management.

<ComponentPreview name="json-field-form-demo" description="JSON Field integrated with React Hook Form." />

```tsx
import { JSONField } from '@/registry/components/json-field';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/components/form';

<FormField
  control={form.control}
  name="config"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Config</FormLabel>
      <FormControl>
        <JSONField onChange={field.onChange} schema={schema} value={field.value} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>;
```