Component NumberInput

NumberInput

A numeric input with stepper buttons.

The text field is controlled by the numeric value (non-numeric characters are not retained).

Example

use gpui::ElementId;
use yororen_ui::component::number_input;

let view = number_input()
    .key(ElementId::from(("settings", "retries")))
    .min(0.0)
    .max(10.0)
    .step(1.0)
    .value(3.0)
    .on_change(|value, _window, _cx| {
        // value: f64
    });

When to use

• Numeric settings where step buttons are convenient
• Values with min/max bounds

Not a good fit:

• Free-form numeric typing with partial input (this component intentionally sanitizes input)

API

• number_input(): constructor
• id(...) / key(...): stable identity
• value(f64): initial/controlled value
• min(f64) / max(f64): bounds
• step(f64): step amount (0 becomes 1)
• placeholder("...")
• disabled(bool)
• on_change(|value, window, cx| ...): fired when value changes
• Styling: bg/border/focus_border/text_color/height

Interaction and behavior

• The input is kept controlled: it always reflects the current numeric value.
• Typing sanitizes to digits + at most one .; other characters are ignored.
• The -/+ buttons apply step and clamp to min/max.

Defaults

• Step: 1.0 (if you set step(0.0), it is treated as 1.0)
• Placeholder: "0"

Tips

• Prefer NumberInput when you want bounded values; prefer TextInput when you need permissive typing.