Field types

Every field has a type — the key it's registered under. ReactFormSwitch ships these:

text · email · password · number · date · textarea · select · checkbox · radio · image

schema={{
  fields: [
    { name: 'name',     type: 'text',     label: 'Name' },
    { name: 'email',    type: 'email',    label: 'Email' },
    { name: 'password', type: 'password', label: 'Password' },
    { name: 'age',      type: 'number',   label: 'Age' },
    { name: 'dob',      type: 'date',     label: 'Date of birth' },
    { name: 'bio',      type: 'textarea', label: 'Bio' },
    { name: 'plan',     type: 'select',   label: 'Plan',
      options: [{ label: 'Free', value: 'free' }, { label: 'Pro', value: 'pro' }] },
    { name: 'terms',    type: 'checkbox', label: 'I agree' },
    { name: 'size',     type: 'radio',    label: 'Size',
      options: [{ label: 'S', value: 's' }, { label: 'M', value: 'm' }] },
  ],
}}

select and radio take an options array of { label, value }. Every field type also accepts label, placeholder, size, defaultValue, col, showIf, and validation (validation or rules) — see the API.

Need a type that isn't here — a rating, a color picker, a slider? Register it once with registerField and use it by name like any built-in.

Image upload

type: "image" gives you a drag-and-drop, click-to-browse, and paste field with thumbnail previews and per-file constraints, all from JSON:

{
  "name": "gallery",
  "type": "image",
  "label": "Photos",
  "accept": ["image/png", "image/jpeg"],
  "maxFiles": 4,
  "maxSizeMB": 2,
  "required": true
}

accept — allowed MIME types, e.g. ["image/png", "image/*"].
maxFiles — max number of files. Omit or set 1 for a single image.
maxSizeMB — max size per file, in megabytes.
required — require at least one file.

The field value is real File objects, so serialization does the right thing per payload:

Payload	Image becomes
`formdata`	native multipart file(s) — what servers expect for uploads
`json`	base64 data-URL string(s)
`xml`	base64 data-URL element(s)

Because files are read for json / xml, serialize() (and onSubmit) are async — await them. base64 inflates payloads ~33%; prefer formdata for real uploads.

Image upload

On this page