Rating
Interactive rating component for capturing user feedback and displaying scores.
package showcase
import "github.com/templui/templui/components/rating"
templ RatingDefault() {
@rating.Rating(rating.Props{
Value: 3.5,
ReadOnly: false,
Precision: 0.5,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
}
Installation
templui add ratingLoad the script once in your layout:
<head>
@rating.Script()
</head>import "github.com/templui/templui/components/rating"Load the script once in your layout:
<head>
@rating.Script()
</head>Examples
With Label
package showcase
import (
"github.com/templui/templui/components/label"
"github.com/templui/templui/components/rating"
)
templ RatingWithLabel() {
<div class="items-center">
<div class="flex flex-col gap-2">
@label.Label(label.Props{
For: "rating-with-label",
}) {
Fruit
}
@rating.Rating(rating.Props{
Value: 2,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
</div>
</div>
}
Styles
package showcase
import "github.com/templui/templui/components/rating"
templ RatingStyles() {
<div class="flex flex-col gap-4">
@rating.Rating(rating.Props{
Value: 2,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
@rating.Rating(rating.Props{
Value: 3,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleHeart,
})
}
}
}
@rating.Rating(rating.Props{
Value: 4,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleEmoji,
})
}
}
}
</div>
}
Precision (Read-Only)
package showcase
import "github.com/templui/templui/components/rating"
templ RatingPrecision() {
@rating.Rating(rating.Props{
Value: 1.3,
ReadOnly: true,
Precision: 0.5,
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
}
Max Values
package showcase
import "github.com/templui/templui/components/rating"
templ RatingMaxValues() {
@rating.Rating(rating.Props{
Value: 7,
}) {
@rating.Group() {
for i := 1; i <= 10; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
Class: "scale-75", // Smaller stars for better display
})
}
}
}
}
Form
package showcase
import (
"github.com/templui/templui/components/form"
"github.com/templui/templui/components/rating"
)
templ RatingForm() {
<form class="max-w-sm mx-auto">
@form.Item() {
@form.Label(form.LabelProps{
For: "product_quality",
}) {
Product Quality
}
@rating.Rating(rating.Props{
Value: 3,
ReadOnly: false,
Precision: 1.0,
Name: "product_quality",
}) {
@rating.Group() {
for i := 1; i <= 5; i++ {
@rating.Item(rating.ItemProps{
Value: i,
Style: rating.StyleStar,
})
}
}
}
@form.Description() {
Rate the quality of the product you received.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please rate the product quality.
}
}
</form>
}
API Reference
Rating
Main rating component container.
| Name | Type | Default |
|---|---|---|
Unique identifier for the rating component | | |
Additional CSS classes to apply to the rating container | | |
Additional HTML attributes to apply to the rating container | | |
Current rating value | | |
Whether the rating is read-only | | |
Precision for rating values (e.g., 0.5 for half-star ratings) | | |
Name attribute for the hidden input field | | |
Whether to only allow integer rating values | | |
Rating.Group
Container for grouping rating items.
| Name | Type | Default |
|---|---|---|
Unique identifier for the group element | | |
Additional CSS classes to apply to the group | | |
Additional HTML attributes to apply to the group | | |
Rating.Item
Individual rating item (star, heart, emoji).
| Name | Type | Default |
|---|---|---|
Unique identifier for the item element | | |
Additional CSS classes to apply to the item | | |
Additional HTML attributes to apply to the item | | |
Numeric value for this rating item | | |
Visual style for the rating item (star, heart, emoji) | | |
