StellarUI

<stellar-rating>

Properties

Preview

Markup

Copy

<stellar-rating
  tone="primary"
  label="Satisfaction"
  description="How was your experience?"
  value="3.5"
  step="0.5"
  name="satisfaction"
>
</stellar-rating>

API

Complete props, events, slots, and implementation notes for the shipped rating.

Props

Prop	Type	Default	Notes
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`	Controls the active symbol color and committed-value indicator.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	Scales the symbol row.
`label`	`string`	`''`	Fallback text for the `label` slot above the control.
`description`	`string`	`''`	Fallback text for the `description` slot below the control.
`icon`	`string`	`mdi:heart`	When present, renders a built-in `stellar-icon` for each symbol.
`name`	`string`	`''`	Mirrors into an internal hidden input so the current value can submit with a form.
`value`	`number`	`0`	The current rating value.
`max`	`number`	`5`	Sets the number of rating symbols.
`step`	`number`	`1`	Controls rating granularity. Use `0.5` for half ratings.
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction.
`readonly`	`boolean`	`false`	Shows the current rating without allowing edits.

Events

Event	Source	Notes
`input`	host	Fires while the user changes the rating with pointer or keyboard interaction.
`change`	host	Fires when the user commits a new rating value.

Slots

Slot	Notes
`label`	Optional content above the control. Overrides the `label` prop when present.
`description`	Optional helper content below the control. Overrides the `description` prop when present.
`icon`	Optional symbol template. The component clones it for each active and inactive symbol.

Notes

The public tag is `stellar-rating`, shipped as one standalone control instead of a authored radio wrapper.
`step` controls fractional ratings, so `step="0.5"` gives half ratings without a second public half API.
`tone` follows the rest of the StellarUI field family and drives both the active symbols and the committed-value indicator while previewing.
`icon` follows the same prop-first pattern as the rest of StellarUI, while the named `icon` slot remains available for custom symbol markup.
A mirrored hidden input keeps `name` and `value` usable in normal form submission without turning the component into a form-associated custom element yet.