Accessible Star Rating Widget with Radio Inputs (No JavaScript Library)

A 5-star rating widget built with native radio inputs, so it's keyboard accessible and works without any JavaScript library. Uses the classic flex-direction: row-reverse plus ~ sibling-selector trick to highlight stars on hover/checked in pure CSS. A small vanilla JS layer adds a live aria-live status text, a clear button, and persists the chosen rating to localStorage.

Category

Bootstrap 3.0
img binocular Views: 3
Creation date 2026
Author Vandu

Associated Tags

star rating rating radio input accessible accessibility keyboard accessible css only no javascript library vanilla javascript localstorage ui component form control

Related snippets :

OTP / Verification Code Input with Auto-Advance (Vanilla JavaScript)
OTP / Verification Code Input with Auto-Advance...


Before/After Image Comparison Slider (CSS clip-path + Range Input)
Before/After Image Comparison Slider (CSS clip-...


React via CDN, No Build Step (React.createElement, No JSX)
React via CDN, No Build Step (React.createEleme...


Countdown Timer to a Target Date (Vanilla JavaScript)
Countdown Timer to a Target Date (Vanilla JavaS...