Number Field

A React component for capturing numeric input from users.

Introduction

The Number Field integrates the best of both worlds:

Base UI provides unstyled, robust, and fully accessible number field.
Material UI components for the visual representation and styles.

It gives developers the flexibility to create various designs while keeping the same foundation for behavior and accessibility. Make sure to install Base UI before continuing the sections below.

npm install @base-ui-components/react

Usage

Pick a demo from below that fits your visual design needs.
Click "Expand code" from the toolbar
Select the file that starts with ./components/
Click the copy icon from the toolbar and paste it into your project.

Outlined field

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

The increment and decrement buttons are placed next to the outlined input. Best 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.