Input

Props

PropTypeDefaultDescription
autoCompletestringThis 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.
autoFocusboolIf true, the input element will be focused during the first mount.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
color'primary' | 'secondary'The color of the component. It supports those theme colors that make sense for this component.
defaultValueanyThe default input element value. Use when the component is not controlled.
disabledboolIf true, the input element will be disabled.
disableUnderlineboolIf true, the input will not have an underline.
endAdornmentnodeEnd InputAdornment for this component.
errorboolIf true, the input will indicate an error. This is normally obtained via context from FormControl.
fullWidthboolfalseIf true, the input will take up the full width of its container.
idstringThe id of the input element.
inputComponentelementType'input'The component used for the input element. Either a string to use a HTML element or a component.
inputPropsobjectAttributes applied to the input element.
inputRefrefPass a ref to the input element.
margin'dense' | 'none'If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.
multilineboolfalseIf true, a textarea element will be rendered.
namestringName attribute of the input element.
onChangefuncCallback 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).
placeholderstringThe short hint displayed in the input before the user enters a value.
readOnlyboolIt prevents the user from changing the value of the field (not from interacting with the field).
requiredboolIf true, the input element will be required.
rowsnumber | stringNumber of rows to display when multiline option is set to true.
rowsMaxnumber | stringMaximum number of rows to display when multiline option is set to true.
startAdornmentnodeStart InputAdornment for this component.
typestring'text'Type of the input element. It should be a valid HTML5 input type.
valueanyThe value of the input element, required for a controlled component.