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.