Component NumberInput

NumberInput

A single-line text input specialised for numeric values. Has a min, max, and step. The renderer ships − and + stepper buttons that fire on_increment / on_decrement with the next value.

Import

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

Minimal example

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, _window, cx| {
            entity.update(cx, |s, _cx| s.quantity = new);
        }
    })
    .on_increment({
        let entity = cx.entity();
        move |next: f64, _window, cx| {
            entity.update(cx, |s, _cx| s.quantity = next);
        }
    })
    .on_decrement({
        let entity = cx.entity();
        move |next: f64, _window, cx| {
            entity.update(cx, |s, _cx| s.quantity = next);
        }
    })
    .render(cx, window)

Props

Method	Purpose
placeholder(text)	Hint shown when empty.
min(v)	Minimum value.
max(v)	Maximum value.
step(v)	Step size. on_increment / on_decrement snap to multiples of this.
value(v)	Current value.
disabled(v)	Disable interaction.
on_change(closure)	Fn(f64, &mut Window, &mut App) + 'static + Send + Sync.
on_increment(closure)	Fn(f64, &mut Window, &mut App) + 'static + Send + Sync. The renderer already clamped to [min, max].
on_decrement(closure)	Fn(f64, &mut Window, &mut App) + 'static + Send + Sync.
has_custom_bg(v) / custom_bg(hsla)	Override the background.
has_custom_border(v) / custom_border(hsla)	Override the border.
has_custom_focus_border(v) / custom_focus_border(hsla)	Override the focus border.
custom_text_color(hsla)	Override the text color.

Notes

• Factory takes (id) only — no cx argument.
• .render(cx, window) is two-arg and returns AnyElement. The window is required for IME / paste.
• on_change fires on every accepted change (typed or programmatic), on_increment / on_decrement only fire on the stepper buttons.
• The state is minted internally by the renderer.

See also

TextInput, Slider, SearchInput