Vista en vivo

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

const regions = [
  {value: 'north', label: 'América del Norte'},
  {value: 'latam', label: 'América Latina'},
  {value: 'emea', label: 'Europa, Oriente Medio y África'},
  {value: 'apac', label: 'Asia Pacífico'},
];

const schema: DyonaFormSchema = {
  title: 'Registro de cliente',
  hideSingleTab: true,
  tabs: [{
    id: 'customer',
    title: 'Cliente',
    rows: [
      {columns: [
        {name: 'name', label: 'Nombre completo', type: 'text', required: true, grid: {xs: 12, md: 6}, placeholder: 'Alex Morgan'},
        {name: 'email', label: 'Email laboral', type: 'email', required: true, grid: {xs: 12, md: 6}, placeholder: '[email protected]'},
      ]},
      {columns: [
        {name: 'region', label: 'Región', type: 'select', required: true, options: regions, grid: {xs: 12, md: 6}},
        {name: 'consent', label: 'Acepto ser contactado', type: 'checkbox', grid: {xs: 12, md: 6}},
      ]},
    ],
  }],
  actions: {submit: {label: 'Registrar cliente', icon: 'Save'}},
};

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