Rate
wje-rate is used for both entering and displaying ratings. The component supports whole and fractional steps, readonly mode, disabled state, and custom icons.
Basic usage
The simplest scenario is an interactive rating with the default star icon and a maximum defined by max.
Initial value
The value attribute sets the initial or current rating. It is useful for editing an existing review and for read-only presentation.
Rating precision
If you need halves or smaller steps, use the precision attribute. Hover and click behavior is then rounded according to that precision.
Read-only mode
With readonly, the value stays visible but users can no longer change it. This is useful for showing previously stored ratings.
Disabled state
The disabled state blocks both interaction and hover feedback. Use it when rating is temporarily unavailable or gated by another condition.
When to use
Use wje-rate when users evaluate quality, satisfaction, or preference on a small scale.
When not to use
Do not use it when users need precise numeric input or when the meaning of the scale is ambiguous.
Accessibility
For important decisions, pair the rating with clear text so users understand both the scale and the current value. Readonly and disabled states should be understandable even without hover feedback.
Best Practices
- Keep the scale meaning consistent, such as 1 to 5, across the whole product.
- If you use custom icons through
icons, preserve the same visual logic for filled and unfilled states. - When showing a stored rating, prefer readonly over disabled if the main goal is readability rather than blocking action.
Attributes and Properties
disabled
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
icons
| Description | Overrides the icon names rendered for each rating step. |
| Attribute | icons |
| Type | Array<string> |
| Default | [star] |
max
| Description | Sets the maximum number of rating steps rendered by the component. |
| Attribute | max |
| Type | number |
| Default | - |
precision
| Description | Sets the step size used when selecting fractional rating values. |
| Attribute | precision |
| Type | number |
| Default | 1 |
readonly
| Description | Prevents the value from being edited by the user. |
| Attribute | readonly |
| Type | boolean |
| Default | - |
value
| Description | Sets the current rating value. |
| Attribute | value |
| Type | number |
| Default | 0 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the rating component. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-rate-gap | Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., px, rem, em) to adjust the distance between rating elements. |
--wje-rate-color | Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables. |
--wje-rate-selected-color | Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value. |
Slots
No slots available for this component.