--- filename: /packages/material-ui/src/Input/Input.js --- # Input API

The API documentation of the Input React component. Learn more about the props and the CSS customization points.

## Import ```js import Input from '@material-ui/core/Input'; // or import { Input } from '@material-ui/core'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). ## Component name The `MuiInput` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props | Name | 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](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | | autoFocus | bool | | 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](#css) below for more details. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default `input` element value. Use when the component is not controlled. | | disabled | bool | | If `true`, the `input` element will be disabled. | | disableUnderline | bool | | If `true`, the input will not have an underline. | | endAdornment | node | | End `InputAdornment` for this component. | | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | | fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | | inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a HTML element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | 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. | | readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | | required | bool | | If `true`, the `input` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | | rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | | value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element ([InputBase](/api/input-base/)). ## CSS | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | .MuiInput-root | Styles applied to the root element. | formControl | .MuiInput-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. | focused | .Mui-focused | Styles applied to the root element if the component is focused. | disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. | colorSecondary | .MuiInput-colorSecondary | Styles applied to the root element if color secondary. | underline | .MuiInput-underline | Styles applied to the root element if `disableUnderline={false}`. | error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. | marginDense | .MuiInput-marginDense | Styles applied to the `input` element if `margin="dense"`. | multiline | .MuiInput-multiline | Styles applied to the root element if `multiline={true}`. | fullWidth | .MuiInput-fullWidth | Styles applied to the root element if `fullWidth={true}`. | input | .MuiInput-input | Styles applied to the `input` element. | inputMarginDense | .MuiInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. | inputMultiline | .MuiInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. | inputTypeSearch | .MuiInput-inputTypeSearch | Styles applied to the `input` element if `type="search"`. You can override the style of the component thanks to one of these customization points: - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [`overrides` property](/customization/globals/#css). If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Input/Input.js) for more detail. ## Inheritance The props of the [InputBase](/api/input-base/) component are also available. You can take advantage of this behavior to [target nested components](/guides/api/#spread). ## Demos - [Text Fields](/components/text-fields/)