Component

Rating Scale

A single-select ordinal rating / Likert control with radio semantics, roving keyboard navigation, and optional end labels — for confidence checks, surveys, and self-assessments.

Basic

A 1–5 scale. Use arrow keys, Home, and End to move the selection — it clamps at the ends rather than wrapping.

End labels

Pass minLabel and maxLabel to anchor the extremes of the scale.

Never seen this

Could write it from memory

Controlled with custom points

Provide points with per-point accessible labels for a labeled Likert prompt.

Selected: 4

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { RatingScale } from '@refraction-ui/react'

export function MyComponent() {
  const [value, setValue] = React.useState(3)

  return (
    <RatingScale
      value={value}
      onValueChange={setValue}
      count={5}
      minLabel="Never seen this"
      maxLabel="Could write it from memory"
      aria-label="Confidence"
    />
  )
}

Props

Prop	Type	Default	Description
`value`	`number`	--	Controlled selected value.
`defaultValue`	`number`	--	Initial value for uncontrolled usage.
`onValueChange`	`(value: number) => void`	--	Called with the newly selected value.
`count`	`number`	`5`	Number of points (1..count). Ignored when `points` is given.
`points`	`RatingScalePoint[]`	--	Explicit points with accessible labels: `{ value, label? }`. Overrides `count`.
`minLabel`	`React.ReactNode`	--	Label shown before the scale (the low end).
`maxLabel`	`React.ReactNode`	--	Label shown after the scale (the high end).
`size`	`'sm' \| 'md'`	`'md'`	Visual size of the points.
`disabled`	`boolean`	`false`	Disables the whole scale.
`className`	`string`	--	Additional CSS classes to apply.