输入框

Input 组件为用户提供了一个用于输入和编辑文本的字段。

Input API

导入

import { Input } from '@mui/base/Input';
// or
import { Input } from '@mui/base';

通过阅读本指南，了解关于最小化包大小的更多信息来了解差异。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
autoComplete	字符串	-	此属性帮助用户更快地填写表单，尤其是在移动设备上。名称可能会令人困惑，因为它更像是自动填充。您可以按照规范了解更多信息。
autoFocus	布尔值	-	如果为 `true`，则在首次挂载时 `input` 元素会获得焦点。
className	字符串	-	应用于根元素的类名。
defaultValue	任意类型	-	默认值。当组件不受控制时使用。
disabled	布尔值	-	如果为 `true`，则组件将被禁用。此属性默认为从父 FormControl 组件继承的值 (`false`)。
endAdornment	节点	-	此输入框的后置装饰。
error	布尔值	-	如果为 `true`，则 `input` 将通过在 input 上设置 `aria-invalid` 属性并在根元素上设置 `baseui--error` 类来指示错误。此属性默认为从父 FormControl 组件继承的值 (`false`)。
id	字符串	-	`input` 元素的 id。
maxRows	数字	-	当 multiline 选项设置为 true 时，要显示的最大行数。
minRows	数字	-	当 multiline 选项设置为 true 时，要显示的最小行数。
multiline	布尔值	false	如果为 `true`，则会渲染 `textarea` 元素。
name	字符串	-	`input` 元素的 name 属性。
placeholder	字符串	-	用户在输入值之前，在 `input` 中显示的简短提示。
readOnly	布尔值	-	它阻止用户更改字段的值（而不是与字段交互）。
required	布尔值	-	如果为 `true`，则 `input` 元素为必填项。此属性默认为从父 FormControl 组件继承的值 (`false`)。
rows	数字	-	当 multiline 选项设置为 true 时，要显示的行数。
slotProps	{ input?: func \| object, root?: func \| object }	{}	用于 Input 内部每个 slot 的 props。
slots	{ input?: elementType, root?: elementType, textarea?: elementType }	{}	用于 InputBase 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
startAdornment	节点	-	此输入框的前置装饰。
type	'button' \| 'checkbox' \| 'color' \| 'date' \| 'datetime-local' \| 'email' \| 'file' \| 'hidden' \| 'image' \| 'month' \| 'number' \| 'password' \| 'radio' \| 'range' \| 'reset' \| 'search' \| 'submit' \| 'tel' \| 'text' \| 'time' \| 'url' \| 'week'	'text'	`input` 元素的类型。它应该是有效的 HTML5 input 类型。
value	任意类型	-	`input` 元素的值，受控组件的必需属性。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Input-root	`'div'`	渲染根元素的组件。
input	.base-Input-input	`'input'`	渲染 input 的组件。
textarea		`'textarea'`	渲染 textarea 的组件。

CSS 类

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

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