Quality Score
AI Pass+input
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Input component
About Quality Score
A bare token-driven quality rating input — five ascending bars fill with the brand gradient up to the chosen score, native radio semantics, hover preview, Poor→Excellent hints, and a visible gradient readout backed by a polite live region — themed by the AI Steppers design system.
Features
- Bare centered rating input with a small on-brand title group — no panel card or button chrome
- Five ascending bars (20% to 100% tall) acting as a 1–5 radiogroup from Poor to Excellent
- Bars up to and including the chosen score fill with the brand two-color gradient
- Gradient fill appears with a brief opacity fade and no rising or staggered motion
- Selected bars carry a soft layered glow derived from the gradient start color
- Hover previews the gradient fill and glow on any bar with a quiet 0.1s fade before committing
- Springy
scale(0.97)press on every bar while it is held down - Native hidden radio inputs keep full keyboard and screen-reader semantics
- Visible score readout — gradient number plus its wording — updates on every change
- Visually-hidden live region announces "Output score X of 5" plus its wording on every change
- Poor/Excellent hint row anchors the scale ends
- Dark mode via
body.darkflips the gradient (pink→blue light, violet→teal dark) - Responsive layout that adapts down to 320px
- Fully respects
prefers-reduced-motion
Accessibility
- Radiogroup semantics
role="radiogroup"labelled by the visible title viaaria-labelledby- Native inputs
- Each bar is a
<label>for a real hidden<input type="radio"> - Radio labels
- Every radio carries an explicit
aria-label("1 — Poor" … "5 — Excellent") - Live readout
- Visually-hidden
role="status"witharia-live="polite"announces the chosen score; the visible readout isaria-hiddento avoid double announcement - Keyboard navigation
- Arrow keys move between scores via native radio behavior
- Decorative hints
- The Poor/Excellent hint row is
aria-hidden="true" - Focus indicators
:focus-visiblewith a 2px--primaryoutline on the focused bar- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Quality Score in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Sharp Select
VanillaReact
Sharp-cornered single, multi and searchable multi-select dropdowns in an IBM Carbon-inspired design system — filled triggers with an underline, square checkboxes, accent selection checkmarks, full keyboard support and a dark stack.
#input#select#multi-select
Date Picker
ReactVanilla
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
#input#keyboard
Text Input
VanillaReact
Token-driven text inputs with a borderless bottom-line style, animated focus underlines, leading icons, password visibility toggles, live per-field validation, dark mode, and a responsive two-column layout.
#input#password#validation
Confidence Meter
VanillaReact
A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
#input#slider
Feature Toggles
ReactVanilla
A bare token-driven group of four AI feature switches — Streaming, Memory, JSON mode, and Tool use — with design-system accent tracks, sliding thumbs, live screen-reader announcements, and clickable row labels in both light and dark.
#input#toggle#switch
Mode Radio
VanillaReact
A bare token-driven response-mode radiogroup — Balanced, Precise, Creative — with gradient-ringed dots that fill with the brand two-color gradient when checked, native arrow-key radio semantics, and a polite live announcement of the chosen mode — themed by the AI Steppers design system.
#input#radio#form
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
