form fields

<tc-rating>

Star rating input with optional half-star precision, keyboard nav, hover preview, and a read-only display mode.

import "@ra9/tan-compose-kit/rating"

Props

Name	Type	Default	Description
`value`	`number`	`0`	Current rating. Reflects to the `value` attribute.
`max`	`number`	`5`	Total number of stars.
`readonly`	`boolean`	`false`	Display-only mode. Renders as `role="img"`.
`allowHalf`	`boolean`	`false`	Allow 0.5 increments. Click the left half of a star for a half rating.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Star size — 18 / 24 / 32 px.
`ariaLabel`	`string`	`"Rating"`	Accessible label.

Events

Event	Detail	When
`tc-change`	`{ value: number, previous: number }`	Fires when the user picks a new rating (click or keyboard).

CSS variables

Variable	Default	Description
`--tc-rating-fill`	`var(--tc-color-warning, #d7a52f)`	Filled star color.
`--tc-rating-track`	`var(--tc-color-rule, #ece5d3)`	Empty star color.

Examples

Basic

<tc-rating value="3"></tc-rating> <tc-rating value="4" size="lg"></tc-rating> <tc-rating value="2" size="sm"></tc-rating>

Half-stars

<tc-rating value="3.5" allowHalf size="lg"></tc-rating>

Read-only display

Pair with a count for a typical product card.

4.5 (281 reviews)

<tc-rating value="4.5" allowHalf readonly></tc-rating> <span>4.5 (281 reviews)</span>

Custom max

<tc-rating value="7" max="10"></tc-rating>

Listening for change

<tc-rating id="ux" value="0"></tc-rating> <script> document.getElementById("ux").addEventListener("tc-change", (e) => { console.log("now rated:", e.detail.value); }); </script>

Accessibility

Interactive ratings use role="slider" with aria-valuenow / valuemin / valuemax / valuetext. Keyboard support: ← / → (or ↑ / ↓) adjust by step, Home / End jump to 0 / max.
Read-only ratings use role="img" with the value baked into aria-label.
Clicking the current value clears the rating, in case users want to undo.
Star fills use a clip-path for the half state — at any zoom level the half is exactly 50%.

Theming

<tc-rating value="4.5" allowHalf style=" --tc-rating-fill: #ff6b6b; --tc-rating-track: #4a2a32; " ></tc-rating>

← All components