Specialized Input Components

Pre-configured numeric input components for common measurement units, angles, and multi-dimensional data types.

Props

All specialized input components share common props:

Prop	Type	Default	Description
`value`	`number` or `number[]`	-	Current value(s)
`onChange` / `onValuesChange`	`(value) => void`	-	Value change callback
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size variant
`step`	`number`	varies	Step size for drag modifications

Additional Props for Angle Inputs

Prop	Type	Default	Description	Components
`display`	`'rad' \| 'deg' \| 'pi'`	`'rad'`	Display format for angle values	`RadInput`, `EulerRadInput`, `PresetsRadInput`
`presets`	`[number, number, number]`	-	Three preset values in radians	`PresetsRadInput`

Measurement Units

Input components with built-in unit suffixes for common measurements.

CmInput

InchInput

TimeInput

const [length, setLength] = useState(150);
<CmInput size="sm" value={length} onChange={setLength} />

const [width, setWidth] = useState(2.5);
<InchInput size="sm" value={width} onChange={setWidth} />

const [time, setTime] = useState(30);
<TimeInput size="sm" value={time} onChange={setTime} />

Angular Measurements

Specialized inputs for angle values in degrees and radians.

DegInput

RadInput (default)

rad

RadInput (display as degrees)

RadInput (display as π multiples)

const [degrees, setDegrees] = useState(90);
<DegInput size="sm" value={degrees} onChange={setDegrees} />

const [radians, setRadians] = useState(Math.PI / 2);

// Display in radians (default)
<RadInput size="sm" value={radians} onChange={setRadians} />

// Display in degrees (value still stored as radians)
<RadInput size="sm" value={radians} onChange={setRadians} display="deg" />

// Display as multiples of π
<RadInput size="sm" value={radians} onChange={setRadians} display="pi" />

RadInput Display Formats

The RadInput component now supports a display prop to control how the value is shown:

Display Mode	Description	Example
`"rad"` (default)	Shows value in radians	1.57 rad
`"deg"`	Converts to/from degrees	90°
`"pi"`	Shows as multiples of π	0.5π

Note: The value is always stored internally as radians regardless of display format.

Presets with RadInput

The PresetsRadInput component combines RadInput with preset buttons for common angle values.

Display in Degrees

PresetsRadInput (display in degrees)

const [angle, setAngle] = useState(0);

// Common angle presets in radians (stored internally)
const commonAngles = [0, Math.PI/2, Math.PI]; // 0°, 90°, 180°

<PresetsRadInput 
  presets={commonAngles} 
  value={angle} 
  onChange={setAngle}
  display="deg"
  size="sm"
/>

Display as π Multiples

PresetsRadInput (display as π multiples)

const [angle, setAngle] = useState(Math.PI/4);

// Fractional π presets
const fractionalPi = [0, Math.PI/4, Math.PI/2]; // 0π, 0.25π, 0.5π

<PresetsRadInput 
  presets={fractionalPi} 
  value={angle} 
  onChange={setAngle}
  display="pi"
  size="sm"
/>

The preset buttons automatically display in the selected format, making it easy to select common angle values while maintaining consistency with the input display.

Integer Input

Specialized input for integer values only.

IntInput

const [count, setCount] = useState(42);
<IntInput size="sm" value={count} onChange={setCount} />

Vector Inputs

Multi-dimensional input components for 3D vectors, rotations, and quaternions.

Vec3Input

EulerInput (degrees)

x°

y°

z°

EulerRadInput (radians)

xrad

yrad

zrad

EulerRadInput (display as degrees)

x°

y°

z°

QuaternionInput

const [position, setPosition] = useState([1, 0, 0]);
<Vec3Input value={position} onValuesChange={setPosition} size="sm" />

const [rotation, setRotation] = useState([0, 90, 0]);
<EulerInput value={rotation} onValuesChange={setRotation} size="sm" />

// EulerRadInput stores values in radians
const [rotationRad, setRotationRad] = useState([0, Math.PI/2, Math.PI]);

// Display in radians (default)
<EulerRadInput value={rotationRad} onValuesChange={setRotationRad} size="sm" />

// Display in degrees (values still stored as radians)
<EulerRadInput value={rotationRad} onValuesChange={setRotationRad} size="sm" display="deg" />

// Display as multiples of π
<EulerRadInput value={rotationRad} onValuesChange={setRotationRad} size="sm" display="pi" />

const [quaternion, setQuaternion] = useState([1, 0, 0, 0]);
<QuaternionInput value={quaternion} onValuesChange={setQuaternion} size="sm" />

Euler Angle Inputs

Two components are available for Euler angles:

Component	Storage Unit	Display Options
`EulerInput`	Degrees	Always displays in degrees
`EulerRadInput`	Radians	`"rad"` (default), `"deg"`, `"pi"`

The EulerRadInput component supports the same display prop as RadInput for flexible display formats while maintaining radian values internally.

Drag Interaction Features

All specialized input components inherit the advanced drag interactions from InputNumbers:

Vertical drag: Select multiple inputs by dragging up/down
Horizontal drag: Modify selected values by dragging left/right
Modifier keys:
- Shift + drag: 5x step size
- Alt + drag: 0.2x step size