Rating

Interactive rating component for capturing user feedback and displaying scores.

Source Tailwind CSS JavaScript

package showcase

import "github.com/templui/templui/internal/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

Install the component
```
templui add rating
```
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

Fruit

package showcase

import (
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/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/internal/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/internal/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/internal/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/internal/components/form"
	"github.com/templui/templui/internal/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

Required parameter

Hover for description

Rating

Main rating component container.

Name	Type	Default
`ID` Unique identifier for the rating component	`string`	`""`
`Class` Additional CSS classes to apply to the rating container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the rating container	`templ.Attributes`	`nil`
`Value` Current rating value	`float64`	`0`
`ReadOnly` Whether the rating is read-only	`bool`	`false`
`Precision` Precision for rating values (e.g., 0.5 for half-star ratings)	`float64`	`1.0`
`Name` Name attribute for the hidden input field	`string`	`""`
`OnlyInteger` Whether to only allow integer rating values	`bool`	`false`

Rating.Group

Container for grouping rating items.

Name	Type	Default
`ID` Unique identifier for the group element	`string`	`""`
`Class` Additional CSS classes to apply to the group	`string`	`""`
`Attributes` Additional HTML attributes to apply to the group	`templ.Attributes`	`nil`

Rating.Item

Individual rating item (star, heart, emoji).

Name	Type	Default
`ID` Unique identifier for the item element	`string`	`""`
`Class` Additional CSS classes to apply to the item	`string`	`""`
`Attributes` Additional HTML attributes to apply to the item	`templ.Attributes`	`nil`
`Value` Numeric value for this rating item	`int`	`0`
`Style` Visual style for the rating item (star, heart, emoji)	`Style`	`star`

Menu

Getting Started

Components

Rating

Installation

Examples

API Reference

Rating

Rating.Group

Rating.Item