GPUI Component

Appearance

Rating ​

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

Import ​

rust
use gpui_component::rating::Rating;

Usage ​

Basic Rating ​

rust
Rating::new("my-rating")
    .value(3)
    .max(5)
    .on_click(|value, _, _| {
        println!("Rating changed to: {}", value);
    })

Controlled Rating ​

rust
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();
            }))
    }
}

Different Sizes ​

The Rating component supports the Sizable trait for different sizes.

rust
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)

Custom Color ​

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

rust
Rating::new("rating")
    .value(4)
    .max(5)
    .color(cx.theme().green)

Disabled State ​

rust
Rating::new("rating")
    .value(2)
    .max(5)
    .disabled(true)

Custom Maximum ​

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

rust
Rating::new("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.

rust
Rating::new("rating")
    .value(3)
    .max(5)
    .on_click(|new_value, _, _| {
        println!("New rating: {}", new_value);
    })

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

Examples ​

Read-only Display ​

rust
Rating::new("rating")
    .value(4)
    .max(5)
    .disabled(true)

Interactive Rating with State ​

rust
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))
    }
}

Large Rating with Custom Color ​

rust
Rating::new("rating")
    .large()
    .value(5)
    .max(5)
    .color(cx.theme().orange)