BetaPublic beta — Read the release notes
Documentation

Number Input

Numeric input with increment/decrement controls and locale-aware formatting.

Package
@solidiom/number-input
Version
0.6.0
Status
experimental

Generated from the package's public source.

API

DecrementButtoncomponent

                        DecrementButton(props: NumberInputButtonProps): Element
                      

Props

class?
string — CSS class.
style?
string | CSSProperties — Inline styles.

children: Element

View source

IncrementButtoncomponent

                        IncrementButton(props: NumberInputButtonProps): Element
                      

Props

class?
string — CSS class.
style?
string | CSSProperties — Inline styles.

children: Element

View source

Inputcomponent

                        Input(props: NumberInputInputProps): Element
                      

Props

class?
string — CSS class.
onBlur?
EventHandler<HTMLInputElement, FocusEvent> — Native blur event handler.
onFocus?
EventHandler<HTMLInputElement, FocusEvent> — Native focus event handler.
placeholder?
string — Placeholder text.
style?
string | CSSProperties — Inline styles.

View source

NumberInputButtonPropsinterface

Props

class?
string — CSS class.
style?
string | CSSProperties — Inline styles.

children: Element

View source

NumberInputInputPropsinterface

Props

class?
string — CSS class.
onBlur?
EventHandler<HTMLInputElement, FocusEvent> — Native blur event handler.
onFocus?
EventHandler<HTMLInputElement, FocusEvent> — Native focus event handler.
placeholder?
string — Placeholder text.
style?
string | CSSProperties — Inline styles.

View source

NumberInputRootPropsinterface

Props

allowMouseWheel?
boolean — Whether mouse wheel adjusts the value when the input is focused.
clampValueOnBlur?
boolean — Whether to clamp the value to [min, max] on blur. Default: true.
class?
string — Container CSS class.
defaultValue?
number — Default value (uncontrolled).
disabled?
boolean — Whether the input is disabled.
formatOptions?
NumberFormatOptions — Intl.NumberFormat options for display formatting.
id?
string — Element id for label association.
invalid?
boolean — Whether the input is in an invalid state.
locale?
string — BCP 47 locale string for number formatting.
max?
number — Maximum allowed value.
min?
number — Minimum allowed value.
name?
string — Form field name.
onValueChange?
(value: number, details: { … }) => void — Called when the value changes.
readOnly?
boolean — Whether the input is read-only.
required?
boolean — Whether the input is required.
step?
number — Step size for increment/decrement.
style?
string | CSSProperties — Container inline styles.
value?
number — Current value (controlled).

children: Element

View source

Rootcomponent

                        Root(props: NumberInputRootProps): Element
                      

Props

allowMouseWheel?
boolean — Whether mouse wheel adjusts the value when the input is focused.
clampValueOnBlur?
boolean — Whether to clamp the value to [min, max] on blur. Default: true.
class?
string — Container CSS class.
defaultValue?
number — Default value (uncontrolled).
disabled?
boolean — Whether the input is disabled.
formatOptions?
NumberFormatOptions — Intl.NumberFormat options for display formatting.
id?
string — Element id for label association.
invalid?
boolean — Whether the input is in an invalid state.
locale?
string — BCP 47 locale string for number formatting.
max?
number — Maximum allowed value.
min?
number — Minimum allowed value.
name?
string — Form field name.
onValueChange?
(value: number, details: { … }) => void — Called when the value changes.
readOnly?
boolean — Whether the input is read-only.
required?
boolean — Whether the input is required.
step?
number — Step size for increment/decrement.
style?
string | CSSProperties — Container inline styles.
value?
number — Current value (controlled).

children: Element

View source