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.

Focus strokes use the corresponding semantic border focus token for the Figma-supported neutral and danger states. Warning and success control borders use their semantic border tokens rather than content-color tokens.

Sizes

The control heights are 32px (s), 40px (m), and 48px (l). Decorative outer and focus strokes render inside those envelopes so they do not increase the measured height or the stepper target sizes.

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.