Number field React component - Material UI (original) (raw)

+

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.

Number Field

Enter value between 10 and 40

Number Field (Small)

Enter value between 10 and 40

Number Field with Error

Enter value between 10 and 40

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.

Press Enter to start editing

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.