materialuiupgraded

Version:

Material-UI's workspace package

90 lines (69 loc) • 7.41 kB

Markdown

--- filename: /packages/material-ui/src/Input/Input.js title: Input API ---  # Input The API documentation of the Input React component. Learn more about the properties and the CSS customization points. ```js import Input from '@material-ui/core/Input'; ``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | autoComplete | string | | This property 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 here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill | | autoFocus | bool | | If `true`, the input will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | className | string | | The CSS class name of the wrapper element. | | defaultValue | union: string |  number | | The default input value, useful when not controlling the component. | | disabled | bool | | If `true`, the input 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 | | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | | inputComponent | union: string |  func |  object | | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | Attributes applied to the `input` element. | | inputRef | union: func |  object | | Use that property to pass a ref callback to the native input component. | | margin | enum: 'dense' |  'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | | 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`. | | 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 will be required. | | rows | union: string |  number | | Number of rows to display when multiline option is set to true. | | rowsMax | union: string |  number | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | | Type of the input element. It should be a valid HTML5 input type. | | value | union: string |  number |  bool |  arrayOf | | The input value, required for a controlled component. | Any other properties supplied will be spread to the root element ([InputBase](/api/input-base/)). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. | formControl | Styles applied to the root element if the component is a descendant of `FormControl`. | focused | Styles applied to the root element if the component is focused. | disabled | Styles applied to the root element if `disabled={true}`. | underline | Styles applied to the root element if `disableUnderline={false}`. | error | Styles applied to the root element if `error={true}`. | multiline | Styles applied to the root element if `multiline={true}`. | fullWidth | Styles applied to the root element if `fullWidth={true}`. | input | Styles applied to the `input` element. | inputMarginDense | Styles applied to the `input` element if `margin="dense"`. | inputMultiline | Styles applied to the `input` element if `multiline={true}`. | inputType | Styles applied to the `input` element if `type` is not "text"`. | inputTypeSearch | Styles applied to the `input` element if `type="search"`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Input/Input.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes/#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiInput`. ## Inheritance The properties 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](/demos/text-fields/)