Rating

#Installation & usage

Use it to ask for a quick judgment on a fixed scale, such as a review, a satisfaction survey or a score, and to show one back in a list of products or results. It's one focusable control, so a keyboard user reaches it with one Tab and sets it with the arrows or a digit. When the scale has named steps that matter more than their position, such as "Not likely" to "Very likely", a Radio Group says so more plainly. For an arbitrary number along a range, use a Slider.

import { useState } from 'react'
import { Rating } from '@youj/react'

export function RateStay() {
  const [rating, setRating] = useState(0)
  return <Rating aria-label="Overall" value={rating} onValueChange={setRating} allowHalf />
}

The value is a number from 0 to max, where 0 means no rating. Each icon sits in a small key of its own, in a row like a segmented control's segments. An empty key is a plain key with a muted outline; a filled one turns the accent, with the icon solid in the accent's contrast color, and a half step fills the left half of a key. Hovering previews the value under the pointer: the keys fill there one by one, the key under the pointer lifts, and keys of the value already set keep a faint accent tint while the preview sits below them. Leaving restores it. Clicking commits it, and clicking the current value again clears it. allowHalf rates half a key at a time. With a name, the value is submitted with a form.

#A readout

Rating draws no text of its own beyond what it says to a screen reader. onPreviewChange reports the value under the pointer, or null when it leaves, so a readout beside it can say what a click would set, as the demo's "4.5 of 5 · Excellent" does. Hide that readout from assistive tech (aria-hidden): the slider already speaks its value.

const [rating, setRating] = useState(0)
const [preview, setPreview] = useState<number | null>(null)
const shown = preview ?? rating

<Rating aria-label="Overall" value={rating} onValueChange={setRating} onPreviewChange={setPreview} />
<span aria-hidden>{shown ? `${shown} of 5` : 'Tap to rate'}</span>

#Description

#Code