Number Input

The catnip-input-number custom element is a single numeric field with decrement and increment controls, optional digit grouping, and the same integrated label and supporting-text patterns as Input and Chip Input. Shared field behaviour is summarised on Inputs overview.

Overview

• Value (v-model): model-value / .modelValue is number | null. An empty field emits null (placeholder such as "0" is display-only).
• Steppers: Trailing − / + buttons adjust the value by step (default 1), respecting min / max when set.
• Keyboard: Arrow Up / Arrow Down step while the control is focused.
• Digit grouping: Set separate-at (e.g. 3) and separator (,**, **.**, or space) to format the integer part for display (e.g. **1,234,567`). The canonical value stays unformatted.
• Forms: Submitted values are raw numbers without grouping separators.

Live example

Accessibility

• Label: Use the label prop or label slot; for / id wiring is handled automatically.
• Steppers: Accessible names from bundled locale keys (inputNumber.decrement, inputNumber.increment).
• Invalid state: intent="danger" sets aria-invalid="true" on the control; aria-describedby includes supporting text when present.