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)

Examples

Usage

NumericInput

import React from "react";
import { NumericInput } from "@commure/components-foundation";
function MyNumericInput() {
return (
<NumericInput
placeholder="Enter a number..."
majorStepSize={20}
max={100}
selectAllOnFocus
/>
);
}
export default MyNumericInput;

API Reference

NumericInput

Prop NameRequired?TypeDescription
allowNumericCharactersOnlyfalsebooleanWhether to allow only floating-point number characters in the field, mimicking the native `input[type="number"]`.
buttonPositionfalse"left" | "right" | "none"The position of the buttons with respect to the input field.
clampValueOnBlurfalsebooleanWhether 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.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether the input is non-interactive.
fillfalsebooleanWhether the numeric input should take up the full width of its container.
inputReffalse(ref: HTMLInputElement | null) => anyRef handler that receives HTML `<input>` element backing this component.
intentfalseIntentVisual intent color to apply to element.
largefalsebooleanIf 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.
leftIconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render on the left side of input.
majorStepSizefalsenumber | nullThe increment between successive values when <kbd>shift</kbd> is held. Pass explicit `null` value to disable this interaction.
maxfalsenumberThe maximum value of the input.
minfalsenumberThe minimum value of the input.
minorStepSizefalsenumber | nullThe increment between successive values when <kbd>alt</kbd> is held. Pass explicit `null` value to disable this interaction.
placeholderfalsestringThe placeholder text in the absence of any value.
rightElementfalseElementElement to render on right side of input. For best results, use a minimal button, tag, or small spinner.
selectAllOnFocusfalsebooleanWhether the entire text field should be selected on focus.
selectAllOnIncrementfalsebooleanWhether the entire text field should be selected on increment.
stepSizefalsenumberThe increment between successive values when no modifier keys are held.
valuefalsenumber | stringThe value to display in the input field.

Related Reading

Blueprint Reference