OutlinedInput API
API reference docs for the React OutlinedInput component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import OutlinedInput from '@mui/material/OutlinedInput';
// or
import { OutlinedInput } from '@mui/material';
Props of the InputBase component are also available.
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.
Type:string
Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. The prop defaults to the value ('primary'
) inherited from the parent FormControl component.
Type:'primary'
| 'secondary'
| string
The components used for each slot inside.
This prop is an alias for the slots
prop. It's recommended to use the slots
prop instead.
Type:{ Input?: elementType, Root?: elementType }
Default:{}
If true
, the component is disabled. The prop defaults to the value (false
) inherited from the parent FormControl component.
Type:bool
If true
, the input
will indicate an error. The prop defaults to the value (false
) inherited from the parent FormControl component.
Type:bool
The component used for the input
element. Either a string to use a HTML element or a component.
Type:elementType
Default:'input'
The label of the input
. It is only used for layout. The actual labelling is handled by InputLabel
.
Type:node
If dense
, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value ('none'
) inherited from the parent FormControl component.
Type:'dense'
| 'none'
Callback fired when the value is changed.
Type:func
function(event: React.ChangeEvent) => void
event
The event source of the callback. You can pull out the new value by accessingevent.target.value
(string).
It prevents the user from changing the value of the field (not from interacting with the field).
Type:bool
If true
, the input
element is required. The prop defaults to the value (false
) inherited from the parent FormControl component.
Type:bool
The components used for each slot inside.
This prop is an alias for the components
prop, which will be deprecated in the future.
Type:{ input?: elementType, root?: elementType }
Default:{}
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
ref
is forwarded to the root element.Inheritance
While not explicitly documented above, the props of the InputBase component are also available in OutlinedInput. You can take advantage of this to target nested components.
Theme default props
You can use MuiOutlinedInput
to change the default props of this component with the theme.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Styles applied to the root element if endAdornment
is provided.
Rule name:adornedEnd
Styles applied to the root element if startAdornment
is provided.
Rule name:adornedStart
Styles applied to the root element if the color is secondary.
Rule name:colorSecondary
Styles applied to the input element if endAdornment
is provided.
Rule name:inputAdornedEnd
Styles applied to the input element if startAdornment
is provided.
Rule name:inputAdornedStart
Styles applied to the input element if multiline={true}
.
Rule name:inputMultiline
Styles applied to the input element if size="small"
.
Rule name:inputSizeSmall
Styles applied to the input element if type="search"
.
Rule name:inputTypeSearch
Styles applied to the root element if multiline={true}
.
Rule name:multiline
Styles applied to the NotchedOutline element.
Rule name:notchedOutline
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.