Unit Input

A number field with a unit picker that stores the value in a base unit, with byte presets and typed units like 2gb.

@drift-ui/unit-inputRegistry JSONGitHubOpen in v0

Saved as 512000000 bytes

Try it: switch to GB, or type 2gb.

Keyboard

↑↓
Step the number in the current unit
Shift↑Shift↓PageUpPageDown
Step by ten
HomeEnd
Jump to min or max
Enter
Apply typed text such as 2gb

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

unit-input-usage.tsx
import { BYTE_UNITS } from "@/lib/unit-input-utils"
import { UnitInput } from "@/components/ui/unit-input"

export function MemoryLimitField({
  value,
  onChange,
}: {
  value: number | null
  onChange: (bytes: number | null) => void
}) {
  return (
    <UnitInput
      aria-label="Memory limit"
      value={value}
      onValueChange={onChange}
      units={BYTE_UNITS}
      defaultUnit="MB"
      min={128_000_000}
      max={10_000_000_000}
    />
  )
}

UnitInput

A spinbutton text field with a unit select. The value stays in the base unit, and changing the unit only changes what is on screen.

Prop
valuenumber | nullControlled value in the base unit.
defaultValuenumber | nullDefaultnullInitial value when uncontrolled.
onValueChange(value: number | null) => voidCalled with the value in the base unit, or null when cleared.
units{ id: string; label: string; factor: number }[]DefaultBYTE_UNITSUnits to pick from. factor is how many base units one of it holds.
unitstringControlled unit id.
defaultUnitstringInitial unit id when uncontrolled. Defaults to the largest unit that keeps the number at 1 or more.
onUnitChange(unit: string) => voidCalled with the unit id when the select or typed text changes it.
minnumberMinimum value in the base unit.
maxnumberMaximum value in the base unit.
stepnumberDefault1Arrow key step, in the current unit.
disabledbooleanDisables the field and the unit select.
namestringSubmits the base value through a hidden input.

Other props go to the <input>.

Binary units

BINARY_BYTE_UNITS steps by 1024, for operating system quantities.

Binary scaling by 1024, so 2 GiB is 2,147,483,648 bytes.

Your own units

A unit is { id, label, factor }. min and max stay in the base unit, and step moves the number on screen.

Between 1 Mbps and 10 Gbps, stored in bits per second.

Forms

name submits the base value through a hidden input.

components/ui/unit-input.tsx
CtrlK