Component NumberInput

NumberInput

A single-line text input specialised for numeric values, with − and + stepper buttons.

use yororen_ui::headless::number_input::number_input;

number_input("quantity")
    .min(0.0).max(100.0).step(1.0)
    .value(self.quantity)
    .placeholder("0")
    .on_change({
        let entity = cx.entity();
        move |new: f64, _, cx| entity.update(cx, |s, _| s.quantity = new);
    })
    .on_increment({
        let entity = cx.entity();
        move |next: f64, _, cx| entity.update(cx, |s, _| s.quantity = next);
    })
    .on_decrement({
        let entity = cx.entity();
        move |next: f64, _, cx| entity.update(cx, |s, _| s.quantity = next);
    })
    .render(cx, window)

Props

Method	Purpose
placeholder(text)	Hint shown when empty.
value(v)	Current value.
min(v) / max(v)	Allowed range.
step(v)	Step size; steppers snap to multiples of this.
disabled(v)	Disable interaction.
on_change(closure)	Fn(f64, &mut Window, &mut App) + 'static + Send + Sync. Fires on typed changes.
on_increment(closure)	Fn(f64, &mut Window, &mut App) + 'static + Send + Sync. Renderer has already clamped to [min, max].
on_decrement(closure)	Same shape as on_increment.
has_custom_bg(v) / custom_bg(hsla)	Override background.
has_custom_border(v) / custom_border(hsla)	Override border.
has_custom_focus_border(v) / custom_focus_border(hsla)	Override focus border.
custom_text_color(hsla)	Override text color.

Factory takes (id) only. .render(cx, window) returns AnyElement. The boot step from TextInput covers this component too.

See also: TextInput, Slider, SearchInput.