# 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](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/ui-schema.md). For which options a specific renderer respects, see the [renderers reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md).

## `autocomplete`[​](#autocomplete "Direct link to 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.

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

```

## `detail`[​](#detail "Direct link to 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

```json
{
  "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](https://prismatic.io/docs/integrations/data-sources/json-forms/using-json-forms.md#customizing-field-mapper-layouts) for a worked example.

## `elementLabelProp`[​](#elementlabelprop "Direct link to 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.

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

```

## `focus`[​](#focus "Direct link to 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`[​](#format "Direct link to 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`[​](#hiderequiredasterisk "Direct link to 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`[​](#labelplacement "Direct link to labelplacement")

**Applies to:** `Control` rendered as a [toggle switch](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#toggle)

**Type:** `"top"` | `"left"`

**Default:** `"top"`

Where the label sits relative to the toggle switch.

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

```

## `layout`[​](#layout "Direct link to layout")

**Applies to:** `Control` scoped to an array of objects

**Type:** `"Accordion"` | `"Table"`

**Default:** `"Table"`

Selects the [array renderer](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#arrays). `"Accordion"` renders each item as a collapsible panel; `"Table"` renders them as rows in a table.

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

```

## `multi`[​](#multi "Direct link to 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.

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

```

## `readonly`[​](#readonly "Direct link to 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`[​](#restrict "Direct link to 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`[​](#shownavbuttons "Direct link to shownavbuttons")

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

**Type:** `boolean`

**Default:** `false`

Displays **Next** and **Previous** buttons for navigating between steps.

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

```

## `showSortButtons`[​](#showsortbuttons "Direct link to 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`[​](#showunfocuseddescription "Direct link to 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`[​](#slider "Direct link to slider")

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

**Type:** `boolean`

**Default:** `false`

Renders the numeric input as a [slider](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#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`[​](#toggle "Direct link to toggle")

**Applies to:** `Control` on a boolean property

**Type:** `boolean`

**Default:** `false`

Renders the boolean as a switch instead of a [checkbox](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md#checkbox).

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

```

## `trim`[​](#trim "Direct link to 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`[​](#variant "Direct link to 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.

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

```

## Inheriting options[​](#inheriting-options "Direct link to 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.

## Related pages[​](#related-pages "Direct link to Related pages")

* [UI schema reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/ui-schema.md)
* [Renderers reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/renderers.md)
* [Rules reference](https://prismatic.io/docs/integrations/data-sources/json-forms/reference/rules.md)
* [JSON Forms controls docs](https://jsonforms.io/docs/uischema/controls/)