Tabs

Try it live

Want to see a real multi-tab DYONA Form?

Open Tabs in the Lab →

A DyonaForm can divide one business interface into multiple tabs:

DyonaFormSchema
    ↓
tabs[]
    ↓
rows[]
    ↓
columns / fields

Tabs are not independent forms. Every field belongs to the same DyonaForm, which maintains one values collection. Switching tabs does not discard entered values, and the same onSubmit receives all values together. Each tab can contain its own rows and fields.

DyonaFormTab

type DyonaFormTab = {
  id: string;
  title: string;
  helpUrl?: string;
  rows: DyonaFormRow[];
};

• id is the non-empty technical identifier and must be unique within the schema.
• title is the visible tab text.
• rows contains the rows in that form section.
• helpUrl is optional. When the active tab has one, DYONA Form shows a compact help icon to the right of the tabs. The icon changes with the active tab and opens that tab's URL in a new browser tab.

Customer editor

import {
  DyonaForm,
  type DyonaFormSchema,
  type DyonaFormValues,
} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Customer editor',
  tabs: [
    {id: 'general', title: 'General information', rows: [{columns: [
      {name: 'fullName', label: 'Full name', type: 'text', required: true, grid: {xs: 12, md: 6}},
      {name: 'workEmail', label: 'Work email', type: 'email', required: true, grid: {xs: 12, md: 6}},
    ]}]},
    {id: 'commercial', title: 'Commercial information', rows: [{columns: [
      {name: 'customerType', label: 'Customer type', type: 'select', required: true, options: [{value: 'prospect', label: 'Prospect'}, {value: 'customer', label: 'Customer'}], grid: {xs: 12, md: 6}},
      {name: 'creditLimit', label: 'Credit limit', type: 'number', required: true, grid: {xs: 12, md: 6}},
    ]}]},
  ],
  actions: {submit: {label: 'Save customer', icon: 'Save'}},
};

export function CustomerEditor() {
  const handleSubmit = (values: DyonaFormValues) => console.log(values);
  return <DyonaForm schema={schema} onSubmit={handleSubmit} />;
}

One form, one values object

After entering General information and then Commercial information, the submitted values are still one object, not one object per tab:

{
  fullName: 'Alex Morgan',
  workEmail: '[email protected]',
  customerType: 'customer',
  creditLimit: 50000,
}

Errors by tab

Errors remain associated with their fields and tabs. A tab indicates its error count; when saving an invalid form, DYONA Form can open the tab containing the first error and focus its first invalid field. The global error summary still represents the complete form. Submit the empty form in the Tabs Lab example to try it.

hideSingleTab

hideSingleTab?: boolean only controls the visual tab bar:

Tabs	hideSingleTab	Result
1	undefined or false	The tab is visible.
1	true	The visual tab bar is hidden.
2 or more	true	The tabs remain visible.

It never removes a tab's content.

const schema: DyonaFormSchema = {
  title: 'Quick editor',
  hideSingleTab: true,
  tabs: [{
    id: 'main', title: 'General',
    rows: [{columns: [{name: 'name', label: 'Name', type: 'text'}]}],
  }],
};

helpUrl

helpUrl belongs to a tab. DYONA Form displays its compact help icon to the right of the tabs only when the active tab has a URL; it changes as the active tab changes and opens the URL in a new browser tab:

{
  id: 'commercial',
  title: 'Commercial information',
  helpUrl: 'https://example.com/customer-credit-policy',
  rows: [/* rows for this tab */],
}

Next steps

• Validation
• Conditions