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 doc 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-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 TextField 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.