Rating Component

1. Overview
2. Key Features
3. Configuration Properties
- Base Properties
- Component Specific Properties
4. Configuration Examples
5. API Reference

1. Overview

The RATING component provides a star rating or numeric rating interface for collecting user ratings or feedback.

🛝 Use the Dynamic Form Playground to see the Rating component in action and try out different configurations

2. Key Features

Star-based rating selection (1 to 5 stars)
Optional start and end labels for context
Default value support
Translation and string interpolation support
Form validation support

3. Configuration Properties

Base Properties

Property	Type	Required	Description
`type`	`'RATING'`	Yes	Specifies the field type as RATING.
`id`	`string`	Yes	Unique identifier for the field. The field's value is stored in the form state under this key.
`renderName`	`string`	No	Optional name added as `data-render-name` attribute to locate the rendered element in the DOM.
`label`	`string`	Yes	Label text displayed for the rating field. Supports translation and string interpolation.
`value`	`number`	No	Initial rating value: `0`, `1`, `2`, `3`, `4`, or `5`. Default: 0.
`validators`	`array`	No	Validation rules for the field. Common type: `REQUIRED`. The validator has `type` and optional `errorMessage`.
`testId`	`string`	No	Test identifier for automated testing. Set as `data-testid` attribute.
`acl`	`array`	No	Access control rules for field visibility/editability. Each rule has `state` (`'hidden'`, `'readonly'`, `'disabled'`, `'visible'`, `'editable'`) and optional `condition` (Filtrex expression).
`columnSpan`	`number`	No	Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width).
`spacing`	`string`	No	Margin spacing before next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Note: This component does not support hint, note, or infoIcon properties, unlike most other interactive components.

Component Specific Properties

Property	Type	Required	Description
`endLabel`	`string`	No	Option to set the label painted at the end of the rating component. Defaults to empty
`startLabel`	`string`	No	Option to set the label painted at the start of the rating component. Defaults to empty

4. Configuration Examples

Basic 5-Star Rating

{
  "id": "serviceRating",
  "type": "RATING",
  "label": "How would you rate our service?",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Please provide a rating"
    }
  ]
}

Rating with Start and End Labels

{
  "id": "satisfactionScore",
  "type": "RATING",
  "label": "Overall Satisfaction",
  "startLabel": "Poor",
  "endLabel": "Excellent",
  "validators": [
    {
      "type": "REQUIRED"
    }
  ]
}

Rating with Pre-populated Value

{
  "id": "previousRating",
  "type": "RATING",
  "label": "Update Your Previous Rating",
  "startLabel": "Unsatisfied",
  "endLabel": "Very Satisfied",
  "value": 4
}

5. API Reference

For complete API documentation, see DfRatingConfig.

For Aquila component documentation and design guidelines, see Rating - Aquila Design System.