import { NumberStepper } from '@uhg-abyss/mobile';() => { 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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| decreaseRef | shape | - | The ref to be passed to the decrease button |
| description | string | - | The description of the number stepper |
| errorMessage | string | - | Error message to be displayed below the stepper |
| increaseRef | shape | - | The ref to be passed to the increase button |
| isDisabled | boolean | false | Flag to enable/disable the stepper. If true, both buttons will be disabled |
| maximumValue | numbers | - | Specifies the number the stepper can be increased to |
| minimumValue | number | - | Specifies the number the stepper can be decreased to |
| onChange | function | - | Callback fired when the add or remove button is pressed |
| title | node | - | The title of the number stepper |
| value | number | - | The current value of the number stepper |
NumberStepper Classes
| Class Name | Description |
|---|---|
| abyss-number-stepper-button | Button element |
| abyss-number-stepper-container | Container around title, description and buttons |
| abyss-number-stepper-count | Count element |
| abyss-number-stepper-description | Description element |
| abyss-number-stepper-icon | Icon element |
| abyss-number-stepper-message | Error message |
| abyss-number-stepper-root | Root element |
| abyss-number-stepper-title | Title element |
Dynamic Type
AX5 reorders items to a vertical stack.
NumberStepper 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 |