Skins and languages

How a form looks is set per form, not per page: the same page can be a quiet business sheet in one place and a friendly survey in another.

Two skins

• underline — labels beside the values, inputs as a single underline, square corners. The look of a business record sheet, for screens people fill all day.
• outlined — labels above boxed inputs, rounded corners, a blue accent. Ant Design style, for surveys and sign-ups.

mountViewer(host, { page, dataSource, skin: 'outlined' });   // viewer.setSkin('underline') switches it live

A skin applies only inside its own form (.fd-form[data-fd-skin="…"]), so two forms with different skins can share a page, and Fieldia's styles never leak into yours.

Restyle with custom properties

Both skins are built from CSS custom properties on .fd-form. Override them to match your product:

.fd-form[data-fd-skin="outlined"] {
  --fd-accent: #0f766e;          /* buttons, focus, the chosen option */
  --fd-accent-soft: #ccfbf1;
  --fd-radius: 12px;             /* cards and sections */
  --fd-control-radius: 8px;      /* inputs and buttons */
  --fd-font: "Inter", system-ui, sans-serif;
}

The others: --fd-text, --fd-muted, --fd-page, --fd-surface, --fd-border, --fd-border-strong, --fd-focus, --fd-focus-ring, --fd-error, --fd-success, --fd-warning, --fd-info (each with a -soft partner), --fd-pad-x, --fd-pad-y, --fd-gap-x, --fd-gap-y, --fd-label-weight and --fd-label-width.

Four languages

Fieldia's own words — Save, Next, validation messages, “Step 2 of 3”, the upload and search prompts — come in English, Arabic, German and French:

mountViewer(host, { page, dataSource, locale: 'ar' });   // 'en' | 'ar' | 'de' | 'fr'

Arabic lays the whole form out right to left. Pass dir: 'rtl' or dir: 'ltr' to choose the direction yourself. Any word can be replaced with labels:

mountViewer(host, { page, dataSource, labels: { submit: 'Send my answers' } });

The page's own text — titles, labels, help, options — is the page author's. To offer a page in several languages, keep one page per language, or generate the page in the reader's language on your server.