Input & controls

Rating / Stars

Q: How do people describe a Rating / Stars in plain words?

those five stars I tap to leave a review the 4.5 star average next to a product clicking stars to rate how good something was

Q: How do I implement a Rating / Stars?

Build rating input as a radiogroup of five visually hidden radios labeled “1 star”…“5 stars”, fill via :checked and hover preview. Keep a separate readonly markup path for averages with text “4.5 out of 5”.

A row of stars (or icons) to enter or display a score.

Also known as star rating · score input · five stars

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Rating / Stars".

Build rating input as a radiogroup of five visually hidden radios labeled “1 star”…“5 stars”, fill via :checked and hover preview. Keep a separate readonly markup path for averages with text “4.5 out of 5”.

Anatomy:
- star / symbol: Any icon works—stars, faces, chili peppers.
- half star: Fine for display (4.5); painful as an input target on phones.
- indicator / readonly: Display-only is a different control from input.

Preferred API / pattern: `custom radiogroup / rating libs`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Readonly stars still in the tab order
○Avoid: Hover fill identical to selected fill
○Avoid: Stars only, no numeric label
○Avoid: Half-star input on mobile

In plain wordsHow people search for it

“those five stars I tap to leave a review”“the 4.5 star average next to a product”“clicking stars to rate how good something was”

AnatomyOpen for part names

star / symbol: Any icon works—stars, faces, chili peppers.
half star: Fine for display (4.5); painful as an input target on phones.
indicator / readonly: Display-only is a different control from input.

How to write itOpen for stack patterns

Web (HTML/CSS)role="radiogroup" + visually hidden radios

React + Tailwind + shadcn/uicustom radiogroup / rating libs

SwiftUIRatings UI or custom star buttons

Ant Design<Rate allowHalf disabled />

Notes

Two jobs: input (exclusive 1–5 choice → radiogroup) vs display (show 4.5 with a text alternative). Don’t make a readonly average focusable. Hover preview should look different from the committed value. Whole stars for input on touch.

Common mistakesHumans and models trip here

Readonly stars still in the tab order: noise for keyboard users.
Hover fill identical to selected fill: can’t tell preview from commit.
Stars only, no numeric label: 4 vs 5 is hard at small sizes.
Half-star input on mobile: hit targets are a lottery—whole stars only.

More failure symptoms on AI broke it.

Related patterns

Checkbox & RadioCheckboxes for multi-select; radios for a single choice in a group.SliderA track with a draggable thumb for choosing a value in a continuous range.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.

Spotted a wrong name or missing pattern?

Message on X