Basic form

The simplest Form case: two fields (name + email), Zod validation and the default submit button. Ideal as a starting template — just add more entries to fields to grow it.

clearable: true on each inputProps adds the clear button (×) to the input. Clicking it reverts the field to the empty state — the value is reset to an empty string in react-hook-form, keeping the field state consistent with the visual.

Demo

Code

import { Form } from '@apollion-dsi/core/form/form';
import { Input } from '@apollion-dsi/core/form/input';
import { z } from 'zod';
 
<Form
  handleSubmit={(values) => console.log(values)}
  fields={{
    name: {
      label: 'Name',
      component: Input,
      validation: z.string().min(1, 'Required'),
      inputProps: { placeholder: 'Type your name', clearable: true },
    },
    email: {
      label: 'E-mail',
      component: Input,
      validation: z.email('Not a valid email'),
      inputProps: {
        type: 'email',
        placeholder: 'your.email@apollion.com',
        clearable: true,
      },
    },
  }}
/>;

Basic form

Demo

Code

See also