quiz-ui
Components

QuizRating

Star or numeric rating scale, built on Radix ToggleGroup.

Purpose

A single-select rating scale — stars by default, or plain numbers for NPS-style questions ("how likely are you to recommend..."). Backed by Radix ToggleGroup in single-selection mode, so arrow-key navigation between options works without extra code.

Installation

pnpm dlx shadcn@latest add @quiz-ui/quiz-rating

Usage

<QuizRating scale={5} />
// Numeric NPS-style scale, 1–10
<QuizRating scale={10} numeric />

Props

PropTypeDefaultDescription
scalenumber5How many options to render.
numericbooleanfalseRender numbers (1, 2, 3...) instead of stars.
classNamestringMerged onto the wrapper.

Notes

  • The answer is stored as a number.

On this page