NumberInput
NumberInput is a compact number-adjustment control.
It renders a minus button, a central text display, and a plus button inside one bordered field. This makes it useful for quantities, counts, and compact settings where stepwise adjustment matters more than free-form typing.
Example
use fission::prelude::*;
#[fission_reducer(SetQuantity)]
fn set_quantity(state: &mut OrderState, ctx: &mut ReducerContext<OrderState>) {
let Some(change) = ctx.input.text_change() else {
return;
};
if let Ok(quantity) = change.new_text.parse::<f32>() {
state.quantity = quantity.clamp(1.0, 10.0);
}
}
let widget: Widget = NumberInput {
value: view.state().quantity as f32,
display_text: Some(view.state().quantity.to_string()),
min: Some(1.0),
max: Some(10.0),
step: 1.0,
on_increment: Some(increment_quantity_action),
on_decrement: Some(decrement_quantity_action),
on_input: Some(ctx.bind(SetQuantity, reduce_with!(set_quantity))),
..Default::default()
}
.into();
The reducer owns the real numeric value and decides how to parse, clamp, or
reject the edit exposed by ctx.input.text_change().
Field table
Field | Type | Meaning | Notes / default behavior |
|---|---|---|---|
id | Option<WidgetId> | Stable identity for the inner text field. | Defaults to None. |
value | f32 | Current numeric value. | Defaults to 0.0. |
display_text | Option<String> | Exact text shown in the field. | If None, the widget formats value with format!("{}", value). |
min | Option<f32> | Intended minimum value. | Present for product meaning, but not enforced by the current widget implementation. |
max | Option<f32> | Intended maximum value. | Present for product meaning, but not enforced by the current widget implementation. |
step | f32 | Intended adjustment step. | Defaults to 1.0, but the current widget does not apply it automatically. Your reducer does. |
field_width | Option<f32> | Width of the central text field. | If None, width is estimated from display_text. |
button_size | Option<f32> | Size of the plus and minus buttons. | Defaults to 32.0 with a lower bound of 28.0. |
gap | Option<f32> | Spacing between the buttons and field. | Defaults to 4.0. |
on_increment | Option<ActionEnvelope> | Action fired by the plus button. | Defaults to None. |
on_decrement | Option<ActionEnvelope> | Action fired by the minus button. | Defaults to None. |
on_input | Option<ActionEnvelope> | Action fired for typed edits in the central field. | Preserves the bound action; parse ctx.input.text_change().new_text in the reducer. |
Current behavior and limitations
The central field is rendered with TextInput
and forwards on_input. min, max, and step are meaningful configuration
fields for your product logic, but the widget does not enforce or apply them by
itself.
Typed edits arrive as text because incomplete numeric input such as an empty
field, -, or a trailing decimal point is not always an f32. Parse inside the
reducer and decide whether to retain a separate draft string when intermediate
states matter. The plus and minus buttons continue to dispatch
on_increment and on_decrement independently.
Specific advice
Keep the canonical number in state as a number, not only as a string. If you also need a draft text representation, store that draft explicitly so validation and formatting stay predictable.
Production checklist
For NumberInput, review the fields that change behavior before treating the widget as finished: id, value, display_text, min, max, step. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.
•
If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.
•
Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.
•
Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.
•
Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.
If a screen starts repeating the same NumberInput setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.
Related
TextInput, Slider, TimePicker, and FormControl.
Previous
GestureDetector
Next
Radio