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

1import React from "react";
2import { NumericInput } from "@commure/components-foundation";
3
4function MyNumericInput() {
5  return (
6    <NumericInput
7      placeholder="Enter a number..."
8      majorStepSize={20}
9      max={100}
10      selectAllOnFocus
11    />
12  );
13}
14
15export default MyNumericInput;

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