Capsule Stepper
Nudge a number up or down with − and + in a capsule.
import { CapsuleStepper } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a capsule stepper for a number people adjust in small steps rather than type: a tempo, a zoom level, a count of takes. You can still click the number and type one.
import { CapsuleStepper } from '@youj/react'
<CapsuleStepper label="Tempo" defaultValue={124} min={60} max={200} unit="BPM" />It's built on Base UI's number field, like Number Input. Values are read and written for the locale, kept between min and max, and step by step. Shift with an arrow key steps by largeStep. Holding a button keeps stepping, and a button turns off at its end of the range. format takes Intl.NumberFormat options, such as { style: 'percent' }.
Description
A Tempo stepper with a BPM unit, and a Zoom stepper that shows percentages in quarter steps.
Code
capsule-stepper-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsvalue, defaultValue, onValueChange… (19)
Props
| Prop | Type | |
|---|---|---|
value | number | null | – |
defaultValue | number | null | – |
onValueChange | (value: number | null) => void | – |
min | number | – |
max | number | – |
step | numberPer press and ArrowUp/Down. default 1 | 1 |
largeStep | numberPer Shift+ArrowUp/Down. default 10 | 10 |
format | Intl.NumberFormatOptionsIntl.NumberFormat options: { maximumFractionDigits: 1 }, { style: 'percent' }… | – |
locale | Intl.LocalesArgumentDefault: the YoujProvider locale. | – |
label | stringA short eyebrow at the start ("Tempo"). It names the field too, unless | – |
aria-label | string | – |
unit | stringSet small and muted after the value ("BPM", "×"), and read after it. | – |
size | 'sm' | 'default'default 'default' | 'default' |
disabled | boolean | – |
readOnly | boolean | – |
name | string | – |
id | string | – |
className | stringClasses for the capsule. | – |
ref | Ref<HTMLInputElement> | – |
StylingParts and class names
Styling
Parts: capsule-stepper, capsule-stepper-group (the capsule), capsule-stepper-window, capsule-stepper-value and capsule-unit.
MotionStep
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Stepthe new number rolls in from the side it moved, up for more and down for less | spring.snappy0.2s, bounce 0 | 0.2s, bounce 0 |
Reduced motion
The number changes in place.
AccessibilityARIA
Accessibility
labelnames the field. Without one, usearia-label.unitis read after the value.- The buttons are named "Increase" and "Decrease" by the labels, which the language packs translate.