HyNumberInput

A form-associated numeric stepper: a text field for typing an exact value, flanked by − / + buttons for click-or-hold increment. Pairs with hy-slider to give users both approximate (slider) and precise (number input) control over the same numeric field.

The primitive is deliberately general-purpose — value is a plain number, units are display-only (suffix), and DTCG / locale / composite values belong in consumer code. That keeps it equally useful for quantity pickers, dashboard bounds, Tuner token editors, and any future form builder.

Form integration

Implements the Form-Associated Custom Elements API — value participates in FormData and validates against min, max, step, and required.

Keyboard

• ArrowUp / ArrowDown: step by step
• Shift + Arrow / PageUp / PageDown: step by shiftStep (10× by default)
• Home / End: jump to min / max when finite
• Enter: commit (blur-equivalent)

Pointer

Single click on ± steps by step (or shiftStep when Shift is held). Press-and-hold auto-repeats with an accelerating cadence. Release fires a single change. pointercancel and pointerleave stop the repeat.

Examples

Basic quantity picker

<hy-number-input label="Quantity" min="1" max="99" value="1"></hy-number-input>

Fractional step with suffix

<hy-number-input label="Line height" min="0" max="2" step="0.01" value="1.5" suffix="em">
</hy-number-input>

Error state

<hy-number-input label="Bitrate" value="400" max="320" error-message="Exceeds license tier limit">
</hy-number-input>

Dense table variant (no visible buttons)

<hy-number-input size="small" hide-buttons value="12"></hy-number-input>

Filled emphasis + pill shape

<hy-number-input emphasis="filled" pill value="5"></hy-number-input>

Events

• input - Fired on every keystroke or step. Detail:
• change - Fired on blur, Enter, or pointer release after stepping. Detail:

Slots

• prefix - Content before the input (e.g. a $ icon).
• suffix - Display-only unit. The suffix attribute is the shorthand.

Methods

select()

Selects all text in the underlying input.

stepUp()

Increment the value by n steps (default 1). Clamps to max, fires input then change, and is a no-op when disabled or readonly.

stepDown()

Decrement the value by n steps (default 1). Clamps to min, fires input then change.