/build-gpui-apps

Rating

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

Import

use gpui_kit::component::rating::Rating;

Usage

Basic Rating

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

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

Different Sizes

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)

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)

Disabled State

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.

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.

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

API Reference

• Rating

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

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

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

Large Rating with Custom Color

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

Documentation license: original prose and illustrations for which GPUI Kit holds licensing rights are also offered under CC BY 4.0. When copying or adapting, credit GPUI Kit, link the source (https://gpui-kit.com/component/rating) and https://creativecommons.org/licenses/by/4.0/, and indicate changes. Code examples and software source use Apache-2.0; third-party material retains its terms; existing Apache-2.0 permissions remain.

Bundled from GPUI Kit. Documentation prose: CC BY 4.0; code examples: Apache-2.0. Changes: documentation links localized, asset URLs made absolute, and this attribution added.