Components

Stepper

Adjust a number with increment and decrement buttons.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Controlled

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Stepper } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
const ControlledDemo = () => {
    const [value, setValue] = useState(5);
    return (<VStack spacing={16}>
      <Text>Controlled value: {value}</Text>
      <Stepper value={value} onValueChange={setValue}/>
    </VStack>);
};
export default function Example() {
    return (<ControlledDemo />);
}

Usage and limitations

  • Controlled: value; uncontrolled: defaultValue. onValueChange and onChange receive the numeric update.
  • min, max, and step constrain changes; buttons disable at the bounds. disabled disables the control.
  • Keep both buttons visible and labeled; display the value in the surrounding form when needed.

More examples

Uncontrolled Usage
Bounded Usage

API reference

PropTypeRequiredDescription
valuenumberNoThe current value when used in controlled mode.
defaultValuenumberNoThe initial value when used in uncontrolled mode. Default: 0
onChange(value: number) => voidNoNative-style change callback with the next numeric value.
onValueChange(value: number) => voidNoSwiftUI-style value callback.
minnumberNoThe minimum value allowed.
maxnumberNoThe maximum value allowed.
stepnumberNoThe step amount for each increment/decrement. Default: 1
disabledbooleanNoWhether the stepper is disabled. Default: false

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Spacer

Distribute unused space along a stack’s main axis.

SwipeActions

SwipeActions adapts SwiftUI's swipe-revealed row actions into an explicit, accessible web row wrapper. On the web, actions are revealed with a toggle instead of relying on touch-only gestures.