<TextField id="filled-basic" label="Demo" />
Prop | Type | Default | Description |
---|---|---|---|
autoComplete | string | 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 it following the specification. | |
autoFocus | bool | false | If true, the input element will be focused during the first mount. |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
color | 'primary' | 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
defaultValue | any | The default value of the input element. | |
disabled | bool | false | If true, the input element will be disabled. |
displayCount | bool | false | If true, the count of characters will be displayed. The error state will be triggered if the count exceeds maxLength |
countProps | Partial<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>> | Props for the count span, only visible when displayCount is true | |
error | bool | false | If true, the label will be displayed in an error state. |
FormHelperTextProps | object | Props applied to the FormHelperText element. | |
fullWidth | bool | false | If true, the input will take up the full width of its container. |
helperText | node | The helper text content. When used with `error`, a screen reader user will be informed immediately of errors. | |
helperTextProps | Partial<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>> | Props for the count span, only visible when helperText has a value | |
id | string | The id of the input element. Use this prop to make label and helperText accessible for screen readers. | |
InputLabelProps | object | Props applied to the InputLabel element. | |
inputProps | object | Attributes applied to the input element. | |
InputProps | object | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value. | |
inputRef | ref | Pass a ref to the input element. | |
label | node | The label content. | |
margin | 'dense' | 'none' | 'normal' | If dense or normal, will adjust vertical spacing of this and contained components. | |
maxLength | number | 500 | When displayCount is true this will be the maximum length allowed and displayed before an error is triggered |
multiline | bool | false | If true, a textarea element will be rendered instead of an input. |
name | string | Name attribute of the input element. | |
onChange | func | Callback fired when the value is changed. Signature: function(event: object) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value (string). | |
placeholder | string | The short hint displayed in the input before the user enters a value. | |
required | bool | false | If true, the label is displayed as required and the input element` will be required. |
rows | number | string | Number of rows to display when multiline option is set to true. | |
maxRows | number | string | Maximum number of rows to display when multiline option is set to true. | |
size | 'medium' | 'small' | The size of the text field. | |
type | string | Type of the input element. It should be a valid HTML5 input type. | |
value | any | The value of the input element, required for a controlled component. |
NOTE: InputProps can be found here
<TextFieldid="outlined-multiline-static"label="Multiline"helperText="Simple"fullWidthmultilinerows={3}displayCountcountProps={{ className: 'display-count-class' }}requiredmaxLength={200}/>
() => {const [value, setValue] = React.useState('');return (<TextFieldid="outlined-multiline-static"label="Multiline"fullWidthhelperText="Show count after 5 chars"multilinemaxRows={5}displayCount={value.length > 5}required={false}maxLength={2500}onChange={(e) => setValue(e.target.value)}value={value}/>);};
<TextFieldrows={3}multilinelabel="Notice that when you focus the TextField, the text will shrink and truncate allowing for multiple lines of placeholder/label text. Truncation is automatically handled on focus based on this placeholder/label text length. There may be 1-3 lines visible after focus depending on the character length. Overflow is allowed before focus by design."fullWidth/>
<TextField required={false} id="standard-required" label="Optional" />
<TextField disabled id="standard-disabled" label="Disabled" />
<TextFieldid="standard-password-input"label="Password"type="password"autoComplete="current-password"/>
<TextFieldstyle={{ marginLeft: 'auto' }}id="standard-read-only-input"label="Read Only"defaultValue="Hello World"InputProps={{readOnly: true,}}/>
<TextFieldid="standard-number"label="Number"type="number"InputLabelProps={{shrink: true,}}/>
<TextFieldstyle={{ marginLeft: 'auto' }}id="standard-search"label="Search field"type="search"/>
<TextField error id="standard-error" label="Error" defaultValue="Hello World" />
<TextFieldid="standard-helperText"label="Helper text"defaultValue="Default Value"helperText="Some important text"helperTextProps={{ className: 'helper-text-class' }}/>
<TextFieldmultilinelabel="Helper text"defaultValue="Default Value"helperText="An extremely long helper text to show the wrapping behavior for multiline helper text, especially on mobile and its separation from the `displayCount` to the right."displayCountfullWidth/>
<TextFieldlabel="With normal TextField"id="outlined-start-adornment"InputProps={{startAdornment: <InputAdornment position="start">Kg</InputAdornment>,}}/>
() => {const [error, setError] = React.useState(false);const [errorMessage, setErrorMessage] = React.useState('');return (<div><div><TextFieldlabel="Try it out"onBlur={() => {if (!error) {setError(true);setErrorMessage('Data not valid');} else {setError(false);setErrorMessage('');}}}error={error}helperText={errorMessage}/></div><div><TextField label="Another" /></div></div>);};