JSON Field
A form component for editing structured JSON data with schema-driven form fields and a raw JSON editor.
Installation
bash
npx shadcn@latest add @redpanda/json-fieldbash
pnpm dlx shadcn@latest add @redpanda/json-fieldbash
yarn dlx shadcn@latest add @redpanda/json-fieldbash
bunx shadcn@latest add @redpanda/json-fieldbash
nubx shadcn@latest add @redpanda/json-fieldbash
aube dlx shadcn@latest add @redpanda/json-fieldWhen 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
Form Integration
Use with React Hook Form for validation and form state management.
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> )}/>;