Rating

A star rating component that allows users to select a rating value. Supports different sizes, custom colors, disabled state, and click handlers.

Install

#Import

use gpui_kit::component::rating::Rating;
// Installed in ui/components. That directory is on the Slint include path, so import by file name:
import { Rating } from "rating.slint";
use iced::widget::{column, container, mouse_area, row, scrollable, svg, text};
use iced::{Alignment, Element, Length, Task, Theme};

#Usage

#Rate this

Rating::new("my-rating")
    .value(3)
    .max(5)
    .on_click(|value, _, _| {
        println!("Rating changed to: {}", value);
    })
Rating {
    value <=> root.stars;
}
Text {
    text: "\{root.stars} of 5";
    color: Theme.muted-foreground;
}
// The value is the owner's; a press comes back as the value it asked for.
// The hover is the same round trip: `on_hover` reports the star, `hovered`
// takes it back, and the stars up to it preview in the active colour.
let rate_this = column![
    Rating::new(app.rating)
        .hovered(app.hovered)
        .on_change(Message::Rate)
        .on_hover(Message::Hover),
    text(format!("{} of 5", app.rating))
        .size(theme::FONT_SIZE_SM)
        .style(|theme: &Theme| text::Style {
            color: Some(Tokens::of(theme).muted_foreground),
        }),
]
.spacing(8.0);

#Controlled Rating

struct MyView {
    rating: usize,
}

impl Render for MyView {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        Rating::new("rating")
            .value(self.rating)
            .max(5)
            .on_click(cx.listener(|view, value: &usize, _, cx| {
                view.rating = *value;
                cx.notify();
            }))
    }
}
SlintNo Slint version of this example yet.

#Different Sizes

GPUINo GPUI version of this example yet.
SlintNo Slint version of this example yet.
// A row with no message is read-only: the stars draw, nothing is reported.
let sizes = column![
    Rating::new(3).size(ControlSize::Small),
    Rating::new(3),
    Rating::new(4).size(ControlSize::Large),
]
.spacing(8.0);

The Rating component supports the Sizable trait for different sizes.

Rating::new("rating").xsmall().value(3).max(5)
Rating::new("rating").small().value(3).max(5)
Rating::new("rating").value(3).max(5) // default (Medium)
Rating::new("rating").large().value(3).max(5)
Rating {
    value: 3;
    size: ControlSize.small;
}
Rating {
    value: 3;
}
Rating {
    value: 4;
    size: ControlSize.large;
}

#Custom Color

By default, the rating uses the theme’s yellow color. You can customize it with the color method.

Rating::new("rating")
    .value(4)
    .max(5)
    .color(cx.theme().green)
SlintNo Slint version of this example yet.

#Disabled State

Rating::new("rating")
    .value(2)
    .max(5)
    .disabled(true)
Rating {
    value: 2;
    read-only: true;
}
let disabled = Rating::new(2);

#Custom Maximum

GPUINo GPUI version of this example yet.
SlintNo Slint version of this example yet.
let custom_max = Rating::new(7).max(10);

The default maximum is 5 stars, but you can set a different maximum value.

Rating::new("rating")
    .value(7)
    .max(10)
Rating {
    value: 7;
    max: 10;
}

#Click Behavior

The rating component has special click behavior:

  • Clicking on a star that’s already filled will reduce the rating by 1
  • Clicking on an unfilled star will set the rating to that star’s value

The on_click callback receives the new rating value as &usize.

Rating::new("rating")
    .value(3)
    .max(5)
    .on_click(|new_value, _, _| {
        println!("New rating: {}", new_value);
    })
SlintNo Slint version of this example yet.

#Read-only Display

Rating::new("rating")
    .value(4)
    .max(5)
    .disabled(true)
SlintNo Slint version of this example yet.

#Interactive Rating with State

struct ProductView {
    user_rating: usize,
}

impl Render for ProductView {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        v_flex()
            .gap_3()
            .child(
                Rating::new("product-rating")
                    .value(self.user_rating)
                    .max(5)
                    .on_click(cx.listener(|view, value: &usize, _, cx| {
                        view.user_rating = *value;
                        // Save rating to backend, etc.
                        cx.notify();
                    }))
            )
            .child(format!("Your rating: {}/5", self.user_rating))
    }
}
SlintNo Slint version of this example yet.

#Large Rating with Custom Color

Rating::new("rating")
    .large()
    .value(5)
    .max(5)
    .color(cx.theme().orange)
SlintNo Slint version of this example yet.

#API Reference

#Methods

  • new(id: impl Into<ElementId>) - Create a new Rating component
  • with_size(size: impl Into<Size>) - Set the star size (implements Sizable)
  • value(value: usize) - Set the initial rating value (0..=max)
  • max(max: usize) - Set the maximum number of stars (default: 5)
  • color(color: impl Into<Hsla>) - Set the active color (default: theme yellow)
  • disabled(disabled: bool) - Disable interaction (implements Disableable)
  • on_click(handler: Fn(&usize, &mut Window, &mut App)) - Set click handler

#Rating

A star rating. Mirrors GPUI Component's `Rating`.

NameKindTypeDefault
valuein-outint0
maxinint5
read-onlyinbool
sizeinControlSizeControlSize.medium
changedcallback(value: int)

See this component in other frameworks

Previous and next component