文本框API

React TextField 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件的使用示例和详细信息，请访问组件演示页面

导入

import TextField from '@mui/material/TextField';
// or
import { TextField } from '@mui/material';

通过阅读此关于最小化 bundle 大小的指南，了解它们之间的区别。

TextField 是最常见情况（80%）的便捷封装器。它不可能满足所有人的需求，否则 API 将会失控。

高级配置

重要的是要理解，文本框是以下组件之上的简单抽象

如果您希望更改应用于 input 元素的属性，您可以按如下方式操作

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

对于高级用例，请点击上方“编辑此页面”按钮查看 TextField 的源代码。考虑以下任一方法：

使用大写属性将值直接传递给组件
直接使用演示中所示的底层组件

属性

FormControl 组件的属性也可用。

名称	类型	默认值	描述
autoComplete	string	-	此属性帮助用户更快地填写表单，尤其是在移动设备上。名称可能会造成混淆，因为它更像是自动填充。您可以按照规范了解更多信息。
autoFocus	bool	false	如果为 `true`，则在首次挂载期间 `input` 元素将获得焦点。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
color	'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	组件的颜色。它支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。
defaultValue	any	-	默认值。当组件不受控制时使用。
disabled	bool	false	如果为 `true`，则禁用组件。
error	bool	false	如果为 `true`，则标签以错误状态显示。
FormHelperTextProps	object	-	应用于 `FormHelperText` 元素的属性。已弃用－请改用 `slotProps.formHelperText`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
fullWidth	bool	false	如果为 `true`，则输入将占据其容器的完整宽度。
helperText	node	-	辅助文本内容。
id	string	-	`input` 元素的 id。使用此属性使 `label` 和 `helperText` 可供屏幕阅读器访问。
InputLabelProps	object	-	应用于 `InputLabel` 元素的属性。当且仅当 `shrink` 为 `true` 时，才会启用诸如 `onClick` 之类的指针事件。已弃用－请改用 `slotProps.inputLabel`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
inputProps	object	-	属性应用于 `input` 元素。已弃用－请改用 `slotProps.htmlInput`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
InputProps	object	-	应用于 Input 元素的属性。根据 `variant` 属性值，它将是 `FilledInput`、`OutlinedInput` 或 `Input` 组件。已弃用－请改用 `slotProps.input`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
inputRef	ref	-	将 ref 传递给 `input` 元素。
label	node	-	标签内容。
margin	'dense' \| 'none' \| 'normal'	'none'	如果为 `dense` 或 `normal`，将调整此组件和包含组件的垂直间距。
maxRows	number \| string	-	当 multiline 选项设置为 true 时，要显示的最大行数。
minRows	number \| string	-	当 multiline 选项设置为 true 时，要显示的最小行数。
multiline	bool	false	如果为 `true`，则渲染 `textarea` 元素而不是 input。
name	string	-	`input` 元素的 Name 属性。
onChange	func	-	当值更改时触发的回调。签名:`function(event: object) => void` `event` 回调的事件源。您可以通过访问 `event.target.value`（字符串）来提取新值。
placeholder	string	-	用户输入值之前显示在 `input` 中的简短提示。
required	bool	false	如果为 `true`，则标签显示为必填项，并且 `input` 元素为必填项。
rows	number \| string	-	当 multiline 选项设置为 true 时，要显示的行数。
select	bool	false	渲染 `Select` 元素，同时将 Input 元素作为 `input` 参数传递给 `Select`。如果设置了此选项，则必须将 select 的选项作为子元素传递。
SelectProps	object	-	应用于 `Select` 元素的属性。已弃用－请改用 `slotProps.select`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
size	'medium' \| 'small' \| string	'medium'	组件的大小。
slotProps	{ formHelperText?: func \| object, htmlInput?: func \| object, input?: func \| object, inputLabel?: func \| object, select?: func \| object }	{}	用于每个插槽的属性。
slots	{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType }	{}	用于每个插槽的组件。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
type	string	-	`input` 元素的类型。它应该是有效的 HTML5 输入类型。
value	any	-	`input` 元素的值，受控组件必需。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的变体。

该组件不能持有 ref。

继承

虽然上面没有明确记录，但 FormControl 组件的属性在 TextField 中也可用。您可以利用它来定位嵌套组件。

主题默认属性

您可以使用 MuiTextField 通过主题更改此组件的默认属性。

插槽

插槽名称	类名	默认组件	描述
root	.MuiTextField-root	`表单控件`	渲染根元素的组件。
input		`轮廓输入框`	渲染 input 的组件。
inputLabel		`输入框标签`	渲染 input 标签的组件。
htmlInput		`'input'`	html input 元素。
formHelperText		`表单辅助文本`	渲染辅助文本的组件。
select		`选择器`	渲染 select 的组件。

源代码

如果您在此页面中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。