Form input reference

Form controls are the inputs of a form (or the filter inputs of a search). Each input is an object with a name (the payload key) and a type. The browser marks required fields, but the API's request contract enforces validation; its errors appear under each field.

Input types

`type`	Behaviour
`text`	A single line of text.
`email`	An email address; validated by the API when its field type is `email`.
`password`	Masked text. Use `autocomplete: "current-password"` or `"new-password"`.
`number`	A number; sent as a number (or `null` when empty). Takes `min`, `max`, `step`.
`tel`	A phone number.
`url`	A web address.
`textarea`	Multi-line text.
`select`	A drop-down. `options` are strings or `{label, value}`; `optionsFrom` reads them from a database table.
`checkbox`	Sent as `true` / `false`. `value: true` starts it checked.
`radio`	One of `options`; sent as the checked value. Options with `image` and `description` render as clickable cards.
`date`	A date picker; takes `min` and `max`.
`file`	A file upload: the form is sent as multipart and must post to a `storage.upload` API.
`image`	An Upload image button: the file goes to the `upload` API at once and the form sends the returned URL.
`hidden`	A value the visitor does not see, such as a record id.
`location`	A button that reads the device position and sends `{lat, lng, accuracy}`.
`widget`	A custom control from a `.widget.iwc` (`use`, `props`), e.g. the rich-text editor.

Input properties

Property	Type	Description
`accept`	`string`
`autocomplete`	`string`
`className`	`string`	CSS classes on the control itself (input, select or textarea)
`hint`	`string`	a short help line shown under the field (read by screen readers with it); may be an expression
`label`	`string`
`max`	`number`
`min`	`number`
`name`	`string`	identifiers use letters, digits and '_' and do not start with a digit
`options`	`array of stringobject`
`optionsFrom`	`object`	select/radio: options from data, after any static options `description`: `string` — radio: the field shown under each option `filter`: `object {name: string \| number \| boolean \| null \| object}` `image`: `string` — radio: the field holding each option's picture (the options become cards) `label`: `string` — the field shown `limit`: `integer (1–500)` `sort`: `object` `source`: `string` — DATABASE.<name>, API.<name> or an expression `value`: `string` — the field sent (default id)
`placeholder`	`string`
`props`	`object {name: any}`	widget inputs: the widget's props
`required`	`boolean`
`step`	`string`	number inputs: the increment; 0.01 (or any) accepts amounts with decimals
`type`	`"text""email""password""number""tel""url""textarea""select""checkbox""radio""date""file""image""hidden""location""widget"`	location: a button that reads the device position and sends {lat, lng, accuracy}; image: an upload button that stores the picked picture through the "upload" api and sends its url; widget: a custom control (use) whose value is sent
`upload`	`string`	image inputs: the storage.upload api the picked file is sent to
`use`	`string`	widget inputs: the widget file
`value`	`any`

Example

A booking form

{
  "type": "form",
  "inputs": [
    {
      "name": "name",
      "type": "text",
      "label": "Full name",
      "required": true,
      "autocomplete": "name"
    },
    { "name": "email", "type": "email", "label": "Email", "required": true },
    {
      "name": "guests",
      "type": "number",
      "label": "Guests",
      "min": 1,
      "max": 8,
      "value": 2
    },
    { "name": "date", "type": "date", "label": "Date" },
    {
      "name": "time",
      "type": "select",
      "label": "Time",
      "options": ["18:00", "19:30", "21:00"]
    },
    {
      "name": "seating",
      "type": "radio",
      "label": "Seating",
      "options": [
        { "label": "Indoors", "value": "in" },
        { "label": "Terrace", "value": "out" }
      ]
    },
    {
      "name": "notes",
      "type": "textarea",
      "label": "Notes",
      "hint": "Allergies, occasions…"
    },
    {
      "name": "terms",
      "type": "checkbox",
      "label": "I accept the booking terms",
      "required": true
    }
  ],
  "submit": {
    "api": "booking.api.iwc",
    "label": "Book a table",
    "success": { "message": "Booked — see you soon.", "reset": true }
  }
}

The API this form posts to declares the same fields in request.payload with their rules (required, min, maxLength, enum…). See forms & validation and the Build a form tutorial.