EEnterUI
DocsComponentsThemesDonation
Get Started
      • Input
      • PasswordInput
      • NumberInput
      • Stepper
      • TextArea
EnterUIDocsInputsForm ControlsText InputsStepper
InputsUpdated 6 May 2026

Stepper

A compact numeric control with native input semantics and plus/minus actions.

Stepper defines how EnterUI handles a compact numeric control with native input semantics and plus/minus actions, including default structure, accessible states, and token-driven styling.

#Default usage

Stepper

Use Stepper for small bounded numeric adjustments.

Code
<Stepper aria-label="Quantity" defaultValue={1} min={0} max={10} />

#Import

Code
import { Stepper } from "@froggdesign/enter-ui-react";

#Controlled

Code
<Stepper value={count} onValueChange={setCount} min={0} max={10} />

#Accessibility

The input remains a native number input. Increment and decrement buttons have accessible labels and clamp to min / max.

#API

  • value / defaultValue support controlled and uncontrolled usage.
  • min, max, and step control bounds.
  • onValueChange receives the clamped number.
  • inputProps passes attributes to the inner input.

#Styling

Uses .eui-stepper classes and the same hover/focus rhythm as EnterUI inputs.

PreviousNumberInput
NextTextArea

On this page

  1. Default usage
  2. Import
  3. Controlled
  4. Accessibility
  5. API
  6. Styling