FooterNumber

A number field with its own steppers, in the footer's field style.

@internote/canvas-sdk/reactComponent
On this page
import { FooterNumber } from '@internote/canvas-sdk/react';

The browser's own spinners are hidden so a stray scroll cannot alter a value. While it is being typed in it holds whatever was typed, including states no number can be, such as empty, and settles on blur, so clearing the field to retype it does not fight back with a clamped value.

#Props

Takes no className, style or id.

ariaLabelRequired
The field's accessible name; the steppers are named "<label>: more" and "<label>: less".
string
invalid
Whether to mark the value as not one the environment can use.
boolean
max
The highest value the steppers and blur allow.
number
min
The lowest value the steppers and blur allow.
number
onChangeRequired
Called with the new text on every keystroke and stepper press, and with the clamped number on blur.
(value: string) => void
step
How far one stepper press moves the value; results land on the step's decimal places.
number
Default1
valueRequired
The field's text — a string, so it can hold an empty or half-typed number.
string

Declared in packages/canvas-sdk/src/react/footer-controls.tsx:159.

Last updated