Renderers Reference

A renderer is what the configuration wizard uses to draw a given UI schema element. Prismatic selects a renderer automatically based on the schema type, format, and options at each UI schema element.

This page documents which renderer the wizard uses for each schema shape and which options each renderer respects.

Controls by schema type

string

Schema shape	Renderer	Notes
"type": "string"	Text input	Default
"type": "string", "format": "password"	Password input	Masks the value
"type": "string", "format": "date"	Date picker
"type": "string", "format": "time"	Time picker
"type": "string", "format": "date-time"	Date-time picker
"type": "string", "enum": [...]	Enum dropdown
"type": "string", "oneOf": [...]	OneOf dropdown	Supports autocomplete

integer and number

Schema shape	Renderer
"type": "integer" or "type": "number"	Number input
"type": "integer" or "type": "number" with minimum, maximum, default, and options.slider: true	Slider

boolean

Schema shape	Renderer
"type": "boolean"	Checkbox
"type": "boolean" with options.toggle: true	Toggle switch

object

Objects render as grouped controls inside the parent layout. Use a Group to add a visible label and container around a nested object's inputs.

array

Array rendering has several variants - see the arrays section below.

Text input

The default renderer for "type": "string".

Respected options:

Option	Effect
multi	Renders a multi-line textarea instead of a single-line input
trim	Sizes the input to match the schema's maxLength
restrict	Prevents input beyond the schema's maxLength
focus	Autofocuses this field when the form first mounts

Multi-line text

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

The text input also handles password rendering when the schema property uses "format": "password".

Date picker

Used for "type": "string" with "format": "date".

The picker stores the selected date in ISO 8601 format (YYYY-MM-DD). Validate against a specific range with formatMinimum and formatMaximum on the schema:

Date input with a valid range

{
  "type": "object",
  "properties": {
    "startDate": {
      "type": "string",
      "format": "date",
      "formatMinimum": "2026-01-01",
      "formatMaximum": "2026-12-31"
    }
  }
}

Time picker

Used for "type": "string" with "format": "time".

Stores the selected time in ISO 8601 format (HH:mm:ss).

Date-time picker

Used for "type": "string" with "format": "date-time".

Stores a full ISO 8601 timestamp including timezone.

Enum dropdown

Used when a string property has an enum array. The customer sees - and the config variable stores - each value as written in the schema.

Enum

{
  "continent": {
    "type": "string",
    "enum": ["North America", "Europe", "Asia"]
  }
}

OneOf dropdown

Used when a string property has a oneOf array of { "title", "const" } entries. The customer sees the title; the config variable stores the const.

oneOf

{
  "continent": {
    "type": "string",
    "oneOf": [
      { "title": "North America", "const": "NA" },
      { "title": "Europe", "const": "EU" }
    ]
  }
}

Respected options:

Option	Effect
autocomplete	Renders the dropdown as a type-ahead input instead
focus	Autofocuses this field when the form first mounts

autocomplete is especially valuable when the list comes from a third-party API and might contain dozens or hundreds of entries.

Checkbox

The default renderer for "type": "boolean". Renders as a checkbox with the schema's description as helper text.

Toggle

Set options.toggle: true on a boolean control to render a switch instead of a checkbox.

Respected options:

Option	Effect
toggle	Renders as a toggle switch (required for this renderer)
labelPlacement	"top" (default) places the label above the switch; "left" places it to the left
focus	Autofocuses this field when the form first mounts

Toggle with label on the left

{
  "type": "Control",
  "scope": "#/properties/enabled",
  "options": {
    "toggle": true,
    "labelPlacement": "left"
  }
}

Slider

Used for integer or number properties that declare minimum, maximum, and default, and set options.slider: true. Uses the schema's multipleOf as the step increment.

Slider schema

{
  "type": "object",
  "properties": {
    "volume": {
      "type": "integer",
      "minimum": 0,
      "maximum": 11,
      "default": 5,
      "multipleOf": 1
    }
  }
}

Slider UI schema

{
  "type": "Control",
  "scope": "#/properties/volume",
  "options": { "slider": true }
}

Arrays

Prismatic provides several renderers for array properties. Choose one with options.layout on the Control, or let Prismatic pick the default.

Table

The default renderer for array of object. Each array item becomes a row; each object property becomes a column.

Array as a table

{
  "type": "Control",
  "scope": "#/properties/contacts",
  "options": { "showSortButtons": true }
}

Respected options:

Option	Effect
showSortButtons	Adds up and down reorder buttons to each row

Tables suit arrays where each item has a handful of primitive fields and the customer wants to scan them side by side.

Accordion

Set options.layout: "Accordion" on a Control scoped to an array to render each item as a collapsible panel.

Array as an accordion

{
  "type": "Control",
  "scope": "#/properties/mappings",
  "options": {
    "layout": "Accordion",
    "elementLabelProp": "source",
    "showSortButtons": true
  }
}

Respected options:

Option	Effect
layout	Set to "Accordion" to use this renderer
elementLabelProp	Name of the property to use as each accordion header (defaults to the first primitive property)
showSortButtons	Adds up and down reorder buttons to each panel
detail	Inline UI schema for the item's detail view - see custom field mapper layouts

Use an accordion when each array item has several fields and the customer wants to focus on one item at a time.

List with detail

Use the ListWithDetail UI type for a master-list / detail-form split. The master list shows one entry per item using the first primitive property (or options.elementLabelProp); the detail form shows the currently selected item's full shape.

Array of primitives

For arrays of strings, numbers, or booleans (no nested object), Prismatic renders an inline list with an add button.

Related pages

• Schema reference
• UI schema reference
• Options reference
• JSON Forms controls docs
• JSON Forms layouts docs