Forms · astro-ui · Rating

Rating

Rating input on native radios — icon presets, emoji, and satisfaction scales, zero JS.

Rating is a fieldset of radio inputs styled as rating icons: arrow keys, form submission, and per-step labels (“3 out of 5”) come from the platform. Pick an icon preset (star, heart, circle, square, bar, thumb) or emoji faces, supply custom SVG paths, tint each step with colorScale for satisfaction scales, or highlight only the selected step with single for NPS-style questions. readonly renders a fractional display-only value.

← All components

Features

Native radios: keyboard + form value
Per-step screen-reader labels
Icon presets + custom SVG paths
Emoji sentiment faces
Satisfaction scale with per-step colors
NPS-style single highlight
readonly fractional display

Usage

---
import { Rating } from "astro-ui";
---

<Rating name="score" value={4} />
<Rating name="mood" value={4} icon="emoji" />
<Rating
  name="satisfaction"
  colorScale
  showLabels
  labels={["Very bad", "Bad", "OK", "Good", "Excellent"]}
/>
<Rating value={3.5} readonly />

Demos

Interactive & readonly

<Rating name="score" value={4} />
<Rating value={3.5} readonly />
<Rating value={2} readonly size="lg" variant="primary" />

Sizes & variants

<Rating name="s-sm" value={3} size="sm" />
<Rating name="s-md" value={3} size="md" />
<Rating name="s-lg" value={3} size="lg" />
<Rating name="s-primary" value={3} variant="primary" size="lg" />

Icon presets & custom

<Rating name="heart" value={4} icon="heart" />
<Rating name="thumb" value={4} icon="thumb" />
<Rating name="circle" value={3} icon="circle" />
<Rating name="square" value={3} icon="square" />
<Rating name="bar" value={2} icon="bar" />

{/* Custom icon: 16×16 SVG path data */}
<Rating
  name="custom"
  value={3}
  iconPath="M8 1l2.1 4.3 4.7.7-3.4 3.3.8 4.7L8 11.8 3.8 14l.8-4.7L1.2 6l4.7-.7z"
/>

Emoji sentiment

<Rating name="mood" value={4} icon="emoji" ariaLabel="How do you feel?" />
<Rating value={2} icon="emoji" readonly />
<Rating value={5} icon="emoji" readonly size="lg" />

Satisfaction scale

<Rating
  name="satisfaction"
  value={2}
  colorScale
  showLabels
  labels={["Very dissatisfied", "Dissatisfied", "Neutral", "Satisfied", "Very satisfied"]}
  ariaLabel="Overall satisfaction"
/>
<Rating value={4} readonly colorScale showLabels
  labels={["Very bad", "Bad", "OK", "Good", "Excellent"]} />

Single highlight (NPS-style)

<Rating
  name="nps"
  value={9}
  max={10}
  single
  variant="primary"
  showLabels
  labels={["Not likely", "Extremely likely"]}
  ariaLabel="How likely will you recommend us?"
/>

API

Props

Prop	Type	Default	Description
`name`	`string`	`—`	Field name (required for interactive).
`value`	`number`	`0`	Initial value (fractional for readonly).
`max`	`number`	`5`	Step count.
`icon`	`"star" \| "heart" \| "circle" \| "square" \| "bar" \| "thumb" \| "emoji"`	`"star"`	Icon preset; emoji renders sentiment faces.
`iconPath`	`string`	`—`	Custom icon: 16×16 SVG path data (overrides icon).
`icons`	`string[]`	`—`	Per-step custom icons: 16×16 SVG path data, index 0 = step 1.
`colorScale`	`boolean`	`false`	Tint each step red → green (satisfaction ramp).
`single`	`boolean`	`false`	Highlight only the selected step (NPS-style).
`labels`	`string[]`	`—`	Per-step labels: sr text + visible labels row.
`showLabels`	`boolean`	`false`	Render the labels row under the scale.
`readonly`	`boolean`	`false`	Display-only mode.
`variant`	`"primary" \| "warning"`	`"warning"`	Fill color (ignored per-step when colorScale).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Icon scale.
`disabled`	`boolean`	`false`	Disable the input.
`ariaLabel`	`string`	`"Rating"`	Group name.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Why radios and not a slider?

Ratings are discrete choices — radios give exact selection, per-step labels, and platform keyboard behavior with zero script.

Star scale or emotion scale?

Use stars for familiar magnitude judgments. Use colorScale with labels for satisfaction (CSAT) — color + wording anchor each step. Use single with icon="emoji" for quick sentiment pulses where magnitude between options is meaningless.

How do custom icons work?

Pass iconPath (one icon for every step) or icons (one path per step) with SVG path data drawn in a 16×16 viewBox. Paths render as-is — keep them simple, filled shapes.

Changelog

Version history mentioning Rating.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.
Missing semantic tokens: --ui-card, --ui-backdrop, --ui-backdrop-strong, --ui-progress-stripe, --ui-shadow-color, --ui-rating-1…5, --ui-text-3xl, --ui-space-0-5, --ui-space-7, and --ui-transition-delay.