InputNumber

Numeric field with keyboard stepping and embedded spin buttons. Height 28 / 34 / 40, radius --gk-radius-md, and a soft focus ring.

gk-input still uses --gk-radius-sm. Unifying that radius is a follow-up so form rows do not mix corners.

Demos

Basic

Bind value and listen for change or update:value with e.detail.value. input streams while typing. Commit happens on blur, Enter, a spin button, or an arrow key.

NT$

Value: 1280

<gk-input-number :value="amount" @change="onAmount">
  <span slot="prefix">NT$</span>
</gk-input-number>

Min, max, step

The button at the limit is disabled. The field stays editable.

件

<gk-input-number :value="stepped" min="1" max="9" step="1" @change="onStepped">
  <span slot="suffix">件</span>
</gk-input-number>

Precision

When precision is omitted, decimal places come from step (0.5 → 1).

kg

<gk-input-number value="12.5" step="0.5" precision="1">
  <span slot="suffix">kg</span>
</gk-input-number>

Sizes

<gk-input-number size="sm" value="2"></gk-input-number>
<gk-input-number size="md" value="2"></gk-input-number>
<gk-input-number size="lg" value="2"></gk-input-number>

Status

<gk-input-number status="success" value="8"></gk-input-number>
<gk-input-number status="warning" value="0"></gk-input-number>
<gk-input-number status="error" placeholder="Required"></gk-input-number>

Disabled and readonly

Readonly omits the spin buttons. Disabled fades the whole field.

件

<gk-input-number disabled value="4"></gk-input-number>
<gk-input-number readonly value="36">
  <span slot="suffix">件</span>
</gk-input-number>

Buttons on both sides

button-placement="both" puts − and + outside the field. The default right stacks chevrons at the end. To turn buttons off in Vue, bind .showButton="false" — a present boolean attribute is always true.

<gk-input-number button-placement="both" value="3"></gk-input-number>

API

Properties

Name	Type	Default	Notes
value	number | null	null	Empty when null
min / max	number	—	Clamp on commit and on step
step	number	1	Arrow and button increment
precision	number	from step	Decimal places
size	sm | md | lg	md	28 / 34 / 40
status	success | warning | error	—
disabled / readonly	boolean	false	Readonly hides steppers
show-button	boolean	true
button-placement	right | both	right
placeholder / name	string	—	name participates in a native form

Events

Name	Detail
input	{ value } while typing or stepping. Native input does not cross the shadow root
change, update:value	{ value } on commit
focus, blur

Slots and parts

Slots: prefix, suffix. Parts: base, input, prefix, suffix, controls, increment, decrement.

The input is role="spinbutton". Buttons are labelled Increase / Decrease, or 增加 / 減少 when the language is Chinese. Holding a button to repeat is a follow-up.