Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Number Field

A React component for capturing numeric input from users.

A number field is an input with increment and decrement buttons for capturing numeric input from users.

Material UI does not include a number field component out of the box, but this page provides components composed with the Base UI NumberField and styled to align with Material Design (MD2) specifications, so they can be used with Material UI.

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.

Installation

npm install @base-ui/react

Usage

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

Outlined field

The outlined field uses the same building-block components as Material UI's outlined TextField—FormControl, OutlinedInput, InputLabel, and FormHelperText—with end adornments for the increment and decrement buttons. See Text Field—Components for more details.

Enter value between 10 and 40

Enter value between 10 and 40

Enter value between 10 and 40

import * as React from 'react';
import Box from '@mui/material/Box';
import NumberField from './NumberField';

export default function FieldDemo() {
  return (
    <Box sx={{ display: 'grid', gap: 4 }}>
      <NumberField label="Number Field" min={10} max={40} />
      <NumberField label="Number Field (Small)" size="small" />
      <NumberField
        label="Number Field with Error"
        min={10}
        max={40}
        defaultValue={100}
        size="small"
        error
      />
    </Box>
  );
}

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.

import * as React from 'react';
import Box from '@mui/material/Box';
import NumberSpinner from './NumberSpinner';

export default function SpinnerDemo() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 4,
        justifyContent: 'center',
      }}
    >
      <NumberSpinner label="Number Spinner" min={10} max={40} />
      <NumberSpinner label="Number Spinner (Small)" size="small" />
      <NumberSpinner
        label="Spinner with Error"
        min={10}
        max={40}
        defaultValue={100}
        size="small"
        error
      />
    </Box>
  );
}

Base UI API

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

API

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