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 (which explains when to use each UI element) and the advanced docs (which shows 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