Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Rating

A star-based control for selecting a numeric rating.

When To Use It

Use Rating when users should choose a discrete score within a bounded range, such as product ratings, feedback quality, or priority scales.

Constructing a Rating

use vizia::prelude::*;

let rating = Signal::new(3u32);

Rating::new(cx, 5, rating)
	.on_change(|cx, value| cx.emit(AppEvent::SetRating(value)));

Rating Modifiers

ModifierTypeDescriptionDefault
on_changeFn(&mut EventContext, u32)Called when rating is emitted/changed.-

Components and Styling

SelectorDescription
ratingRoot rating group element.
rating svgIndividual star items.
rating svg:checkedFilled/active stars at or below selected value.

Accessibility

  • Uses role RadioGroup for the container and RadioButton roles for stars.
  • Supports keyboard adjustment:
KeyAction
ArrowRightIncrement rating
ArrowLeftDecrement rating

Ensure surrounding text clarifies rating scale meaning (for example 1 to 5 stars).