sigilUI

Stepper Field

Edit a bounded number with increment and decrement buttons.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { StepperField } from "@sigil-ui/components";

Usage

<StepperField aria-label="Quantity" defaultValue={3} min={1} max={10} />

The buttons update the input using its min, max, and step constraints and fire onChange. Set disabled or readOnly to disable both buttons. For controlled usage, pass value and update it in onChange. Optional onIncrement and onDecrement handlers replace the default stepping behavior.

CLI

npx @sigil-ui/cli add stepper-field

Token Integration

StepperField follows the Sigil component rules: styles resolve from var(--s-*), class names are mergeable through className, and the component is exported from @sigil-ui/components.