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.

Officialv1.0.0 Self-contained
Download .utpkg 14 KBInstall in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

How was your visit?

Value the form receives

4

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

A rating control for any form: customer satisfaction on a support request, a supplier score on a review, a quality grade on an inspection. Pick 2 to 10 stars, hearts or circles, give each value a label (Poor, Fair, Good, Very good, Excellent) and choose whether people can clear their rating.

It behaves like a native radio group: one Tab stop, the arrow keys change the rating, Home and End jump to the ends and Delete clears it. Screen readers announce each symbol as "4 of 5: Very good". The value is a whole number, so workflows can branch on it directly (a Condition on rating < 3 opens a follow-up).

Good for

  • Customer satisfaction at the end of a support request
  • Supplier or candidate scoring on a review step
  • Quality grade on an inspection checklist

After installing

  1. Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
  2. Drag Rating onto a form, then set the number of symbols, the symbol and the labels in the properties panel.

Reference

Value, properties and accessibility

Value

number

Stored as the field's value (type number), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show {{value}} of {{props.max}}.

Keyboard and screen readers

Role: radiogroup, named by the field label.

Tab to the rating; Left / Right (or Up / Down) change it; Home / End jump to the lowest / highest; Delete or Backspace clears it when clearing is allowed.

Properties (set in the form designer)
PropertyTypeDefaultWhat it does
Number of symbols maxnumber 2–105
Symbol symbolStars / Hearts / Circlesstar
Size sizeSmall (24 px) / Medium (32 px) / Large (40 px)medium
Labels labelslist—One label per value, lowest first (e.g. Poor, Fair, Good, Very good, Excellent). Shown next to the symbols and read by screen readers.
Allow clearing allow_clearbooleanyesClicking the selected symbol again, or pressing Delete, removes the rating.
Symbol colour colorcolor—Defaults to the form theme's primary colour.

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

  1. Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Rating. Or download form-control-rating-1.0.0.utpkg and drag it onto Automations → Packages.
  2. The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
  3. Drag the control onto a form in the designer and set its properties.

With the CLI

shell
curl -fLO https://usertasks.com/gallery/form-control-rating-1.0.0.utpkg
usertasks packages inspect form-control-rating-1.0.0.utpkg
usertasks packages install form-control-rating-1.0.0.utpkg

Verify the download

File SHA-256
4fcc05c6c75b3397e617dc17217967178d5fec74ea368f2c79bda189b9bb20e9
Package checksum (what is signed)
sha256:66a594b94bde1d0ebd3839a98ac2f529786804ca19a9ea4331fa24490c55712f
<ut-rating> module SHA-256
cca111b0cc39e14362996667c085206d92c4409365f2dc1c5d5b3f5387678a64
Signer
UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls