Skip to content
Navius

Number Field

Overview

Section titled “Overview”

Number Field is a numeric input with stepper buttons. The Root owns the authoritative double? value (null is empty) along with the min/max/step and clamp logic, and cascades it to the parts; it can be controlled (@bind-Value) or uncontrolled (DefaultValue). Three step sizes are exposed: Step for a plain arrow, LargeStep for Shift + Arrow and PageUp / PageDown, and SmallStep for Alt + Arrow. Parsing and formatting go through InvariantCulture, with an optional .NET numeric Format string for the display.

Pointer-lock scrub dragging, press-and-hold auto-repeat on the stepper buttons and locale-aware Intl formatting are not implemented.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.NumberField


<NaviusNumberField>
    <NaviusNumberFieldGroup>
        <NaviusNumberFieldDecrement />
        <NaviusNumberFieldInput />
        <NaviusNumberFieldIncrement />
    </NaviusNumberFieldGroup>
</NaviusNumberField>

Root

Section titled “Root”

Owns the value and the step/clamp logic. Renders a div.

Prop Type Default Description
Value double? null Controlled value; null is empty. Pair with ValueChanged (@bind-Value).
ValueChanged EventCallback<double?> - Fires when the controlled Value should change.
DefaultValue double? null Initial value when used uncontrolled.
Min double? null Lower bound. null leaves the value unbounded below.
Max double? null Upper bound. null leaves the value unbounded above.
Step double 1 Step for a plain ArrowUp / ArrowDown and for the stepper buttons. A value at or below 0 falls back to 1.
LargeStep double 10 Step for PageUp / PageDown and Shift + Arrow.
SmallStep double 0.1 Step for Alt + Arrow fine adjustments.
Disabled bool false Disables the field; stepping and text commits are refused.
ReadOnly bool false Makes the field read-only; stepping and text commits are refused.
Required bool false Marks the input required.
Format string? - .NET numeric format string for the display (e.g. "0.##"), applied with InvariantCulture.
ChildContent RenderFragment? - The field’s parts.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Group

Section titled “Group”

Wraps the input and the stepper buttons. Renders a div with role="group".

Prop Type Default Description
ChildContent RenderFragment? - The Input and the stepper buttons.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Input

Section titled “Input”

The editable field and the only focus target in the part tree. Renders an input with role="spinbutton" and inputmode="decimal". Its text is committed (parsed, clamped and reformatted) on change; unparseable text reverts to the current value.

Prop Type Default Description
Attributes IDictionary<string, object>? - Forwarded to the rendered input.

Increment

Section titled “Increment”

A stepper button that adds Step to the value. Rendered with tabindex="-1" (the Input is the focus target) and disabled at the Max bound. Renders a button.

Prop Type Default Description
ChildContent RenderFragment? - Button content.
Attributes IDictionary<string, object>? - Forwarded to the rendered button.

Decrement

Section titled “Decrement”

A stepper button that subtracts Step from the value. Rendered with tabindex="-1" and disabled at the Min bound. Renders a button.

Prop Type Default Description
ChildContent RenderFragment? - Button content.
Attributes IDictionary<string, object>? - Forwarded to the rendered button.

Data attributes

Section titled “Data attributes”
Part Attribute Description
Root, Group, Input data-disabled Present when the field is disabled.
Root, Group, Input data-readonly Present when the field is read-only.
Root, Group, Input data-required Present when the field is required.
Increment, Decrement data-disabled Present when that button is disabled: the field is disabled or read-only, or the value has reached that bound.

Keyboard interactions

Section titled “Keyboard interactions”

Focus is on the Input.

Key Behavior
ArrowUp Increases the value by Step.
ArrowDown Decreases the value by Step.
Shift + ArrowUp / Shift + ArrowDown Steps by LargeStep instead.
Alt + ArrowUp / Alt + ArrowDown Steps by SmallStep instead.
PageUp Increases the value by LargeStep.
PageDown Decreases the value by LargeStep.
Home Jumps to Min. No-op when Min is unset.
End Jumps to Max. No-op when Max is unset.

ARIA mechanism

Section titled “ARIA mechanism”

Implements the spinbutton WAI-ARIA APG pattern. The Input renders role="spinbutton" and sets aria-valuenow from the current value plus aria-valuemin / aria-valuemax from Min / Max, each omitted while that bound is unset. The stepper buttons carry aria-label="Increase" and aria-label="Decrease" and are removed from the tab order with tabindex="-1", so the Input is the single stop and the spinbutton keyboard map is the primary path. Every step is clamped into [Min, Max] before it is committed. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.