Settings Form from a JSON Schema

ProNew

A settings screen generated from a plain JSON Schema (for example one your API returns): enums become selects, booleans become checkboxes, descriptions become hints, defaults fill the values, and the built-in checks validate. Use this when the form's shape lives on the server.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

The server owns the shape of the data (plugin settings, tenant configuration, an OpenAPI request body) and the client should not hard-code the form.

Do not use it when: Do not trust a schema from an untrusted source to render arbitrary UI; it can only change fields and labels here, but validate on the server anyway.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`schema`	`JsonSchema`	The definition. Defaults to a notification settings schema, exported as `notificationSchema`.
`onSave`	`(values) => void \| Promise<void>`	Receives the cleaned values: empty optional fields are left out.

Accessibility

Hints from description are linked to their control; format checks (email, URL, ranges) produce linked alerts after blur or submit.
Optional empty values are not sent, so a cleared "Webhook URL" removes the setting instead of saving an empty string.
The success line is a polite status; the controls keep their labels and required marks from the schema.

Testing

The pattern ships with a Testing Library test (auto-form-json-schema-settings.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

The server owns the shape of the data (plugin settings, tenant configuration, an OpenAPI request body) and the client should not hard-code the form.

Do not use it when: Do not trust a schema from an untrusted source to render arbitrary UI; it can only change fields and labels here, but validate on the server anyway.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`schema`	`JsonSchema`	The definition. Defaults to a notification settings schema, exported as `notificationSchema`.
`onSave`	`(values) => void \| Promise<void>`	Receives the cleaned values: empty optional fields are left out.

Accessibility

Hints from description are linked to their control; format checks (email, URL, ranges) produce linked alerts after blur or submit.
Optional empty values are not sent, so a cleared "Webhook URL" removes the setting instead of saving an empty string.
The success line is a polite status; the controls keep their labels and required marks from the schema.

Testing

The pattern ships with a Testing Library test (auto-form-json-schema-settings.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.