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)
|