# Rate
> Generated from rate.contract.json — do not edit by hand.

Capture or display a score as a row of stars.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | number | `0` | Current score (0…count; .5 steps with allow-half) |
| `count` | number | `5` | Number of stars (DS V3 name; `max` is an alias) |
| `allow-half` | boolean | `false` | Half-star selection — the left half of a star scores n−0.5 |
| `allow-clear` | boolean | `false` | Click the current value again to clear to 0 |
| `icon` | string | `—` | Custom character: a DS icon name (e.g. system-heart-straight) drawn instead of the star |
| `readonly` | boolean | `false` | Display only — no interaction |
| `disabled` | boolean | `false` | Dims and disables the control |
| `change` | CustomEvent<{value}> | `—` | Composed event; read e.detail.value |

## Visual standard (measured)
- Star: 24×24, gap 4
- Filled: yellow-50 #FFE32C
- Empty: gray-40 #E3E3E3
- Half: filled overlay clipped to 50% (allow-half)
- Character: any DS icon by name via `icon` (outline, brand-tinted)
- Hover: scale 1.12, fill preview to cursor (half-precise)

## When to use
- **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

Keep the scale small (5 is the norm). Pair with a short label — 'Rate this session' — and show the chosen value nearby for confirmation.