Scale

A fully interactive, accessible, user interface component that allows users to easily pick a value from a horizontal scale.

Installation #

You can install this component via the shadcn CLI.

npx shadcn@latest add https://jakeisonline.com/components/registry/scale.json

Usage #

import { Scale, ScaleStep } from "@/components/ui/scale"
<Scale>
  <ScaleStep id="unhappy" name="satisfaction" label="Unhappy" />
  <ScaleStep id="meh" name="satisfaction" label="Meh" defaultChecked />
  <ScaleStep id="happy" name="satisfaction" label="Happy" />
</Scale>

Accessibility #

Adheres to the Radio Group WAI-ARIA design pattern . At its core, this component is simply a native radio input wrapped in a fieldset .

Keyboard interactions #

KeyAction
Tab / Shift + TabMoves focus into and out of the Scale group.
SpaceChecks the focused ScaleStep, if not already focused.
ArrowRight / ArrowDownMove focus to the next ScaleStep in the group, uncheck the previously focused ScaleStep, and check the newly focused ScaleStep. If focus is on the last ScaleStep, focus moves to the first ScaleStep.
ArrowLeft / ArrowUpMove focus to the previous ScaleStep in the group, uncheck the previously focused ScaleStep, and check the newly focused ScaleStep. If focus is on the first ScaleStep, focus moves to the last ScaleStep.

Component Reference #

Scale #

Used to wrap a group of ScaleStep components.

ScaleStep #

An individual step within the Scale component. Also accepts all native radio input attributes .

PropTypeDescription
idstringThe id of the ScaleStep. Required.
namestringThe name of the ScaleStep. Required.
labelstringThe label of the ScaleStep. Required.