Skip to main content

Options Reference

Every UI schema element accepts an options object. The keys it recognizes depend on the element type and the selected renderer. This page lists every option Prismatic's configuration wizard respects, alphabetized.

For how options fit into the rest of the UI schema, see the UI schema reference. For which options a specific renderer respects, see the renderers reference.

autocomplete​

Applies to: Control whose schema property uses oneOf

Type: boolean

Default: false

Renders a oneOf dropdown as a type-ahead autocomplete field. Typing in the input filters the list.

{
  "type": "Control",
  "scope": "#/properties/company",
  "options": { "autocomplete": true }
}

detail​

Applies to: Control scoped to an array, and ListWithDetail

Type: object (a UI schema element) or "DEFAULT" | "GENERATED" | "REGISTERED"

Overrides the default per-item detail form. Provide an inlined UI schema to control exactly how each array item is laid out.

Custom detail layout inside an Accordion
{
  "type": "Control",
  "scope": "#",
  "options": {
    "layout": "Accordion",
    "detail": {
      "type": "HorizontalLayout",
      "elements": [
        { "type": "Control", "scope": "#/properties/source" },
        { "type": "Control", "scope": "#/properties/destination" }
      ]
    }
  }
}

See Customizing field mapper layouts for a worked example.

elementLabelProp​

Applies to: Control with options.layout: "Accordion", ListWithDetail

Type: string

Default: The first primitive property of the item schema

Which property to use as each accordion panel or list entry label.

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

focus​

Applies to: Any Control

Type: boolean

Default: false

Autofocuses the control when the form first mounts. Only one control per form should set focus: true.

format​

Applies to: Control on a string property

Type: string

Overrides the renderer choice for a string control. In practice, use the schema's format keyword instead - it drives the same selection and validates input.

Set options.format: "password" in rare cases where you need a masked input without declaring "format": "password" in the schema (for example, when the schema comes from an external system you don't control).

hideRequiredAsterisk​

Applies to: Any Control or layout

Type: boolean

Default: false

Hides the * marker next to required field labels within this element's subtree.

labelPlacement​

Applies to: Control rendered as a toggle switch

Type: "top" | "left"

Default: "top"

Where the label sits relative to the toggle switch.

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

layout​

Applies to: Control scoped to an array of objects

Type: "Accordion" | "Table"

Default: "Table"

Selects the array renderer. "Accordion" renders each item as a collapsible panel; "Table" renders them as rows in a table.

{
  "type": "Control",
  "scope": "#/properties/mappings",
  "options": { "layout": "Accordion" }
}

multi​

Applies to: Control on a string property

Type: boolean

Default: false

Renders the string as a multi-line textarea instead of a single-line input. Useful for descriptions, notes, or any field where line breaks matter.

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

readonly​

Applies to: Any Control or layout

Type: boolean

Default: false

Disables editing of the element and its subtree. Customers see the current value but can't change it.

restrict​

Applies to: Control on a string property with maxLength

Type: boolean

Default: false

Enforces the schema's maxLength at the browser level by setting the input's HTML maxlength attribute. Without restrict, customers can type past the limit and see a validation error instead.

showNavButtons​

Applies to: Categorization with options.variant: "stepper"

Type: boolean

Default: false

Displays Next and Previous buttons for navigating between steps.

{
  "type": "Categorization",
  "elements": [
    /* ... */
  ],
  "options": {
    "variant": "stepper",
    "showNavButtons": true
  }
}

showSortButtons​

Applies to: Control scoped to an array

Type: boolean

Default: false

Adds up and down reorder buttons to each array item. Works with both the table and accordion renderers.

showUnfocusedDescription​

Applies to: Any Control

Type: boolean

Default: true

Keeps the schema's description visible beneath the input at all times. When false, descriptions only appear while the field is focused.

slider​

Applies to: Control on a numeric property with minimum, maximum, and default

Type: boolean

Default: false

Renders the numeric input as a slider. The schema must include minimum, maximum, and default values for the slider to render. The schema's multipleOf sets the slider's step increment.

toggle​

Applies to: Control on a boolean property

Type: boolean

Default: false

Renders the boolean as a switch instead of a checkbox.

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

trim​

Applies to: Control on a string property with maxLength

Type: boolean

Default: false

Sizes the input to fit the schema's maxLength, producing a narrower field. Pair with restrict to enforce the limit as the customer types.

variant​

Applies to: Categorization

Type: "stepper"

Default: Tabs

Switches a Categorization from its default tabbed layout to a stepper. Combine with showNavButtons to add Next and Previous buttons.

{
  "type": "Categorization",
  "elements": [
    /* ... */
  ],
  "options": {
    "variant": "stepper",
    "showNavButtons": true
  }
}

Inheriting options​

Options set on a layout pass down to child elements through JSON Forms' shared config. You can set cross-cutting options like showUnfocusedDescription: false once at the root rather than repeating them on every control.