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)
• validate(|raw: &str| bool): custom validation function, returns true if valid
• 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 valid f64 format (digits, ., -, scientific notation like 1.5e-10).
• Use .validate(...) to add custom validation rules (e.g., disallow negative numbers).
• 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.

Validate examples

// Only allow integers (no decimal point)
number_input()
    .validate(|s| !s.contains('.'))

// Disallow negative numbers
number_input()
    .validate(|s| !s.starts_with('-'))

// Allow only positive integers
number_input()
    .validate(|s| s.parse::<f64>().map(|n| n >= 0.0).unwrap_or(false))