Movatterモバイル変換

[0]ホーム
URL:

Skip to contentSkip to content

TextField API

API reference docs for the React TextField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import TextFieldfrom'@mui/material/TextField';// orimport{ TextField}from'@mui/material';

Learn about the difference byreading this guide on minimizing bundle size.



TheTextField is a convenience wrapper for the most common cases (80%).It cannot be all things to all people, otherwise the API would grow out of control.

Advanced Configuration

It's important to understand that the text field is a simple abstractionon top of the following components:

If you wish to alter the props applied to theinput element, you can do so as follows:

const inputProps={step:300,};return<TextFieldid="time"type="time"inputProps={inputProps}/>;

For advanced cases, please look at the source of TextField by clicking on the"Edit this page" button above. Consider either:

  • using the upper case props for passing values directly to the components
  • using the underlying components directly as shown in the demos

Props

Props of theFormControl component are also available.

NameTypeDefaultDescription
autoCompletestring-

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about itfollowing the specification.

autoFocusboolfalse

Iftrue, theinput element is focused during the first mount.

classesobject-

Override or extend the styles applied to the component.

SeeCSS classes API below for more details.

color'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'

The color of the component. It supports both default and custom theme colors, which can be added as shown in thepalette customization guide.

defaultValueany-

The default value. Use when the component is not controlled.

disabledboolfalse

Iftrue, the component is disabled.

errorboolfalse

Iftrue, the label is displayed in an error state.

FormHelperTextPropsobject-

Props applied to theFormHelperText element.

Deprecated－UseslotProps.formHelperText instead. This prop will be removed in a future major release. SeeMigrating from deprecated APIs for more details.
fullWidthboolfalse

Iftrue, the input will take up the full width of its container.

helperTextnode-

The helper text content.

idstring-

The id of theinput element. Use this prop to makelabel andhelperText accessible for screen readers.

InputLabelPropsobject-

Props applied to theInputLabel element. Pointer events likeonClick are enabled if and only ifshrink istrue.

Deprecated－UseslotProps.inputLabel instead. This prop will be removed in a future major release. SeeMigrating from deprecated APIs for more details.
inputPropsobject-

Attributes applied to theinput element.

Deprecated－UseslotProps.htmlInput instead. This prop will be removed in a future major release. SeeMigrating from deprecated APIs for more details.
InputPropsobject-

Props applied to the Input element. It will be aFilledInput,OutlinedInput orInput component depending on thevariant prop value.

Deprecated－UseslotProps.input instead. This prop will be removed in a future major release. SeeMigrating from deprecated APIs for more details.
inputRefref-

Pass a ref to theinput element.

labelnode-

The label content.

margin'dense'
| 'none'
| 'normal'		'none'

Ifdense ornormal, will adjust vertical spacing of this and contained components.

maxRowsnumber
| string		-

Maximum number of rows to display when multiline option is set to true.

minRowsnumber
| string		-

Minimum number of rows to display when multiline option is set to true.

multilineboolfalse

Iftrue, atextarea element is rendered instead of an input.

namestring-

Name attribute of theinput element.

onChangefunc-

Callback fired when the value is changed.

Signature:function(event: object) => void
  • eventThe event source of the callback. You can pull out the new value by accessingevent.target.value (string).
placeholderstring-

The short hint displayed in theinput before the user enters a value.

requiredboolfalse

Iftrue, the label is displayed as required and theinput element is required.

rowsnumber
| string		-

Number of rows to display when multiline option is set to true.

selectboolfalse

Render aSelect element while passing the Input element toSelect asinput parameter. If this option is set you must pass the options of the select as children.

SelectPropsobject-

Props applied to theSelect element.

Deprecated－UseslotProps.select instead. This prop will be removed in a future major release. SeeMigrating from deprecated APIs for more details.
size'medium'
| 'small'
| string		'medium'

The size of the component.

slotProps{ formHelperText?: func
| object, htmlInput?: func
| object, input?: func
| object, inputLabel?: func
| object, select?: func
| object }		{}

The props used for each slot inside.

slots{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType }{}

The components used for each slot inside.

sxArray<func
| object
| bool>
| func
| object		-

The system prop that allows defining system overrides as well as additional CSS styles.

See the`sx` page for more details.

typestring-

Type of theinput element. It should bea valid HTML5 input type.

valueany-

The value of theinput element, required for a controlled component.

variant'filled'
| 'outlined'
| 'standard'		'outlined'

The variant to use.

The component cannot hold a ref.

Inheritance

While not explicitly documented above, the props of theFormControl component are also available in TextField. You can take advantage of this totarget nested components.

Theme default props

You can useMuiTextField to change the default props of this componentwith the theme.

Slots

Slot nameClass nameDefault componentDescription
root.MuiTextField-rootFormControlThe component that renders the root.
inputOutlinedInputThe component that renders the input.
inputLabelInputLabelThe component that renders the input's label.
htmlInput'input'The html input element.
formHelperTextFormHelperTextThe component that renders the helper text.
selectSelectThe component that renders the select.

Source code

If you did not find the information in this page, consider having a look at theimplementation of the component for more detail.

[8]ページ先頭
©2009-2025 Movatter.jp