Rating

Input component for collecting user ratings using visual symbols

Basic

Basic Rating

Preview Code Auto

Div(
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', checked=True, cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    cls='rating'
)

With Hidden Option

Preview Code Auto

Div(
    Input(type='radio', name='rating-2', cls='rating-hidden'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', checked=True, cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    cls='rating rating-lg'
)

Read only rating

Preview Code Auto

Div(
    Div(cls='mask mask-star', aria_label='1 star'),
    Div(cls='mask mask-star', aria_label='2 star'),
    Div(cls='mask mask-star', aria_label='3 star', aria_current='true'),
    Div(cls='mask mask-star', aria_label='4 star'),
    Div(cls='mask mask-star', aria_label='5 star'),
    cls='rating'
)

Variants

Star Variant

Preview Code Auto

Div(
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', checked=True, cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    cls='rating'
)

Heart Multicolor Variant

Preview Code Auto

Div(
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-red-400'),
    Input(type='radio', name='rating-4', checked=True, cls='mask mask-heart bg-orange-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-yellow-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-lime-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-green-400'),
    cls='rating gap-1'
)

Star Custom Variant

Preview Code Auto

Div(
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', checked=True, cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    cls='rating'
)

Size Variants

Preview Code Auto

Div(
    Div(
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-xs'
    ),
    Div(
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-sm'
    ),
    Div(
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-md'
    ),
    Div(
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-lg'
    ),
    cls='flex flex-col items-center gap-2'
)

Half Stars

Rating with half star increments

Preview Code Auto

Div(
    Input(type='radio', name='rating-10', cls='rating-hidden'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', checked='checked', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    cls='rating rating-lg rating-half'
)

Class Reference

Class	Type	Description
rating	Component	Base container class
rating-half	Modifier	Enables half-star selection
rating-hidden	Modifier	Hides radio input
rating-xs	Size	Extra small rating
rating-sm	Size	Small rating
rating-md	Size	Medium rating
rating-lg	Size	Large rating
rating-xl	Size	Extra large rating
mask-star	Mask	Default star shape
mask-star-2	Mask	Alternative star shape
mask-heart	Mask	Heart shape
mask-half-1	Mask	Left half of shape
mask-half-2	Mask	Right half of shape

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo