JSON Field
A form component for editing structured JSON data with schema-driven form fields and a raw JSON editor.
Installation
Loading component...
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
import { JSONField } from '@/registry/components/json-field';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
Loading component...
Form Integration
Use with React Hook Form for validation and form state management.
Loading component...
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>
)}
/>Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.