005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
62 lines
1.8 KiB
Markdown
62 lines
1.8 KiB
Markdown
---
|
||
productId: material-ui
|
||
title: Number field React component
|
||
components: Button, IconButton, InputLabel, FormControl, FormLabel, FormHelperText, OutlinedInput
|
||
---
|
||
|
||
# Number Field
|
||
|
||
<p class="description">A React component for capturing numeric input from users.</p>
|
||
|
||
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
||
Number Field is _not_ a built-in `@mui/material` component—it's composed of a [Base UI Number Field](https://base-ui.com/react/components/number-field) and styled to align with Material UI specs.
|
||
|
||
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.
|
||
|
||
<!-- #npm-tag-reference -->
|
||
|
||
<codeblock storageKey="package-manager">
|
||
|
||
```bash npm
|
||
npm install @base-ui-components/react
|
||
```
|
||
|
||
```bash pnpm
|
||
pnpm add @base-ui-components/react
|
||
```
|
||
|
||
```bash yarn
|
||
yarn add @base-ui-components/react
|
||
```
|
||
|
||
</codeblock>
|
||
|
||
## 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 component uses [text-field composition](/material-ui/react-text-field/#components) with end adornments for the increment and decrement buttons.
|
||
|
||
{{"demo": "FieldDemo.js"}}
|
||
|
||
## 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.
|
||
|
||
{{"demo": "SpinnerDemo.js"}}
|
||
|
||
## Base UI API
|
||
|
||
See the documentation below for a complete reference to all of the props.
|
||
|
||
- [`<NumberField />`](https://base-ui.com/react/components/number-field#api-reference)
|