Number Input

Use catnip-input-number when users enter a single numeric value with optional stepper controls. For plain text, email, password, or textarea, use Input. For multiple string tags, use Chip Input.

Behaviour

• State: Bind model-value / .modelValue as number | null. Clear the field to emit null; use placeholder (default "0") for empty-state hint text only.
• Bounds: Set min and max for validation and to disable − / + at the limits.
• Step: step controls button and arrow-key increments (default 1) and max fractional precision (0.1 → up to 1 decimal, 0.01 → up to 2). Values round to that precision on blur and after stepping. While typing, decimals are not padded (e.g. 3 stays 3 until you type .24 or use a stepper).
• Decimals: Set decimal-separator to , or . for display and typing (default .).
• Grouping: Use separate-at="3" with separator="," for thousands-style display. Grouping applies on blur and after stepper clicks. separator and decimal-separator must not be the same character when grouping is enabled.

Composition (shared with Input)

• Labels: label prop or label slot; label.action / label.suffix match Input. For custom controls, use Field Label standalone.
• Supporting text: Pass supporting-text on the host—do not mount FieldSupportingText manually.

Intents and status

The intent prop matches Input: neutral, warning, danger (aria-invalid), success. See Input — Guidelines — Intents and Status.

Best practices

• Prefer min / max over only app-level validation when the allowed range is known upfront.
• Enable grouping for large integers users read often (account balances, counts); omit it for short codes or PIN-like values.
• Do not rely on placeholder alone for required fields—use required and visible labels.