Tailwind Rating

Docs

Tailwind Rating

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.

Examples

Basic Usage

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.

Readonly

Display a fixed rating (e.g. 3 of 5 stars) with data-kt-rating-readonly="true" and data-kt-rating-value="3".

Custom Symbol

Use data-kt-rating-symbol="heart" to show hearts instead of stars.

Component API

Options

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`

Selectors

Name	Description
Data Attributes
`data-kt-rating`	Used to auto-initialize KTRating on the element.

Methods

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());

Utilities

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);

Events

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);
});

TypeScript

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

PreviouseRadio Group NextReparent

On This Page

Examples
Component API
TypeScript