数字输入框

数字输入组件为用户提供一个用于输入整数值的字段，以及用于增加或减少值的按钮。

NumberInput API

导入

import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput';
// or
import { Unstable_NumberInput as NumberInput } from '@mui/base';

了解更多关于差异的信息，请阅读这篇关于最小化捆绑包大小的指南。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
defaultValue	number	-	默认值。当组件不受控制时使用。
disabled	bool	-	如果为 `true`，则组件被禁用。该 prop 默认为从父 FormControl 组件继承的值 (`false`)。
endAdornment	node	-	此输入的后置装饰。
error	bool	-	如果为 `true`，则 `input` 将通过在 input 上设置 `aria-invalid` 属性并在根元素上设置 `baseui--error` 类来指示错误。
id	string	-	`input` 元素的 id。
max	number	-	最大值。
min	number	-	最小值。
onChange	func	-	在值被限制并更改后触发的回调 - 当 `input` 失去焦点或步进器按钮被触发时。当值未设置时，使用 `undefined` 调用。签名：`function(event: React.FocusEvent \| React.PointerEvent \| React.KeyboardEvent, value: number \| undefined) => void` `event` 回调的事件源 `value` 组件的新值
onInputChange	func	-	在应用限制之前，当 `input` 值在每次按键后更改时触发的回调。请注意，`event.target.value` 可能包含超出 `min` 和 `max` 范围或以其他方式“无效”的值。签名：`function(event: React.ChangeEvent) => void` `event` 回调的事件源。
placeholder	string	-	在用户输入值之前，`input` 中显示的简短提示。
readOnly	bool	false	如果为 `true`，则 `input` 元素变为只读。步进器按钮保持活动状态，此外它们现在可以通过键盘聚焦。
required	bool	-	如果为 `true`，则 `input` 元素为必填项。该 prop 默认为从父 FormControl 组件继承的值 (`false`)。
shiftMultiplier	number	-	如果在增加或减少值时按住 shift 键，则应用于 `step` 的乘数。默认为 `10`。
slotProps	{ decrementButton?: func \| object, incrementButton?: func \| object, input?: func \| object, root?: func \| object }	{}	用于 NumberInput 内部每个插槽的 props。
slots	{ decrementButton?: elementType, incrementButton?: elementType, input?: elementType, root?: elementType }	{}	用于 InputBase 内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
startAdornment	node	-	此输入的前置装饰。
step	number	-	每次增加或减少时值变化的量。
value	number	null	当前值。当组件受控时使用。

ref 被转发到根元素。

插槽 (Slots)

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称	类名	默认组件	描述
root	.base-NumberInput-root	`'div'`	渲染根元素的组件。
input	.base-NumberInput-input	`'input'`	渲染 input 的组件。
incrementButton	.base-NumberInput-incrementButton	`'button'`	渲染增加按钮的组件。
decrementButton	.base-NumberInput-decrementButton	`'button'`	渲染减少按钮的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名	描述
.base--disabled	如果 `disabled={true}`，则应用于根元素的类名。
.base--error	如果 `error={true}`，则应用于根元素的状态类。
.base--focused	如果组件获得焦点，则应用于根元素的类名。
.base--readOnly	如果 `readOnly={true}`，则应用于根元素的状态类。
.base-NumberInput-adornedEnd	如果提供了 `endAdornment`，则应用于根元素的类名。
.base-NumberInput-adornedStart	如果提供了 `startAdornment`，则应用于根元素的类名。
.base-NumberInput-formControl	如果组件是 `FormControl` 的后代，则应用于根元素的类名。