import { NumberStepper } from '@uhg-abyss/mobile';

maximumValue

minimumValue

title

description

isDisabled

() => {
  const [value, setValue] = useState(0);

  return (
    <NumberStepper
      title="Title Here"
      description="2 lines max description here"
      value={value}
      onChange={setValue}
    />
  );
};

useState

The useState hook gets the value from the component state. It is required to pass in the starting number to the value prop.

Title

Use the title prop to set the title for the input. It is required to pass in a string to the title prop.

Description

Use the description prop to set the description for the input.

Min and Max Values

Use the minimumValue and maximumValue to constrain the stepper to a specific range. By default this range is 0-99.

Disabled

Use the isDisabled prop to disable the stepper. By default, the add or remove buttons disable when the min or max is reached.

Error Message

Use the errorMessage prop to display a message below the description.

NumberStepper Props

Name	Type	Default	Required	Description
decreaseRef	React.Ref<Abyss.PressableRef> | undefined	-	-	The ref to be passed to the decrease button
description	string | undefined	-	-	The description of the number stepper
errorMessage	string | undefined	-	-	Error message to be displayed below the stepper
increaseRef	React.Ref<Abyss.PressableRef> | undefined	-	-	The ref to be passed to the increase button
isDisabled	boolean | undefined	false	-	Flag to enable/disable the stepper. If true, both buttons will be disabled
maximumValue	number | undefined	99	-	Specifies the number the stepper can be decreased to
minimumValue	number | undefined	0	-	Specifies the number the stepper can be increased to
onChange	(value: number) => void | undefined	-	-	Callback fired when the add or remove button is pressed
title	string	-		The title of the number stepper
value	number	-		The current value of the number stepper

NumberStepper Classes

Class Name	Description
abyss-number-stepper-root	Root element
abyss-number-stepper-container	Container around title, description and buttons
abyss-number-stepper-title	Title element
abyss-number-stepper-description	Description element
abyss-number-stepper-button	Button element
abyss-number-stepper-message	Error message
abyss-number-stepper-icon	Icon element
abyss-number-stepper-count	Count element

Dynamic Type

AX5 reorders items to a vertical stack.

NumberStepper Tokens

Search tokens

Token Name	Value
number-stepper.color.text.heading	#323334
number-stepper.color.text.paragraph	#4B4D4F
number-stepper.color.text.label	#323334
number-stepper.color.border.button	#002677
number-stepper.color.surface.button.disabled	#CBCCCD
number-stepper.color.surface.button.default	#FFFFFF
number-stepper.color.icon.button.default	#002677
number-stepper.color.icon.button.disabled	#4B4D4F
number-stepper.border-radius.all.button	500
number-stepper.border-width.all.button	1
number-stepper.sizing.all.icon	24
number-stepper.spacing.gap.horizontal.container	16
number-stepper.spacing.gap.horizontal.controls	8
number-stepper.spacing.padding.all.button	8