# 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`](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/options.md) each renderer respects. ## Controls by schema type[​](#controls-by-schema-type "Direct link to Controls by schema type") ### `string`[​](#string "Direct link to string") | Schema shape | Renderer | Notes | | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `"type": "string"` | [Text input](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#text-input) | Default | | `"type": "string"`, `"format": "password"` | Password input | Masks the value | | `"type": "string"`, `"format": "date"` | [Date picker](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#date-picker) | | | `"type": "string"`, `"format": "time"` | [Time picker](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#time-picker) | | | `"type": "string"`, `"format": "date-time"` | [Date-time picker](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#date-time-picker) | | | `"type": "string"`, `"enum": [...]` | [Enum dropdown](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#enum-dropdown) | | | `"type": "string"`, `"oneOf": [...]` | [OneOf dropdown](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#oneof-dropdown) | Supports `autocomplete` | ### `integer` and `number`[​](#integer-and-number "Direct link to 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](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#slider) | ### `boolean`[​](#boolean "Direct link to boolean") | Schema shape | Renderer | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | `"type": "boolean"` | [Checkbox](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#checkbox) | | `"type": "boolean"` with `options.toggle: true` | [Toggle switch](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#toggle) | ### `object`[​](#object "Direct link to object") Objects render as grouped controls inside the parent layout. Use a [`Group`](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/ui-schema.md#group) to add a visible label and container around a nested object's inputs. ### `array`[​](#array "Direct link to array") Array rendering has several variants - see the [arrays](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#arrays) section below. ## Text input[​](#text-input "Direct link to 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 ```json { "type": "Control", "scope": "#/properties/companyDescription", "options": { "multi": true } } ``` The text input also handles password rendering when the schema property uses `"format": "password"`. ## Date picker[​](#date-picker "Direct link to 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 ```json { "type": "object", "properties": { "startDate": { "type": "string", "format": "date", "formatMinimum": "2026-01-01", "formatMaximum": "2026-12-31" } } } ``` ## Time picker[​](#time-picker "Direct link to Time picker") Used for `"type": "string"` with `"format": "time"`. Stores the selected time in ISO 8601 format (`HH:mm:ss`). ## Date-time picker[​](#date-time-picker "Direct link to Date-time picker") Used for `"type": "string"` with `"format": "date-time"`. Stores a full ISO 8601 timestamp including timezone. ## Enum dropdown[​](#enum-dropdown "Direct link to 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 ```json { "continent": { "type": "string", "enum": ["North America", "Europe", "Asia"] } } ``` ## OneOf dropdown[​](#oneof-dropdown "Direct link to 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 ```json { "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[​](#checkbox "Direct link to Checkbox") The default renderer for `"type": "boolean"`. Renders as a checkbox with the schema's `description` as helper text. ## Toggle[​](#toggle "Direct link to 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 ```json { "type": "Control", "scope": "#/properties/enabled", "options": { "toggle": true, "labelPlacement": "left" } } ``` ## Slider[​](#slider "Direct link to Slider") Used for `integer` or `number` properties that declare `minimum`, `maximum`, and `default`, and set [`options.slider: true`](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/options.md#slider). Uses the schema's `multipleOf` as the step increment. Slider schema ```json { "type": "object", "properties": { "volume": { "type": "integer", "minimum": 0, "maximum": 11, "default": 5, "multipleOf": 1 } } } ``` Slider UI schema ```json { "type": "Control", "scope": "#/properties/volume", "options": { "slider": true } } ``` ## Arrays[​](#arrays "Direct link to Arrays") Prismatic provides several renderers for array properties. Choose one with [`options.layout`](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/options.md#layout) on the `Control`, or let Prismatic pick the default. ### Table[​](#table "Direct link to Table") The default renderer for `array` of `object`. Each array item becomes a row; each object property becomes a column. Array as a table ```json { "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[​](#accordion "Direct link to Accordion") Set `options.layout: "Accordion"` on a `Control` scoped to an array to render each item as a collapsible panel. Array as an accordion ```json { "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](https://prismatic.io/docs/integrations/data-sources/json-forms/using-json-forms.md#customizing-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[​](#list-with-detail "Direct link to List with detail") Use the [`ListWithDetail`](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/ui-schema.md#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[​](#array-of-primitives "Direct link to Array of primitives") For arrays of strings, numbers, or booleans (no nested object), Prismatic renders an inline list with an add button. ## Related pages[​](#related-pages "Direct link to Related pages") * [Schema reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/schema.md) * [UI schema reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/ui-schema.md) * [Options reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/options.md) * [JSON Forms controls docs](https://jsonforms.io/docs/uischema/controls/) * [JSON Forms layouts docs](https://jsonforms.io/docs/uischema/layouts/)