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 #
| 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. |