Number Stepper

Usage

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

Anatomy

Import the NumberStepper component and access all parts using dot notation.

import { NumberStepper } from "@thenamespace/uikit";

<NumberStepper>
  <NumberStepper.Group>
    <NumberStepper.DecrementButton />
    <NumberStepper.Value />
    <NumberStepper.IncrementButton />
  </NumberStepper.Group>
</NumberStepper>;

Guest Picker

Adults

Ages 13 or above

Children

Ages 2–12

Infants

Under 2

Pets

Bringing a service animal?

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

Controlled

Value: 5

"use client";

import React from "react";

import { NumberStepper } from "@thenamespace/uikit";

Custom Icons

100

"use client";

import { ZoomInAreaIcon, ZoomOutAreaIcon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { NumberStepper } from "@thenamespace/uikit";

Custom Value

3 items

"use client";

import { NumberStepper } from "@thenamespace/uikit";

export const DemoCustomValueExample = () => (

Disabled

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

Min Max Values

Min: 0, Max: 5

Min: -10, Max: 10

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

Reversed Layout

"use client";

import { NumberStepper } from "@thenamespace/uikit";

export const DemoReversedLayoutExample = () => (

Sizes

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

With Custom Buttons

primary

secondary

tertiary

outline

primary

secondary

tertiary

outline

"use client";

import { NumberStepper } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
import { IconMinus, IconPlus } from "@thenamespace/uikit/icons";

With Format Options

Currency (USD)

$10.00

Percentage

50%

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

With Label

Guests

Maximum 10 guests per reservation

"use client";

import { NumberStepper } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

With Step

Step: 5

Step: 10

"use client";

import { NumberStepper } from "@thenamespace/uikit";

interface StepperContentProps {

CSS Classes

Base & Size Classes

.number-stepper - Base root wrapper
.number-stepper--sm - Small size
.number-stepper--md - Medium size (default)
.number-stepper--lg - Large size

Element Classes

.number-stepper__group - Container grouping value and buttons
.number-stepper__group--sm / --md / --lg - Group size variants
.number-stepper__value - Animated number display (via Number Flow)
.number-stepper__decrement-button - Minus button
.number-stepper__increment-button - Plus button
.number-stepper__input - Hidden native input for accessibility

Interactive States

Hover: :hover or [data-hovered="true"] on buttons (background change)
Focus visible: :focus-visible or [data-focus-visible="true"] on buttons (focus ring)
Pressed: :active or [data-pressed="true"] on buttons (scale down)
Disabled: :disabled or [data-disabled="true"] on buttons (reduced opacity)

API Reference

NumberStepper

The root component. Wraps RAC NumberField.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`formatOptions`	`Format`	-	Number formatting options passed to Number Flow

Also supports all RAC NumberField props (value, defaultValue, onChange, minValue, maxValue, step, isDisabled, etc.).

NumberStepper.Group

Container grouping value and buttons. Wraps RAC Group. Automatically renders a hidden input for accessibility.

Also supports all RAC Group props.

NumberStepper.Value

Animated number display using Number Flow.

Prop	Type	Default	Description
`value`	`number`	-	Override value (defaults to the root's current value)
`format`	`Format`	-	Override format options
`children`	`ReactNode \| ((props: { value: number, formatOptions?: Format }) => ReactNode)`	-	Custom content or render function

Also supports all Number Flow props except value and children.

NumberStepper.DecrementButton

Minus button. Wraps RAC Button with slot="decrement". Renders a default minus icon when no children are provided.

Also supports all RAC Button props.

NumberStepper.IncrementButton

Plus button. Wraps RAC Button with slot="increment". Renders a default plus icon when no children are provided.

Also supports all RAC Button props.