Class name applied to {{nodeName}} if {{conditions}}.

State class applied to {{nodeName}} if {{conditions}}.

The default value. Use when the component is not controlled.

If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>Mui-error</code> class on the root element.

The id of the <code>input</code> element.

Callback fired after the value is clamped and changes - when the <code>input</code> is blurred or when the stepper buttons are triggered. Called with <code>undefined</code> when the value is unset.

Callback fired when the <code>input</code> value changes after each keypress, before clamping is applied. Note that <code>event.target.value</code> may contain values that fall outside of <code>min</code> and <code>max</code> or are otherwise &quot;invalid&quot;.

If <code>true</code>, the <code>input</code> element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable.

If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

Multiplier applied to <code>step</code> if the shift key is held while incrementing or decrementing the value. Defaults to <code>10</code>.

The props used for each slot inside the NumberInput.

The components used for each slot inside the InputBase. Either a string to use a HTML element or a component.

The amount that the value changes on each increment or decrement.

The current value. Use when the component is controlled.

NumberInput

bool

node

string

number

func

{ decrementButton?: func<br>&#124;&nbsp;object, incrementButton?: func<br>&#124;&nbsp;object, input?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }

shape

{ decrementButton?: elementType, incrementButton?: elementType, input?: elementType, root?: elementType }

root

input

The component that renders the increment button.

incrementButton

The component that renders the decrement button.

decrementButton

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

The <code>id</code> attribute of the input element.

If <code>true</code>, the component will be disabled.

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute.

If <code>true</code>, the <code>input</code> will be focused.

Return value from the <code>useFormControlContext</code> hook.

Resolver for the decrement button slot&#39;s props.

Resolver for the increment button slot&#39;s props.

The dirty <code>value</code> of the <code>input</code> element when it is in focus.

If <code>true</code>, the decrement button will be disabled. e.g. when the <code>value</code> is already at <code>min</code>

If <code>true</code>, the increment button will be disabled. e.g. when the <code>value</code> is already at <code>max</code>

If <code>true</code>, the <code>input</code> will indicate that it&#39;s required.

The clamped <code>value</code> of the <code>input</code> element.

useNumberInput

unknown

boolean

React.Ref&lt;HTMLInputElement&gt;

(event?: React.FocusEvent) =&gt; void

(event: React.FocusEvent&lt;HTMLInputElement&gt; | React.PointerEvent | React.KeyboardEvent, value: number | undefined) =&gt; void

React.MouseEventHandler

React.FocusEventHandler

React.ChangeEventHandler&lt;HTMLInputElement&gt;

FormControlState | undefined

&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseNumberInputDecrementButtonSlotProps&lt;TOther&gt;

&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseNumberInputIncrementButtonSlotProps&lt;TOther&gt;

&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseNumberInputInputSlotProps&lt;TOther&gt;

&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseNumberInputRootSlotProps&lt;TOther&gt;

Number Input

NumberInput API

Import

Props

Slots

CSS classes