Prévia ao vivo

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

const regions = [
  {value: 'north', label: 'América do Norte'},
  {value: 'latam', label: 'América Latina'},
  {value: 'emea', label: 'Europa, Oriente Médio e África'},
  {value: 'apac', label: 'Ásia-Pacífico'},
];

const schema: DyonaFormSchema = {
  title: 'Cadastro de cliente',
  hideSingleTab: true,
  tabs: [{
    id: 'customer',
    title: 'Cliente',
    rows: [
      {columns: [
        {name: 'name', label: 'Nome completo', type: 'text', required: true, grid: {xs: 12, md: 6}, placeholder: 'Alex Morgan'},
        {name: 'email', label: 'E-mail profissional', type: 'email', required: true, grid: {xs: 12, md: 6}, placeholder: '[email protected]'},
      ]},
      {columns: [
        {name: 'region', label: 'Região', type: 'select', required: true, options: regions, grid: {xs: 12, md: 6}},
        {name: 'consent', label: 'Aceito ser contatado', type: 'checkbox', grid: {xs: 12, md: 6}},
      ]},
    ],
  }],
  actions: {submit: {label: 'Cadastrar cliente', icon: 'Save'}},
};

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