Number Field

NumberField is an unstyled spinbutton control. It combines a native number input with increment/decrement buttons, optional scrub area, wheel and keyboard stepping, min/max/step constraints, cancelable changes, commit events, and Field integration.

Use Number Field for exact numeric input, Slider for range input, and Meter for read-only values.

Anatomy

• #scrub: Custom content for the optional drag scrub area.
• #decrement: Content inside the decrement button.
• #increment: Content inside the increment button.

The native type="number" input is generated by the component and owns keyboard, form, and role="spinbutton" behavior. Style it with ui.input.

Usage

<script setup lang="ts">
import { NumberField } from "akaza-ui";
import { ref } from "vue";

const seats = ref<number | null>(3);
</script>

<template>
  <NumberField v-model="seats" :min="1" :max="10" />
</template>

Examples

Min, max, and step

Use min, max, and step for button, keyboard, wheel, and input normalization.

<script setup lang="ts">
import { ref } from "vue";
import { NumberField } from "akaza-ui";

const seats = ref<number | null>(3);
</script>

<template>
  <NumberField v-model="seats" :min="1" :max="10" :step="1" />
</template>

Decimal values

Decimals work with step. By default, values snap to the nearest step.

<template>
  <NumberField v-model="ratio" :min="0" :max="1" :step="0.05" />
</template>

Scrub area

Add scrub-label or #scrub to let pointer users drag horizontally to change the value.

<template>
  <NumberField v-model="amount" scrub-label="Drag" :min="0" :max="100" />
</template>

Change vs commit

value-change fires before every accepted value update. value-commit fires after completed interactions such as blur, button click, wheel step, keyboard step, or scrub release.

<template>
  <NumberField
    v-model="quantity"
    @value-change="(value) => draft = value"
    @value-commit="(value) => save(value)"
  />
</template>

Field integration

NumberField inherits metadata from Field, including name, required, invalid state, and described-by ids. Native invalid state from required/min/max/step constraints is revealed after input, blur, or invalid submit; it is not shown on initial render.

<template>
  <Field label="CPU cores" name="cpu" required>
    <NumberField v-model="cpu" :min="1" :max="16" />
  </Field>
</template>

Drafts, bounds, and reset

Typing a finite number emits value-change without immediately snapping or clamping it. This permits intermediate values such as 1 while entering 12 with min="10". On blur after an edit, the value snaps to the step grid and clamps to min/max before value-commit. A supplied out-of-range value is validated on blur; merely focusing and leaving it does not silently repair external state.

Increment/decrement remain available when empty. They start from min when present, otherwise zero, apply the requested step, then clamp. Canceled changes restore the accepted input value. Native form reset restores the mount-time value and clears interaction state; a canceled reset leaves both unchanged.

API Reference

Props

Emits

Slots

UI Options

Styling Hooks

Plain class applies to the root wrapper. Use ui.input for the actual input.

Native data-akaza-invalid appears after interaction or invalid submit. Controlled invalid state from the invalid prop or parent Field appears immediately.

Keyboard

Mouse wheel changes the value only while the input is focused. Set disableWheelChange to opt out.