--- sidebar_label: UI elements reference toc_max_heading_level: 3 doc_id: ec4a3b76-5d50-40a3-9455-12081ceba64f description: Reference tables for all supported UI schema elements and their available options in nullplatform. keywords: - ui schema - ui elements - options - jsonforms - reference --- # UI elements reference This page provides a quick, scannable reference of all available UI Schema element options in nullplatform. Use it as a companion to the [UI design docs](ui-schema.md), which explain when to use each UI element, and the [advanced docs](advanced.md), which show how to add dynamic behaviors using rules. ## Control options These options define the behavior and appearance of form controls that are bound to JSON Schema properties (such as text fields, enums, radio groups, chips, sliders, and date/time pickers). Here you’ll find display formats, enum helpers, boolean variations, and date/time configurations. > 💡 **Tip:** Many of these options can also be combined with `APPLY` rules to add dynamic behavior based on data. | Option | Type | Applicable to | Description | | ---------------------------- | ------------------------------ | ---------------------- | ---------------------------------------------------------------------------------------------------------------------- | | `ampm` | boolean | Date/Time controls | Use 12-hour format with AM/PM | | `autocomplete` | boolean | Enum controls | Use autocomplete vs select dropdown (default: true) | | `color` | string | ChipControl | Default chip color: `"default"` \| `"primary"` \| `"secondary"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` | | `dateFormat` | string | DateControl | Display format (default: `"YYYY-MM-DD"`) | | `dateSaveFormat` | string | DateControl | Storage format (default: `"YYYY-MM-DD"`) | | `dateTimeFormat` | string | DateTimeControl | Display format (default: `"YYYY-MM-DD HH:mm"`) | | `dateTimeSaveFormat` | string | DateTimeControl | Storage format (ISO format) | | `direction` | `"vertical"` \| `"horizontal"` | RadioGroup, Display | Layout direction for options/fields | | `disableAdd` | boolean | Array controls | Disable the "Add" button | | `disableRemove` | boolean | Array controls | Disable the "Remove" button | | `elementLabelProp` | string | Array layouts | Property name to use as item label | | `focus` | boolean | Most input controls | Auto-focus this control on mount | | `format` | string | Various | Special formats: `"chip"`, `"password"`, `"markdown"`, `"text"`, `"radio"`, `"radio-cards"` | | `hideRequiredAsterisk` | boolean | Most controls | Hide the required field asterisk | | `icon` | string | ChipControl, Display | Icon name in Iconify format (`iconset:icon-name`, e.g., `"ic:outline-check"`, `"eva:eye-fill"`) | | `labelSuffix` | string | Autocomplete | Suffix text added to all option labels | | `mapping` | object | ChipControl | Per-value chip configuration | | `multi` | boolean | TextControl | Render as multiline textarea | | `placeholder` | string | Autocomplete | Custom placeholder text for input | | `restrict` | boolean | Text/Number | Enforce maxLength or max value | | `showArrayLayoutSortButtons` | boolean | ArrayLayout | Show up/down arrows for reordering array items | | `showArrayTableSortButtons` | boolean | TableControl | Show up/down arrows for reordering table rows | | `showDescription` | boolean | Display controls | Show the field description | | `showNavButtons` | boolean | Categorization stepper | Show Previous/Next navigation buttons | | `showUnfocusedDescription` | boolean | Most controls | Show description even when not focused | | `size` | string | ChipControl | Default chip size: `"small"` \| `"medium"` | | `style` | object | Label, Display, Chip | CSS properties object | | `timeFormat` | string | TimeControl | Display format (default: `"HH:mm"`) | | `timeSaveFormat` | string | TimeControl | Storage format (default: `"HH:mm:ss"`) | | `toggle` | boolean | BooleanControl | Render as toggle switch instead of checkbox | | `trim` | boolean | Most controls | Fixed width instead of full width | | `valueLabelDisplay` | `"auto"` \| `"on"` \| `"off"` | SliderControl | When to show the slider value label | | `variant` | string | Categorization, Chip | `"stepper"` for Categorization; `"filled"` \| `"outlined"` for Chip | | `views` | array | Date/Time controls | Which picker views to show (e.g., `["year", "month", "day"]`) | ## Layout options Layout options control how the form is organized visually without affecting the data model. This section covers configuration for **Categorization layouts**, including navigation controls and collapsible sections for large schemas. > 💡 **Tip:** Use these options to improve readability and guide users through multi-step or grouped forms. | Option | Type | Applicable to | Description | | ----------------------- | ----------- | ---------------------- | ---------------------------------- | | `collapsable` | object | Categorization | Configuration for collapsable tabs | | `collapsable.collapsed` | boolean | Categorization | Initial collapsed state | | `collapsable.label` | string | Categorization | Toggle button label text | | `collapsable.i18n` | string | Categorization | i18n key for toggle label | | `showNavButtons` | boolean | Categorization stepper | Show Previous/Next buttons | | `variant` | `"stepper"` | Categorization | Render as stepper layout | ## Display control options These options apply to read-only display elements and controls rendered in non-editable contexts. They allow you to adjust label/value orientation (row or column), optionally include icons, toggle descriptions, and provide a style object for presentation tweaks. > 💡 **Tip:** These are useful for summaries, static information, and computed data outputs. | Option | Type | Applicable to | Description | | ----------------- | --------------------- | ---------------- | -------------------------------------------------------------------------- | | `direction` | `"row"` \| `"column"` | Display controls | Layout direction for label and value | | `icon` | string | Display controls | Icon name in Iconify format (`iconset:icon-name`) to display next to value | | `showDescription` | boolean | Display controls | Whether to show the field description | | `style` | object | Display controls | CSS properties to apply |