Two segments that decrease and increase a number in steps, within a range or wrapping around, as the iOS 26 stepper does.

import { Stepper } from "@plexui/ui/components/Stepper";

A stepper changes a value by small amounts and shows no value of its own. Show the value beside it and name the stepper with the label of that value. For values that vary widely, pair it with an input. On a phone it is the 92 × 32 capsule of the iOS 26 kit with a 44px target; on a desktop it follows the PlexUI control size.

Examples

Overview

Guests

In rows

1 copy

3 nights

Range, step and wrap

Opacity

Hour

States

API

Prop	Type	Default	Description
`value`	`number`	—	Controlled value
`defaultValue`	`number`	`min`	Initial value (uncontrolled)
`onChange`	`(value: number) => void`	—	Called with the next value after a step
`min`	`number`	`0`	Lowest value
`max`	`number`	`100`	Highest value
`step`	`number`	`1`	Amount each step adds or removes
`wrap`	`boolean`	`false`	A step past max continues from min, and one below min from max
`autoRepeat`	`boolean`	`true`	Holding a segment keeps stepping: after 400ms, every 100ms
`disabled`	`boolean`	`false`	Prevent interaction and focus
`pill`	`boolean`	`true`	Fully rounded ends
`decrementLabel`	`string`	`"Decrease"`	Accessible name of the minus segment
`incrementLabel`	`string`	`"Increase"`	Accessible name of the plus segment
`name`	`string`	—	Submits the value with the owning form through a hidden input
`aria-label`	`string`	—	Name of the value, when no visible label names it
`aria-labelledby`	`string`	—	The id of the visible label of the value
`aria-describedby`	`string`	—	The id of an element that describes the stepper
`id`	`string`	—	The id of the stepper
`onFocus`	`FocusEventHandler<HTMLDivElement>`	—	Called when the stepper gains focus
`onBlur`	`FocusEventHandler<HTMLDivElement>`	—	Called when the stepper loses focus
`className`	`string`	—	CSS classes applied to the stepper

The stepper is a spin button with the current value, range and name. Its two segments are buttons that a pointer or assistive technology presses; they take no keyboard focus, and pressing one keeps the focus where it was. With the keyboard, Up and Down step, Page Up and Page Down step ten times, Home and End go to min and max.

Styling

Stepper reads these component tokens. Override them at any scope to restyle it:

--stepper-height: height (default var(--control-size-md), 32px at 767px and below)
--stepper-segment-width: width of each segment (default 40px, 46px at 767px and below)
--stepper-radius: corner radius with pill={false} on a desktop (default var(--control-radius-md); 16px, the capsule, on a phone)
--stepper-background: fill under both segments (default light-dark(var(--gray-100), var(--alpha-08)); none at 767px and below, where each segment has its own)
--stepper-segment-background, --stepper-segment-background-disabled: fill of a segment and of one at the end of the range (none on a desktop; at 767px and below --stepper-mobile-segment-background, the kit's Fills/Tertiary, --alpha-06 and --alpha-12, and --stepper-mobile-segment-background-disabled, Fills/Quaternary, --alpha-05 and --alpha-08)
--stepper-segment-background-hover, --stepper-segment-background-active: fill of a segment on hover and while pressed (--alpha-05, --alpha-10 over the fill; on a phone no hover and the lighter Fills/Quaternary while pressed, --stepper-mobile-segment-background-active)
--stepper-separator-color, --stepper-separator-inset: separator color and its inset from the top and bottom (default var(--color-border), 4px; --alpha-25 at 767px and below)
--stepper-icon-size, --stepper-icon-color, --stepper-icon-disabled-color: the minus and plus (default var(--control-icon-size-md), var(--color-text), var(--color-text-disabled); 22px and the tertiary label at 767px and below)
--stepper-target-size: height of the touch target (44px at 767px and below)

Stepper