Rating
A 1-to-5 rating field with configurable icon styles including stars, hearts, and emojis.
The Rating field renders a row of five interactive icons that the user clicks to select a score from 1 to 5. Four icon styles are available: classic stars, hearts, emojis (mood faces from angry to laughing), and square stars. The rating count is fixed at 5.
For the shared properties available on all fields (label, help, note, key, width, visual styling, required), see the Form Fields Overview.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| shape | "star", "heart", "emoji", or "squareStar" | "star" | The icon style used for the rating scale |
| starsMax | number | 5 | Number of rating icons displayed (fixed at 5) |
Icon styles
- star -- Classic five-pointed stars in amber/yellow
- heart -- Heart icons in red
- emoji -- Mood-based face icons progressing from angry (red) to laughing (green)
- squareStar -- Square star icons in emerald
Validation
The Rating field extends InputFieldBase, so the required toggle is available. When required, the user must select a rating value before the form can be submitted.
Example Usage
A customer satisfaction survey with emoji faces:
{
"type": "rating",
"label": "How was your experience?",
"required": true,
"shape": "emoji",
"starsMax": 5
}