Live Preview

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

const regions = [
  {value: 'north', label: 'North America'},
  {value: 'latam', label: 'Latin America'},
  {value: 'emea', label: 'Europe, Middle East & Africa'},
  {value: 'apac', label: 'Asia Pacific'},
];

const schema: DyonaFormSchema = {
  title: 'Customer registration',
  hideSingleTab: true,
  tabs: [{
    id: 'customer',
    title: 'Customer',
    rows: [
      {columns: [
        {name: 'name', label: 'Full name', type: 'text', required: true, grid: {xs: 12, md: 6}, placeholder: 'Alex Morgan'},
        {name: 'email', label: 'Work email', type: 'email', required: true, grid: {xs: 12, md: 6}, placeholder: '[email protected]'},
      ]},
      {columns: [
        {name: 'region', label: 'Region', type: 'select', required: true, options: regions, grid: {xs: 12, md: 6}},
        {name: 'consent', label: 'I agree to be contacted', type: 'checkbox', grid: {xs: 12, md: 6}},
      ]},
    ],
  }],
  actions: {submit: {label: 'Register customer', icon: 'Save'}},
};

export function Example() {
  return (
    <DyonaForm
      schema={schema}
    />
  );
}