Form controls
Ready-made controls for your forms.
13 official web components — charts, saved reports, address search, maps, signatures, ratings, tables and more. Install one and it appears in the form designer's Custom palette. Each runs in a sandboxed frame, follows your form theme in light and dark mode, works with a keyboard and a screen reader, and shows its value as text on completed tasks and on mobile.
14 controls and bundles
- Input
Form control
Address
<ut-address> <ut-map>
Address search with suggestions from Google Places (key kept on the server) or a data table, saved as street, city, postcode, country and coordinates.
LookupsNetwork Google Maps Platformvalue json · v1.0.0Try it - Display
Form control
Chart
<ut-chart>
Bar, line, area, pie or doughnut chart of static data, another field's rows, lookup results or a saved report, with keyboard-navigable points.
LookupsSaved reportsvalue json · v1.0.0Try it - Display
Form control
Info card
<ut-info-card>
Info, success, warning, error or neutral callout that can show up to six other form values, formatted for the reader, as text or a key / value list.
Self-containedvalue string · v1.0.0Try it - Input
Form control
Likert scale
<ut-likert>
Survey matrix that rates several statements on one agree, satisfaction, frequency or custom scale, with optional N/A. Cards on phones.
Self-containedvalue json · v1.0.0Try it - Input
Form control
Map
<ut-map>
Shows an address or coordinates from another field on an OpenStreetMap map, and can let people drop a pin to record a location.
Network OpenStreetMapvalue json · v1.0.0Try it - Display
Form control
PDF viewer
<ut-pdf-viewer>
Shows a PDF inside the form, from an Attachments field or an upload, page by page with zoom, rotation and the text read out to screen readers.
Filesvalue files · v1.0.0Try it - Display
Form control
Progress
<ut-progress>
Show progress as a bar, a ring or named steps from two fields of the form or fixed values, with warning and on-track colours.
Self-containedvalue number · v1.0.0Try it - Input
Form control
Rating
<ut-rating>
Star, heart or circle rating from 1 to 10 with optional labels such as Poor to Excellent, for satisfaction scores and quality checks.
Self-containedvalue number · v1.0.0Try it - Input
Form control
Rich text
<ut-rich-text>
A rich-text editor with bold, italic, underline, headings, lists, quotes and links, a character counter and strict sanitising of everything pasted in.
Self-containedvalue json · v1.0.0Try it - Display
Form control
Saved report
<ut-saved-report>
Show a saved report inside a form as a sortable, paginated table or chart, with the permissions of the person filling it in. Optionally pick a row.
Saved reportsvalue json · v1.0.0Try it - Input
Form control
Signature
<ut-signature>
Sign with a finger, pen or mouse, or type a name. The signature is saved as a trimmed PNG with the task's attachments.
Filesvalue files · v1.0.0Try it - Input
Form control
Slider
<ut-slider>
A range slider for numbers with a value bubble, mark labels such as Low, Medium and High, a unit or currency prefix and an optional exact-entry box.
Self-containedvalue number · v1.0.0Try it - Input
Form control
Table
<ut-table>
An editable table for line items, attendees or readings, with typed columns, per-cell validation, totals and spreadsheet-style keyboard editing.
Self-containedvalue array · v1.0.0Try it - Bundle · 13 controls
Form control
Form controls starter pack
<ut-chart> <ut-saved-report> <ut-address> <ut-map> <ut-signature> <ut-rating> <ut-slider> <ut-rich-text> <ut-table> <ut-likert> <ut-progress> <ut-info-card> <ut-pdf-viewer>
Every official form control in one package: chart, saved report, address search, map, signature, rating, slider, rich text, table, survey and more.
LookupsSaved reportsNetworkFiles Google Maps Platformvalue json / files / number / array / string · v1.0.0Try it
Security
Sandboxed by default, host services by permission
A control runs in an iframe with an opaque origin and a strict Content-Security-Policy: no cookies, no access to the page, no network. It talks to the form through a typed postMessage bridge that checks every message. Anything more is a capability the manifest declares and the host grants:
- Lookups lookup
- Suggestions come from the field's lookup source — a data table, or an API reference the UserTasks server calls with credentials stored on the server. The control only sees the suggestions.
- Saved reports reports
- Rows of the saved report the designer chose (the field's report_id, read by the server from the stored form), run as the person filling in the form: only reports they can open, with their permissions.
- Files files
- Uploads go through the Attachments pipeline (the same checks and storage). Reads are limited to files the form already gives the control: its own value, or an Attachments field the designer maps.
- Network network
- Fetches only from the hosts in its manifest, and only after an administrator approves them in Extensibility → Form controls. Until then the frame's CSP blocks every request. Map tiles come through the UserTasks server (public tile servers refuse the sandboxed frame's referrer-less requests), only once the tile host is approved.
Google Places: the address control never holds an API key. It asks the UserTasks server for suggestions; the server calls Places API (New) through an API reference whose key is stored encrypted in an integration. A key in the browser would be exposed — and a sandboxed frame sends no referrer, so referrer-restricted keys could not work there anyway.
Install
From the gallery to your form in a minute
Step 1
Install
In the app: Extensibility → Form controls → Browse gallery (or Automations → Packages → Browse gallery → Form controls). Or download the .utpkg here and import it.
Step 2
Set up
Most controls need nothing. The address control asks for a Google Places API key (stored on the server); the map needs an admin to approve its tile hosts.
Step 3
Use
Drag the control from the designer's Custom palette onto a form, set its properties and map its context fields. Its value flows into the workflow like any field.