Skip to main content

Rating

Star-based rating input with support for sizes, read-only display, and clearable selection.

Quick start 
import { Rating } from "mates-ui";

Rating({ value: 3, max: 5, onChange: v => console.log(v) });

Interactive states

import { html, atom, renderApp } from 'mates';
import { Rating } from 'mates-ui';

const App = () => {
const ratingA = atom(0);
const ratingB = atom(2);

return () => html`<x-col gap="16px">
${Rating({ value: ratingA(), min: 0, max: 5, clearable: true, onChange: v => ratingA.set(v) })}
${Rating({ value: ratingB(), min: 0, max: 5, showValue: true, onChange: v => ratingB.set(v) })}
${Rating({ value: 4, max: 5, readOnly: true, showValue: true })}
${Rating({ value: 3, max: 5, disabled: true })}
</x-col>`;
};

renderApp(App, document.getElementById('app'));

Rating

import { Rating } from "mates-ui";
Prop Type Default Description
ariaLabel string — Overrides the auto-generated accessible label.
atom AtomType<number> — Reactive atom binding. Reads and writes the rating value. Supersedes value.
attr AttrMap — HTML attributes on the root element.
classes string — Extra CSS class name(s) appended to the root element.
classes string | string[] — Extra root classes — joined and appended. Joined and appended after built-in classes.
clearable boolean false When min is 0, clicking the currently selected star resets the value to min.
data DataAttrMap — Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
disabled boolean false Disables all interaction and applies a muted style.
id string — Sets id on the root element.
max number 5 Maximum number of stars.
min number 0 Minimum selectable value.
name string — Renders a hidden input with this name for native form posts.
on OnEventMap — DOM event handlers on the root element.
onChange (value: number) => void — Called with the new value whenever the user picks a star.
onClick (e: MouseEvent) => void — Shorthand for `on.click` (`on.click` wins when both are set).
readOnly boolean false Renders a non-interactive display; stars become spans.
showValue boolean false Displays the numeric value next to the stars.
size "sm" | "md" | "lg" "md" Controls the visual size of the stars.
style StyleMap — Root inline CSS (`style` prop; `style` wins if both set).
style StyleMap — Inline CSS on the root element.
testId string "md-rating" Overrides data-testid on the root element.
value number 0 Current rating value; clamped to [min, max].
valuePrecision number 1 Decimal places used when rendering the numeric value label.

CSS tokens

Token Role
--md-color-text-muted Default empty star fallback / value label
--md-color-warning Default filled star fallback
--md-duration-short Star hover scale transition duration
--md-easing-spring Star hover scale transition easing
--md-focus-ring-color Focus ring outline color
--md-focus-ring-width Focus ring outline width
--md-font-family Value label typeface
--md-radius-sm Interactive root focus ring border-radius
--md-radius-xs Star button border-radius
--md-rating-star-empty Empty star color (defaults to text-muted)
--md-rating-star-fill Filled star color (defaults to warning color)
--md-space-2 Gap between stars container and value label
--md-state-disabled-opacity Disabled star opacity
--md-text-base Value label font size — lg
--md-text-sm Value label font size — md (default)
--md-weight-medium Value label font weight