@activelylearn/material-ui

Version:

Material-UI's workspace package

72 lines (57 loc) • 5.39 kB

Markdown

--- filename: /packages/material-ui/src/Input/Input.js ---  # 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 | false | 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 | union: string |  func | | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | Properties applied to the `input` element. | | inputRef | func | | 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 | 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`. | | placeholder | string | | The short hint displayed in the input before the user enters a value. | | 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 | 'text' | Type of the input element. It should be a valid HTML5 input type. | | value | union: string |  number |  arrayOf | | The input value, required for a controlled component. | Any other properties supplied will be spread to the root element (native element). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - `root` - `formControl` - `focused` - `disabled` - `underline` - `error` - `multiline` - `fullWidth` - `input` - `inputMarginDense` - `inputMultiline` - `inputType` - `inputTypeSearch` 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`. ## Demos - [Text Fields](/demos/text-fields)