Field types
13 built in. Anything else is a plugin you register yourself.
| type | Answer value | defaultProps |
|---|---|---|
text | string | placeholder, autoComplete |
email | string | placeholder, autoComplete. Also checks the email format. |
number | number | placeholder |
select | string | placeholder, options |
date | string (YYYY-MM-DD) | none |
time | string (HH:MM) | none |
checkbox | boolean | none. When required, it must be ticked. |
radio | string | options |
textarea | string | placeholder, rows (default 4) |
url | string | placeholder. Also checks it is a valid http(s) URL. |
rating | number | max (default 5) — the number of stars |
country | string (ISO 3166-1 alpha-2) | placeholder, options (a real country list ships by default) |
currency | string (ISO 4217 code) | placeholder, options (a curated currency list ships by default) |
Options
select, radio, country and currency all read defaultProps.options. country and currency ship with a sensible default list already, but setting your own options on the field replaces it entirely. Use plain strings, or objects when the stored value should differ from the label:
["Free", "Pro"]
[{ "label": "United States", "value": "us" }]
Pre-filling
Set defaultProps.defaultValue on a field to give it an initial answer, or pass defaultValues to FormRenderer (for example to show a saved response).
Unknown types
If a definition uses a type nobody registered, that field renders a clear "Unsupported field type" message and the rest of the form keeps working.
Why select is a native element
The select field uses the browser's own dropdown. It is fully accessible, works well on phones and needs no extra code. Checkbox and radio use Radix primitives.