Controls

Controls render individual fields. JSONForms selects the right control automatically based on the field's JSON Schema type and any options set in the UI Schema.

Text

Handles any string field without a special format or enum. Uses the ShadCN Input component.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-control.json

{ "type": "string" }

Number / Integer

Handles number and integer types. Converts the input value to a number via valueAsNumber.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-control.json

{ "type": "number" }
{ "type": "integer" }

Date

Handles fields with "format": "date". Renders a native <input type="date">.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-date-control.json

{ "type": "string", "format": "date" }

Time

Handles fields with "format": "time". Renders a native <input type="time">.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-time-control.json

{ "type": "string", "format": "time" }

DateTime

Handles fields with "format": "date-time". Renders a native <input type="datetime-local">.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-datetime-control.json

{ "type": "string", "format": "date-time" }

Boolean (Checkbox)

Handles boolean fields. Renders a ShadCN Checkbox.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-control.json

{ "type": "boolean" }

Boolean (Toggle / Switch)

An alternative boolean renderer using a ShadCN Switch. Activated by setting options.toggle: true in the UI Schema. Takes priority rank 3 (lower than the checkbox at 10), so you must opt in explicitly.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-toggle-control.json

{
    "type": "Control",
    "scope": "#/properties/isActive",
    "options": { "toggle": true }
}

Enum (Select)

Handles fields with an enum array. Renders a ShadCN Select dropdown.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-enum-control.json

{
    "type": "string",
    "enum": ["draft", "published", "archived"]
}

Enum (Radio Group)

An alternative enum renderer using radio buttons. Activated by options.format: 'radio'. Ranked at 20 — higher than the select, so it wins when explicitly set.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-radio-group-control.json

{
    "type": "Control",
    "scope": "#/properties/status",
    "options": { "format": "radio" }
}

OneOf Enum (Select)

Handles oneOf schemas where each option has a const and optional title. Uses withJsonFormsOneOfEnumProps so labels come from title fields, not raw values.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-enum-control.json

{
    "oneOf": [
        { "const": "us", "title": "United States" },
        { "const": "gb", "title": "United Kingdom" },
        { "const": "in", "title": "India" }
    ]
}

OneOf Enum (Radio Group)

Radio group variant for oneOf schemas. Activated by options.format: 'radio'.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-radio-group-control.json

{
    "type": "Control",
    "scope": "#/properties/plan",
    "options": { "format": "radio" }
}

AnyOf String or Enum

Handles anyOf schemas that mix a list of enum suggestions with a free-text string type. Renders a text input with a <datalist> — the user can pick a suggestion or type anything freely.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-anyof-string-or-enum-control.json

{
    "anyOf": [
        { "type": "string" },
        { "enum": ["Option A", "Option B", "Option C"] }
    ]
}

Textarea

Multi-line text input. Activated by setting options.multi: true in the UI Schema. Ranked at 12, higher than the default text control (10), so it wins when explicitly opted in.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-textarea-control.json

{
    "type": "Control",
    "scope": "#/properties/description",
    "options": { "multi": true }
}

Slider

Handles numeric fields that define both minimum and maximum in the schema (isRangeControl). Renders a ShadCN Slider with the current value displayed.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-slider-control.json

{
    "type": "number",
    "minimum": 0,
    "maximum": 100,
    "multipleOf": 5
}

Renderer priority reference

When multiple renderers could match, JSONForms picks the highest rank: