Numeric Input
Introduction
The NumericInput
component provides controls for easily inputting,
incrementing, and decrementing numeric values.
Values in numeric inputs can be incremented or decremented using both keyboard and mouse interactions.
Keyboard interactions
↑/↓
- change the value by one step (default:±1
)Shift + ↑/↓
- change the value by one major step (default:±10
)Alt + ↑/↓
- change the value by one minor step (default:±0.1
)
Mouse interactions
Click ⌃/⌄
- change the value by one step (default:±1
)Shift + Click ⌃/⌄
- change the value by one major step (default:±10
)Alt + Click ⌃/⌄
- change the value by one minor step (default:±0.1
)
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
Live Playgrounds coming soon!
Usage
NumericInput
API Reference
NumericInput
Prop Name | Required? | Type | Description |
---|---|---|---|
allowNumericCharactersOnly | false | boolean | Whether to allow only floating-point number characters in the field, mimicking the native `input[type="number"]`. |
buttonPosition | false | "left" | "right" | "none" | The position of the buttons with respect to the input field. |
clampValueOnBlur | false | boolean | Whether the value should be clamped to `[min, max]` on blur. The value will be clamped to each bound only if the bound is defined. Note that native `input[type="number"]` controls do *NOT* clamp on blur. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
disabled | false | boolean | Whether the input is non-interactive. |
fill | false | boolean | Whether the numeric input should take up the full width of its container. |
inputRef | false | (ref: HTMLInputElement | null) => any | Ref handler that receives HTML `<input>` element backing this component. |
intent | false | Intent | Visual intent color to apply to element. |
large | false | boolean | If set to `true`, the input will display with larger styling. This is equivalent to setting `Classes.LARGE` via className on the parent control group and on the child input group. |
leftIcon | false | IconName | MaybeElement | Name of a Blueprint UI icon (or an icon element) to render on the left side of input. |
majorStepSize | false | number | null | The increment between successive values when <kbd>shift</kbd> is held. Pass explicit `null` value to disable this interaction. |
max | false | number | The maximum value of the input. |
min | false | number | The minimum value of the input. |
minorStepSize | false | number | null | The increment between successive values when <kbd>alt</kbd> is held. Pass explicit `null` value to disable this interaction. |
placeholder | false | string | The placeholder text in the absence of any value. |
rightElement | false | Element | Element to render on right side of input. For best results, use a minimal button, tag, or small spinner. |
selectAllOnFocus | false | boolean | Whether the entire text field should be selected on focus. |
selectAllOnIncrement | false | boolean | Whether the entire text field should be selected on increment. |
stepSize | false | number | The increment between successive values when no modifier keys are held. |
value | false | number | string | The value to display in the input field. |
Related Reading
Blueprint Reference