Number Field

A React component for capturing numeric input from users.

Number Field is not a built-in @mui/material component—it's composed of a Base UI Number Field and styled to align with Material UI specs.

As such, you must install Base UI before proceeding. The examples that follow can then be copied and pasted directly into your app. Note that Base UI is tree-shakeable, so the final bundle will only include the components used in your project.

npm install @base-ui-components/react

Usage

Select one of the demos below that fits your visual design needs.
Click Expand code in the toolbar.
Select the file that starts with ./components/.
Copy the code and paste it into your project.

Outlined field

The outlined field component uses text-field composition with end adornments for the increment and decrement buttons.

Number Field

Enter value between 10 and 40

Small and Error

Enter value between 10 and 40

<NumberField label="Number Field" min={10} max={40} />
<NumberField
  label="Small and Error"
  min={10}
  max={40}
  size="small"
  defaultValue={100}
  error
/>

<NumberField label="Number Field" min={10} max={40} />
<NumberField
  label="Small and Error"
  min={10}
  max={40}
  size="small"
  defaultValue={100}
  error
/>

Press Enter to start editing

Spinner field

For the spinner field component, the increment and decrement buttons are placed next to the outlined input. This is ideal for touch devices and narrow ranges of values.

Number Spinner

Small and Error

<NumberSpinner label="Number Spinner" min={10} max={40} />
<NumberSpinner
  label="Small and Error"
  min={10}
  max={40}
  size="small"
  defaultValue={100}
  error
/>

<NumberSpinner label="Number Spinner" min={10} max={40} />
<NumberSpinner
  label="Small and Error"
  min={10}
  max={40}
  size="small"
  defaultValue={100}
  error
/>

Press Enter to start editing

Base UI API

See the documentation below for a complete reference to all of the props.

<NumberField />

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.