templUI Pro coming soon  

50% OFF Join Waitlist

Rating

Interactive rating component for capturing user feedback and displaying scores.

Source
TailwindCSS
Vanilla JS

Installation

  1. Install the component

    templui add rating
  2. Add the JavaScript to your layout

    @rating.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

Examples

With Label

Styles

Precision (Read-Only)

Max Values

Form

Rate the quality of the product you received.

Please rate the product quality.

API Reference

Required parameter
Hover for description

Rating

Main rating component container.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil
Value
float64
0
ReadOnly
bool
false
Precision
float64
1.0
Name
string
""
OnlyInteger
bool
false

Rating.Group

Container for grouping rating items.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil

Rating.Item

Individual rating item (star, heart, emoji).

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil
Value
int
0
Style
Style
star