Rating
Material Design 3-styled rating web component (lit-material-rating): a row of icons for reading or picking a value.
- 2.6 KB gzipped
- @lit-material/rating 0.0.3
- Renders on the server
Example
Rating
A row of icons for reading or picking a value — built on a native range input, with a hover preview.
Markup
<lit-material-rating label="Rate this product" precision="1"></lit-material-rating>
Half-star precision, with change tracking
Readonly display
Install
npm install @lit-material/rating @lit-material/tokensimport "@lit-material/rating";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-rating>
A row of icons for reading or picking a value — built on a real native
<input type="range"> for keyboard (arrows/Home/End/PageUp/PageDown),
pointer dragging, value clamping/stepping, and ARIA slider semantics,
styled invisibly on top of the custom-drawn icon row — the same pattern
lit-material-slider uses.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | 0 | |
max | max | number | 5 | |
precision | precision | 1 | 0.5 | 1 | The smallest step a user can pick: 1 (whole icons only) or 0.5 (half icons too). Doesn't constrain value itself — a readonly display can show any fraction. |
readonly | readonly | boolean | false | Non-interactive display of value — distinct from disabled: still perceivable/labeled, just not a control. |
disabled | disabled | boolean | false | |
name | name | string | "" | |
form | form | string | undefined | none | |
label | label | string | "Rating" | Accessible label — required in interactive mode (there's no visible text label), and prefixed onto the readonly role="img" announcement. |
Events
| Event | Description |
|---|---|
change | Bubbles once the value change is committed (matches native <input>). |
input | Bubbles live as the value changes while dragging/pressing a key (matches native <input>). |
CSS parts
| Part | Description |
|---|---|
rating | The container. |
icons | The row of icon elements. |
icon | A single icon's wrapper. |
input | The native <input type="range"> (interactive mode only). |