## Rate
Capture or display a score as a row of stars.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-rate> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, audience.
Props:
- value: number, default 0. Current score (0…count; .5 steps with allow-half)
- count: number, default 5. Number of stars (DS V3 name; `max` is an alias)
- allow-half: boolean, default false. Half-star selection — the left half of a star scores n−0.5
- allow-clear: boolean, default false. Click the current value again to clear to 0
- icon: string, default —. Custom character: a DS icon name (e.g. system-heart-straight) drawn instead of the star
- readonly: boolean, default false. Display only — no interaction
- disabled: boolean, default false. Dims and disables the control
- change: CustomEvent<{value}>, default —. Composed event; read e.detail.value
Tokens: yellow-50, gray-40, color-primary, radius-xs, font-product, motion-mid, motion-fast, ease-in-out, ease-out.
Use when: Rate (a subjective score on a small fixed scale — a review, a difficulty, satisfaction); Segmented (picking one labelled option from a few, not a magnitude); Slider (a continuous value across a wide range).