NumberInput
NumberInput is a text input field focussed on input and manipulation of numeric data. It provides increment/decrement chevrons and inbuilt keyboard shortcuts for arrow keys.
![Screenshot of component NumberInput basic](/static/fcadfdb5a1c8db0bd5cde21b03f06ba7/NumberInput-basic-desktop.png)
Usage
A static writer that sets the motor_pwm
messageID, and updates based on inbound changes from the microcontroller:
import { NumberInput } from '@electricui/components-desktop-blueprint' <NumberInput accessor ="motor_pwm" />
When interacting with a structure member, standard writer
usage applies.
<NumberInput accessor ={state => state .rgb_settings .red } writer ={(state , value ) => { state .rgb_settings .red = value }}/>
Debouncing
It's not always desirable to send variable changes to the microcontroller until the user has finished with their input.
Set the interval between outbound state updates in milliseconds with throttleDuration
.
<NumberInput accessor ="motor_pwm" throttleDuration ={500} />
Numeric Clamping
Specifying one or both clamping properties min
and max
sets the control range of the up/down chevron. When the limit is hit, the chevron (and keyboard value changes) are prevented.
![Screenshot of component NumberInput clamp-max](/static/10ef2055cae5517dafce4af036ccf069/NumberInput-clamp-max-desktop.png)
![Screenshot of component NumberInput clamp-none](/static/8ca87a6038605eff8859aa648181dc97/NumberInput-clamp-none-desktop.png)
![Screenshot of component NumberInput clamp-min](/static/dc61b18d9f1e9d539df3e7bcda7541dc/NumberInput-clamp-min-desktop.png)
<NumberInput accessor ="motor_pwm" min ={0} max ={100} />
Limits on values should be enforced at a firwmare level, and/or with a custom codec.
Do not rely on the clamping behaviour to prevent out-of-range operation.
Formatting
Size
Use the large
property to increase the size.
![Screenshot of component NumberInput basic](/static/fcadfdb5a1c8db0bd5cde21b03f06ba7/NumberInput-basic-desktop.png)
![Screenshot of component NumberInput large](/static/ae0c84ad360ffe5d03bc9d39d0cdf2e8/NumberInput-large-desktop.png)
<NumberInput accessor ="pitch_gain" large />
Intent Colours
NumberInput
accepts an intent
property to control the colour.
![Screenshot of component NumberInput intent-none](/static/2abb4232e99f1a3da2ec87fb4db7b98c/NumberInput-intent-none-desktop.png)
![Screenshot of component NumberInput intent-primary](/static/22e0b843c558646beba619657461afee/NumberInput-intent-primary-desktop.png)
![Screenshot of component NumberInput intent-success](/static/f8412cd5a987fb1dae66be6b67a6d7d0/NumberInput-intent-success-desktop.png)
![Screenshot of component NumberInput intent-warning](/static/002667e7dfafb0a06de86e5c71772949/NumberInput-intent-warning-desktop.png)
![Screenshot of component NumberInput intent-danger](/static/125d52b8066483c43b398bf12e275da5/NumberInput-intent-danger-desktop.png)
<NumberInput accessor ="target_speed" intent ="primary" />
or use the Intent
enum specifically.
import { Intent } from '@blueprintjs/core' <NumberInput accessor ="target_speed" intent ={Intent .PRIMARY } />
Icon
An icon can render on the left-hand side of the input by specifying a leftIcon
property.
See the Icon
component for details.
The icon will automatically inherit the intent
colours if active.
![Screenshot of component NumberInput icon](/static/0b6909d9387155ccd6b074fec5280484/NumberInput-icon-desktop.png)
![Screenshot of component NumberInput icon-intent](/static/6fd45dcaac90115a0650ecdcaf985529/NumberInput-icon-intent-desktop.png)
<NumberInput accessor ="strobe_duty" leftIcon ="flash" />
or explicitly
import { IconNames } from '@blueprintjs/icons' <NumberInput accessor ="strobe_duty" leftIcon ={IconNames .FLASH } />