HyRating

A form-associated star-rating control. Renders max symbols and fills them to express a numeric value, supporting whole, half, and arbitrary fractional fill via clip-path. Slider semantics over a discrete range — a visually-hidden native <input type="range"> owns keyboard navigation, focus, aria-valuenow/min/max, and form participation; the star chrome is a custom visual layer with its own pointer (hover-preview + click) handling.

Form Integration

Implements the Form-Associated Custom Elements API — the rating's value is included in FormData when the form is submitted under its name.

Keyboard

The native range input handles arrow keys (step by precision), Home / End (min / max). Digit keys 1…max jump to that rating; 0 clears (when clearable).

Fractional display

precision constrains only interactive stops. A read-only value of any fraction (e.g. an average of 3.7) always renders accurately via clip-path.

Examples

Basic usage

<hy-rating label="Quality" value="3"></hy-rating>

Half-star precision

<hy-rating label="Score" precision="0.5" value="2.5"></hy-rating>

Read-only average

<hy-rating label="Average" readonly value="3.7"></hy-rating>

Form submission

<form>
  <hy-rating name="stars" label="Rate us" value="4"></hy-rating>
  <button type="submit">Save</button>
</form>

Events

• input - Fired during interactive change (hover-commit / keyboard). Detail: { value: number }
• change - Fired when the value is committed (click / keyboard). Detail: { value: number }

Methods

checkValidity()

Checks if the rating's current value satisfies its constraints.

reportValidity()

Checks validity and reports any errors to the user.

formResetCallback()

Restores the rating to its authored default value on form reset.

focus()

Focuses the underlying range input.

blur()

Removes focus from the underlying range input.