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
| 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 | 0 | 1 | 2 | 3 | 4 | 5 | No | Initial rating value. Must be one of 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). See Overriding the number of grid columns when using --df-custom-columns. |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
Note: This component does not support hint, note, or infoIcon properties, unlike most other interactive components.
| 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 |
{
"id": "serviceRating",
"type": "RATING",
"label": "How would you rate our service?",
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please provide a rating"
}
]
}{
"id": "satisfactionScore",
"type": "RATING",
"label": "Overall Satisfaction",
"startLabel": "Poor",
"endLabel": "Excellent",
"validators": [
{
"type": "REQUIRED"
}
]
}{
"id": "previousRating",
"type": "RATING",
"label": "Update Your Previous Rating",
"startLabel": "Unsatisfied",
"endLabel": "Very Satisfied",
"value": 4
}For complete API documentation, see DfRatingConfig.
For Aquila component documentation and design guidelines, see Rating - Aquila Design System.