Skip to content
Yuzur1ha Open

Component referenceDraft

Number field

NumberField uses a text spinbutton with custom increment and decrement actions. Decimal stepping avoids binary floating-point drift.

Updated

Design notes

Only the step icons scale on press. Focus and error borders live above the button backgrounds, and keyboard input remains available.

Design sourceOpen in Figma

Number field design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

0–99 · step 1. Use buttons or ↑ / ↓; Home / End jumps to the limits.

4

−1 to 1 · step 0.1. Values are normalized when editing ends.

0.2

content/components/number-field/demo.tsx

import { useState } from "react"
import { NumberField } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function NumberDemo() {
  const [value, setValue] = useState<number | null>(4)
  const [fraction, setFraction] = useState<number | null>(0.2)
  return (
    <>
      <NumberField
        label="Number"
        value={value}
        onValueChange={setValue}
        min={0}
        max={99}
        hint="0–99 · step 1. Use buttons or ↑ / ↓; Home / End jumps to the limits."
        incrementLabel="Increase"
        decrementLabel="Decrease"
      />
      <DemoResult>{value ?? "—"}</DemoResult>
      <NumberField
        label="Decimal number"
        value={fraction}
        onValueChange={setFraction}
        min={-1}
        max={1}
        step={0.1}
        hint="−1 to 1 · step 0.1. Values are normalized when editing ends."
        incrementLabel="Increase decimal"
        decrementLabel="Decrease decimal"
      />
      <DemoResult>{fraction ?? "—"}</DemoResult>
      <NumberField
        label="Disabled"
        defaultValue={8}
        disabled
        incrementLabel="Increase"
        decrementLabel="Decrease"
      />
    </>
  )
}

API

NumberField

A text spinbutton with exact decimal stepping and custom increment/decrement buttons. Native input attributes and ref target the text input; value changes use onValueChange.

NumberFieldProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
hintstringNo—Supporting field guidance, associated with the control.
errorstringNo—Error message. Replaces hint text and marks the field invalid.
valuenumber | nullNo—Controlled finite number or null for an empty field.
defaultValuenumber | nullNonullInitial finite number or null when uncontrolled.
onValueChange((value: number | null) => void)No—Called with the edited/committed number or null when cleared.
minnumberNo—Optional finite lower bound. Must not exceed max.
maxnumberNo—Optional finite upper bound. Must not be less than min.
stepnumberNo1Positive finite decimal increment; stepping is anchored to min or zero.
incrementLabelstringYes—Accessible name of the increment action.
decrementLabelstringYes—Accessible name of the decrement action.
disabledbooleanNo—Disables the native control.
readOnlybooleanNo—Keeps the current value readable and focusable while preventing editing.
requiredbooleanNo—Requires a non-empty native control value during form validation.
namestringNo—Native form submission field name.
placeholderstringNo—Text shown when the control has no value.
onKeyDownKeyboardEventHandler<HTMLInputElement>No—Native key handler. Prevent default to skip built-in Arrow/Home/End/Enter handling.
onFocusFocusEventHandler<HTMLInputElement>No—Called when the native control receives focus.
onBlurFocusEventHandler<HTMLInputElement>No—Called when the native control loses focus.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.