The Rating component displays and collects numeric ratings (e.g. 1–5 stars) with optional custom symbols. Use it for reviews, feedback forms, and satisfaction displays in readonly or interactive mode.
Use data-kt-rating to render an interactive star rating. The selected value is available for form submission and via the kt.rating.change event.
Display a fixed rating (e.g. 3 of 5 stars) with data-kt-rating-readonly="true" and data-kt-rating-value="3".
Use data-kt-rating-symbol="heart" to show hearts instead of stars.
These data attributes configure the rating component during auto-initialization.
| Name | Type | Default | Description |
|---|---|---|---|
data-kt-rating-value | number | 0 | Current rating (1 to max). Use 0 or omit for no selection. |
data-kt-rating-max |
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-rating | Used to auto-initialize KTRating on the element. |
| Method | Description |
|---|---|
new KTRating(element, options) | Creates a KTRating instance for the given DOM element and optional config options. |
getValue() | Returns the current rating (number or null if none). |
setValue(value) | Sets the current rating (1–max or ). In interactive mode, updates the checked radio and display. |
const el = document.querySelector('[data-kt-rating]');
const rating = KTRating.getInstance(el);
rating.setValue(4);
console.log(rating.getValue());| Method | Description |
|---|---|
KTRating.init() | Initializes all elements with data-kt-rating (except those with data-kt-rating-lazy="true"). |
KTRating.createInstances() | Creates instances for dynamically added elements. |
KTRating.getInstance(element) | Returns the KTRating instance for the element, or . |
KTRating.init();
const el = document.querySelector('[data-kt-rating]');
const rating = KTRating.getInstance(el);| Event | Description |
|---|---|
kt.rating.change | Fired when the user selects a value in interactive mode. event.detail.payload.value is the selected number. |
const el = document.querySelector('[data-kt-rating]');
const rating = KTRating.getInstance(el);
el.addEventListener('kt.rating.change', (e) => {
console.log('Rating:', e.detail.payload.value);
});Import the component and types from @keenthemes/ktui for typed options and instance:
import {
KTRating,
type KTRatingConfigInterface,
type KTRatingInterface,
} from '@keenthemes/ktui';
const el = document.querySelector<HTMLElement>('[data-kt-rating]');
if (!el) return;
const rating: KTRatingInterface | null = KTRating.getInstance(el);
if (rating) {
rating.setValue(4);
console.log(rating.getValue());
}
// Or create with typed config
const options: KTRatingConfigInterface
number5 |
| Maximum rating (number of symbols). |
data-kt-rating-readonly | boolean | false | If true, only display the rating; no user input. |
data-kt-rating-name | string | "rating" | Form field name for interactive mode (form submission). |
data-kt-rating-symbol | "star" | "heart" | "star" | Symbol to display. |
data-kt-rating-lazy | boolean | false | If true, do not auto-initialize; call KTRating.getInstance(element) or create with new KTRating(element) to init. |
nullgetOption(name) | Returns the value of option name from the instance. |
getElement() | Returns the DOM element for this instance. |
on(eventName, handler) | Attaches an event listener; returns an id for off. |
off(eventName, eventId) | Removes the listener. |
dispose() | Removes the instance and cleans up listeners. |
null