Scale

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

50%

100%

Installation#

You can install this component via the shadcn CLI.

npx shadcn@latest add https://jakeisonline.com/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 inputwrapped in a fieldset.

Keyboard interactions#

Key	Action
`Tab` / `Shift` + `Tab`	Moves focus into and out of the `Scale` group.
`Space`	Checks the focused `ScaleStep`, if not already focused.
`ArrowRight` / `ArrowDown`	Move 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` / `ArrowUp`	Move 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.

Prop	Type	Description
`id`	string	The id of the `ScaleStep`. Required.
`name`	string	The name of the `ScaleStep`. Required.
`label`	string	The label of the `ScaleStep`. Required.