Stepper

const ControlledDemo = () => {
  const [value, setValue] = useState(5)
  return (
    <VStack spacing={16}>
      <Text>Controlled value: {value}</Text>
      <Stepper
        value={value}
        onValueChange={setValue}
      />
    </VStack>
  )
}

const UncontrolledDemo = () => {
  const [value, setValue] = useState(2)
  return (
    <VStack spacing={16}>
      <Text>Observed value: {value}</Text>
      <Stepper
        defaultValue={2}
        onChange={setValue}
      />
    </VStack>
  )
}

const BoundedDemo = () => {
  const [value, setValue] = useState(1)
  return (
    <VStack spacing={16}>
      <Text>Bounded value: {value}</Text>
      <Stepper
        value={value}
        onValueChange={setValue}
        min={0}
        max={4}
        step={2}
      />
    </VStack>
  )
}

Overview

Stepper is a control for incrementing or decrementing a numeric value. It supports both controlled and uncontrolled usage and exposes semantic increment/decrement buttons.

SwiftUI Correspondence: Similar to SwiftUI's Stepper.

Notes

• value makes the control controlled
• defaultValue initializes uncontrolled state
• Use onValueChange or onChange to observe updates
• Stepper supports optional min, max, and step constraints
• Stepper can be disabled with the disabled prop
• Buttons disable automatically at the current bounds
• Use Stepper for precise numeric value adjustment

Best Practices

1. Constraints: Set appropriate min and max values
2. State: Prefer controlled value when the source of truth lives outside the component
3. Updates: Use defaultValue for local state and onValueChange to observe changes
4. Feedback: Show the current value to the user when the stepper is part of a larger form
5. Accessibility: Keep the increment and decrement buttons visible and labeled