pub fn SpNumberfield(_: SpNumberfieldProps) -> ElementExpand description
Single-line numeric input.
Maps to <sp-number-field>. Fires standard DOM input, focus, and blur events, exactly
like SpTextfield — including the same custom-element caveat: Dioxus’s event serializer
never populates event.target.value for a custom element, so reading the live value off the
DOM (not the synthetic event) is the caller’s job. value is passed as its string
representation; the element renders and edits it as a number internally. The field fills its
container’s inline size, leaving room for formatted values and validation icons. min/max, when
present, are passed through to the underlying SWC element, which natively disables its
increment/decrement stepper buttons once the value reaches the corresponding bound. Setting
readonly to true renders the SWC read-only state — the value stays visible and
selectable, but not editable — distinct from disabled, which additionally grays the field
out and suppresses the invalid treatment (the input’s border) entirely; readonly leaves
invalid’s border alone but SWC’s own :host([readonly]) .input rule pins the border color
to transparent regardless, so on a readonly field the border itself never visibly reflects
invalid either — confirmed against the rendered shadow-DOM stylesheet via the
verifying-begin-ui skill; there is no documented or supported readonly+invalid border
treatment in Spectrum. invalid still matters on a readonly field for two reasons that
don’t depend on the border: it sets aria-invalid for assistive tech, and it’s exactly what
gates whether SWC exposes the negative-help-text slot at all (see children) — so pass a
slotted SpHelpText there rather than inventing a non-standard visual override to
compensate for the missing border. step, when present, sets the amount the stepper
buttons/arrow keys/scroll wheel move the value by — pass "1" for an integer-typed cell so
the stepper can never land it on a fractional value. format_options supplies JSON-encoded
Intl.NumberFormat options for locale-aware display without changing the stored value.
children slots into the element’s light DOM, e.g. an SpHelpText with
slot: "negative-help-text" or slot: "help-text".
§Props
For details, see the props struct definition.