jsonforms

simple with JSON¶

same with YAML¶

strings, formats and descriptions¶

format switches the input widget; description shows helper text under the field.

numbers with constraints¶

integer vs number, plus minimum / maximum bounds (used for validation).

booleans¶

boolean renders as a checkbox.

dates and times¶

Driven by the format keyword on a string.

An enum on a string renders as a select.

multiple choice (checkboxes)¶

An array of enum values with uniqueItems renders as a set of checkboxes.

required fields and validation¶

Fields listed in required must be filled; constraints like minLength and pattern are validated live, and the Submit button stays disabled until the form is valid.

a list of items¶

An array of object produces an add/remove list of sub-forms.

custom UI Schema¶

So far the body has been a bare JSON Schema, and JSONForms auto-generates the layout (every field stacked vertically). To control the layout, provide a UI Schema alongside the schema, using the Schema: / UISchema: / Data: form. The simplest case where it makes a visible difference: placing two fields side by side with a HorizontalLayout.

nested objects¶

Nested object properties are not expanded by the auto-generated layout — with a schema only, the nested fields simply don’t show up. Supplying a UI Schema that points at the nested scopes makes them render — here grouped in a box with Group, and pre-filled via Data:.

styling¶

theme variables (site-wide)¶

The form’s look is exposed through CSS custom properties (--jsonform-accent, --jsonform-radius, --jsonform-border, ...). Because inherited properties cross the shadow-DOM boundary, a site can override them with ordinary CSS. Here _static/style_local.css (loaded from myst.yml) sets a green accent and rounder corners — which applies to every form on this page (notice all the Submit buttons are green). No per-directive option is needed.

inline CSS¶

The Style: chunk can carry verbatim CSS rules, injected into this form only (after the base stylesheet, so they win). Here: thick red borders and red labels.

external CSS file¶

A Style: value that is a path or URL ending in .css is treated as a reference: mystmd stages the file and links it inside this form’s shadow root. Here _static/style_forms.css (purple, dashed borders, small-caps labels).

a survey, in one form¶

A single {jsonform} can mimic a multi-section Google Form. The UISchema arranges fields into titled Group sections, with a HorizontalLayout for the name/email row and options: {multi: true} for the multi-line comment. The three language picks share one list of 12 options via a definitions entry referenced with $ref (so the list is written once). Choosing the same language twice is not prevented — JSON Schema can’t express that across separate fields.