# Rating Scale > A score on real radio buttons, from 0 to 10 or 1 to 5. The picked score fills with ink from the bottom, its end lights up, and an optional follow-up question unfolds and rolls to match the score. Pure CSS. Forms · rating scale, nps, survey, radio, feedback, form · HTML and CSS only · no dependencies · updated 2026-11-04 Demo: https://kodza.dev/components/rating-scale/ Source on GitHub: https://github.com/kodza-dev/kodza/tree/main/components/rating-scale ## Files The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard). - [`kodza-rating-scale.css`](https://kodza.dev/registry/rating-scale/kodza-rating-scale.css) · 18.9 KB - [`kodza-rating-scale.html`](https://kodza.dev/registry/rating-scale/kodza-rating-scale.html) · 6.3 KB · the markup, to adapt and paste into your page **Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths): ```bash curl -fsSL --create-dirs -o kodza/kodza-rating-scale.css https://kodza.dev/registry/rating-scale/kodza-rating-scale.css ``` Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.) ## API - Root: `.kodza-rating-scale` - Variables (set them on the root element itself: it declares its own defaults): - `--kz-rating-scale-bg: #ffffff` - `--kz-rating-scale-fg: #0a0a0a` - `--kz-rating-scale-muted: rgba(10, 10, 10, 0.58)` - `--kz-rating-scale-border: rgba(10, 10, 10, 0.1)` - `--kz-rating-scale-border-hover: rgba(10, 10, 10, 0.28)` - `--kz-rating-scale-ink: #0a0a0a` - `--kz-rating-scale-on-ink: #ffffff` - `--kz-rating-scale-soft: rgba(10, 10, 10, 0.06)` — the halo of the follow-up box - `--kz-rating-scale-shadow: rgba(10, 10, 10, 0.18)` — under a lifted score - `--kz-rating-scale-cell: 44px` — a score's height, and its width when there is room - `--kz-rating-scale-gap: 4px` - `--kz-rating-scale-lift: 3px` — how far the score under the pointer rises - Modifiers: `.kodza-rating-scale--fill` - Attributes: - `data-end` (e.g. `low`, `high`) ## Keyboard What each key does, by where the focus is. Keep it working when you adapt the HTML: same elements, same classes. - On a score (focus in `.kodza-rating-scale__input`): - `ArrowRight` / `ArrowDown`: Picks the next score, round and round - `ArrowLeft` / `ArrowUp`: Picks the previous score, round and round - `Space`: Picks the focused score ## Dark mode The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS: ```css @media (prefers-color-scheme: dark) { .kodza-rating-scale { --kz-rating-scale-bg: #161616; --kz-rating-scale-fg: #f2f2f0; --kz-rating-scale-muted: rgba(242, 242, 240, 0.62); --kz-rating-scale-border: rgba(255, 255, 255, 0.12); --kz-rating-scale-border-hover: rgba(255, 255, 255, 0.3); --kz-rating-scale-ink: #f2f2f0; --kz-rating-scale-on-ink: #0a0a0a; --kz-rating-scale-soft: rgba(255, 255, 255, 0.08); --kz-rating-scale-shadow: rgba(0, 0, 0, 0.6); } } ``` A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-rating-scale { … }`); a single dark section, under that section's class. ## Use it ### Plain HTML page - CSS: `kodza/kodza-rating-scale.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `