Components
Stepper
Stepper renders only the −/+ control.
It holds no value of its own — the caller owns the number and wires subtractButton / addButton.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Stepper } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
subtractButton | — | — | Pressable props for the − half: onPress, and disabled once you hit your lower bound. The stepper enforces no bounds itself. |
addButton | — | — | Pressable props for the + half. Same contract as subtractButton. |
Examples
Wired
{
function Counter() {
const [days, setDays] = React.useState(1);
return (
<View className="flex-row items-center gap-4">
<Stepper
subtractButton={{
onPress: () => setDays(d => Math.max(0, d - 1)),
disabled: days === 0,
}}
addButton={{ onPress: () => setDays(d => d + 1) }}
/>
<Text>
{days}
{days === 1 ? ' day' : ' days'}
</Text>
</View>
);
}
return <Counter />;
}At Lower Bound
Either side can be disabled independently — here the lower bound is hit.