On this page

Number input

Numeric input with drag-to-scrub on the label, arrow key stepping, and shift for larger increments.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/number-input

Examples

Default

X
Y
"use client"

import { useState } from "react"

With labels and suffix

W
H
R°
%%
"use client"

import { useState } from "react"

Interaction

  • Drag on label — pointer left/right to scrub the value. Hold Shift for larger increments.
  • Arrow keys — Up/Down to step the value when the input is focused. Hold Shift for shiftStep.
  • Click label — focuses and selects the input for direct typing.
  • Enter — commits the typed value.
  • Escape — cancels editing and blurs.

Props

PropTypeDefaultDescription
valuenumber—Current value
onChange(value: number) => void—Called when the value changes
onStart() => void—Called once at the start of a drag or before a step. Useful for pushing undo snapshots.
labelstring—Inline label with drag-to-scrub cursor
suffixstring—Trailing text (e.g. °, %, px)
minnumber—Minimum value
maxnumber—Maximum value
stepnumber1Increment per pixel of drag or arrow key press
shiftStepnumber10Increment when Shift is held
precisionnumber2Decimal places for display
disabledboolean—Disables input and drag