Implementation:Apache Druid FancyNumericInput

Knowledge Sources	Apache_Druid
Domains	Web_Console, Form_Controls
Last Updated	2026-02-10 10:00 GMT

Overview

FancyNumericInput is an enhanced numeric input component that supports SQL expression evaluation, step-based increment/decrement, and configurable min/max clamping.

Description

The component wraps a Blueprint InputGroup with up/down chevron buttons for incrementing and decrementing values. It can parse and evaluate simple SQL arithmetic expressions (addition, subtraction, multiplication, division, and PI) typed into the input field, converting them to numeric values. The component supports minor, normal, and major step sizes controlled via Shift and Alt key modifiers.

Usage

Used throughout the Druid web console wherever numeric configuration values need to be entered, such as partition sizes, thresholds, or replication counts.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/fancy-numeric-input/fancy-numeric-input.tsx
• Lines: 1-235

Signature

export interface FancyNumericInputProps {
  className?: string;
  intent?: Intent;
  fill?: boolean;
  large?: boolean;
  small?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  placeholder?: string;
  onBlur?: InputGroupProps['onBlur'];
  value: number | undefined;
  defaultValue?: number;
  onValueChange(value: number): void;
  onValueEmpty?: () => void;
  min?: number;
  max?: number;
  minorStepSize?: number;
  stepSize?: number;
  majorStepSize?: number;
  arbitraryPrecision?: boolean;
}

export const FancyNumericInput: React.NamedExoticComponent<FancyNumericInputProps>;

Import

import { FancyNumericInput } from './components/fancy-numeric-input/fancy-numeric-input';

I/O Contract

Inputs

Name	Type	Required	Description
value	number or undefined	Yes	The current numeric value displayed in the input
onValueChange	(value: number) => void	Yes	Callback fired when the numeric value changes
onValueEmpty	() => void	No	Callback fired when the input is cleared to an empty string
defaultValue	number	No	Fallback value used when value is undefined
min	number	No	Minimum allowed value for clamping
max	number	No	Maximum allowed value for clamping
stepSize	number	No	Default step increment (defaults to 1)
minorStepSize	number	No	Step size when Alt key is held (defaults to stepSize)
majorStepSize	number	No	Step size when Shift key is held (defaults to stepSize * 10)
arbitraryPrecision	boolean	No	When true, disables rounding to minorStepSize increments
className	string	No	Additional CSS class name
intent	Intent	No	Blueprint intent for button styling
fill	boolean	No	Whether the input fills its container width
large	boolean	No	Use large size variant
small	boolean	No	Use small size variant
disabled	boolean	No	Disable the input
readOnly	boolean	No	Make the input read-only
placeholder	string	No	Placeholder text
onBlur	function	No	Blur event handler

Outputs

Name	Type	Description
JSX.Element	ControlGroup	A Blueprint ControlGroup containing an InputGroup and a vertical ButtonGroup with increment/decrement buttons

Usage Examples

Numeric input with min/max bounds

<FancyNumericInput
  value={partitionSize}
  onValueChange={setPartitionSize}
  min={1}
  max={1000}
  stepSize={10}
  placeholder="Enter partition size"
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development