Look & behavior (ui)
Configure everything visual from JSON — no raw CSS.
Everything visual is configured through schema.ui. Values are plain strings and enums
anyone can write; ReactFormSwitch maps them to --fs-* CSS variables internally. Nothing set
here needs a stylesheet.
{
"ui": {
"size": "md", // sm | md | lg (field padding + font)
"maxWidth": "520px",
"labelPosition": "top", // top | left
"errors": "toast", // inline | toast | popup
"button": {
"position": "full", // left | center | right | full
"color": "#7c3aed",
"textColor": "#ffffff"
},
"toast": {
"position": "top-center", // top/bottom + left/center/right
"duration": 4000,
"successMessage": "Saved!" // success toast after a valid submit
},
"theme": {
"primary": "#7c3aed", // accent: buttons, focus rings
"text": "#1a1a1a",
"mutedText": "#6b7280",
"background": "#ffffff",
"border": "#c4b5fd",
"error": "#dc2626",
"radius": "10px",
"borderWidth": "2px",
"gap": "1rem",
"fontSize": "1rem"
}
}
}Colors accept any CSS color ("#7c3aed", "rebeccapurple", "rgb(...)"); sizes accept
any CSS length ("10px", "1rem"). No stylesheet authoring — just values. Anything you
don't set falls back to the default theme.
errors
ui.errors picks how validation errors surface:
inline— under each field (the default).toast— a toast per error; position and TTL come fromui.toast.popup— a popup near the field.
Responsive
Column spans (col) map to a 12-column CSS grid driven by container queries —
mobile < 640px ≤ tablet < 1024px ≤ desktop. There are no JS media queries and no
separate mobile/desktop render paths; the grid reflows to the form's own width.
{ name: 'first', type: 'text', label: 'First', col: { mobile: 12, tablet: 6, desktop: 4 } }A bare number applies to every breakpoint: col: 6 is half-width everywhere.
Prefer real CSS? Every ui.theme value maps to a --fs-* variable you can override in
your own stylesheet instead — see Theming.