Rating

Star-based rating component. Supports read-only display, interactive editing, half-star increments, and keyboard navigation.

Read-Only

Product

Service

Interactive

Rate this

Sizes

Small

Medium

Large

Custom Colour

Danger

Success

Click a star to rate...

// Read-only with half stars
<?= $m->rating('productRating')
    ->value(3.5)->max(5)
    ->halfStars()->readonly()
    ->label('Product') ?>

// Interactive
<?= $m->rating('myRating')
    ->value(0)->max(5)
    ->label('Rate this')
    ->onChange('handleRating') ?>

// Sizes
<?= $m->rating('sm')->value(3)->max(5)->sm() ?>
<?= $m->rating('lg')->value(3)->max(5)->lg() ?>

// Colour variant
<?= $m->rating('r')->value(2)->max(5)
    ->color('danger')->readonly() ?>

// Get rating instance  
var r = m.rating('myRating');

// Get/set value
var val = r.getValue();
r.setValue(4);

// Destroy
r.destroy();

// Listen for changes
document.getElementById('myRating')
    .addEventListener('m-rating-change', function(e) {
        console.log('New rating:', e.detail.value);
    });

// onChange callback (via PHP)
function handleRating(value, element) {
    console.log('Rated:', value);
}

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->rating($id)`	`string`	Create a rating component.
`->value($v)`	`float`	Initial rating value.
`->max($m)`	`int`	Number of stars (default: 5).
`->readonly($ro)`	`bool`	Make display-only (default: false).
`->halfStars($half)`	`bool`	Enable half-star rendering (default: false).
`->label($text)`	`string`	Label text beside the stars.
`->size($s)`	`string`	Size: `sm`, `md`, `lg`.
`->sm()`		Small size shorthand.
`->lg()`		Large size shorthand.
`->color($c)`	`string`	Colour: `primary`, `warning`, `danger`, `success`, `purple`.
`->onChange($callback)`	`string`	JS function name or expression called with `(value, element)`.

JS JS Methods

Method / Property	Parameters	Description
`m.rating(id, overrides)`	`string, ?object`	Get or create rating instance.
`getValue()`		Returns the current rating value.
`setValue(value)`	`number`	Set the rating value.
`destroy()`		Clean up event listeners.

EVENT Events

Event Name	Detail	Description
`m-rating-change`	`{value}`	Fired when the rating value changes (interactive mode).