Quick start

Pass a schema and an onSubmit. The schema's fields array is the form; each field has a name (the value key), a type (a field type), and optional label, col, and validation.

import { FormSwitch } from 'reactformswitch'
import 'reactformswitch/styles.css'
import { z } from 'zod'

export default function Example() {
  return (
    <FormSwitch
      theme="light"
      schema={{
        payload: 'json', // 'json' | 'formdata' | 'xml' | custom
        fields: [
          { name: 'name',  type: 'text',  label: 'Name',
            col: { mobile: 12, desktop: 6 }, validation: z.string().min(1) },
          { name: 'email', type: 'email', label: 'Email',
            col: { mobile: 12, desktop: 6 }, validation: z.string().email() },
          { name: 'subscribe', type: 'checkbox', label: 'Subscribe' },
          { name: 'topic', type: 'text', label: 'Topic',
            showIf: (v) => v.subscribe === true }, // conditional
        ],
      }}
      onSubmit={(payload, values) => console.log(payload, values)}
    />
  )
}

What each piece does

payload — how onSubmit's first argument is serialized: json, formdata, xml, or a custom serializer. Defaults to json.
col — a 12-column span, either a number (all breakpoints) or per-breakpoint (mobile / tablet / desktop). See Responsive.
validation — a Zod validator for the field. Prefer JSON rules when you don't want to import Zod for a field.
showIf — render and validate the field only when the predicate over current values holds.

onSubmit

onSubmit(payload, values) receives the serialized payload and the raw values object. It may be async — return a promise and the submit button shows a loader while it's pending.

If any field is an image and the payload is json or xml, files are read as base64, so onSubmit is async — await it.

Next: the full list of field types.

What each piece does

onSubmit

On this page