Skip to content

⭐  Read-only Star Rating Component

Submitted by Gabriel Vidal

Summary

A read-only Star rating component for Streamlit.

Functions

star_rating

Renders a read-only star rating component for Streamlit.

Parameters:

Name Type Description Default
rating float

A number in the range [0, 5] representing the rating to be displayed. It can include half values like 2.5, and will be rounded to the nearest half-integer.

 required
color str

The color of the stars. Defaults to gold ("#FFD700").

 '#FFD700'
Source code in src/streamlit_extras/star_rating/__init__.py 
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@extra
def star_rating(rating: float, color: str = "#FFD700") -> None:
    """
    Renders a read-only star rating component for Streamlit.

    Args:
        rating (float): A number in the range [0, 5] representing the rating to be displayed. It can include half values like 2.5, and will be rounded to the nearest half-integer.
        color (str, optional): The color of the stars. Defaults to gold ("#FFD700").
    """

    # Sanitize the rating to ensure it stays within [0, 5]
    assert 0.0 <= rating <= 5.0, "Rating must be in the range [0, 5]"

    # Calculate the number of full stars, half stars, and empty stars
    full_stars = int(rating)
    half_star = 1 if rating - full_stars >= 0.5 else 0
    empty_stars = 5 - full_stars - half_star

    def render_star(star_type: str = "full") -> str:
        star_color = color if star_type != "empty" else "lightgrey"
        base_style = (
            f"color:{star_color};font-size:24px;border-radius:5px;margin-right:2px;cursor:default;user-select:none;"
        )

        if star_type == "half":
            # Half star with overlay effect
            return f'<span style="color:lightgrey;font-size:24px;position:relative;user-select:none;">★<span style="position:absolute;left:0;width:12px;overflow:hidden;color:{color};user-select:none;">★</span></span>'
        return f'<span style="{base_style}">★</span>'

    # Create HTML content
    stars_html = (
        [render_star("full") for _ in range(full_stars)]
        + [render_star("half") for _ in range(half_star)]
        + [render_star("empty") for _ in range(empty_stars)]
    )

    html_content = "".join(stars_html)

    st.html(html_content, width="content")

Import:

from streamlit_extras.star_rating import star_rating # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example() -> None:
    st.text("10/10 would watching")
    star_rating(5)