0 Tk

input-base

Import

import InputBase from '@mui/material/InputBase';
// or
import { InputBase } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic.

Props of the native component are also available.

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.
autoFocus bool - If true, the input element is focused during the first mount.
classes object - Override or extend the styles applied to the component. See CSS classes API below for more details.
color ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string - The color of the component. It supports both default and custom theme colors.
components { Input?: elementType, Root?: elementType } {} The components used for each slot inside.
componentsProps { input?: object, root?: object } {} The extra props for the slot components.
defaultValue any - The default value. Use when the component is not controlled.
disabled bool - If true, the component is disabled.
disableInjectingGlobalStyles bool false If true, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount.
endAdornment node - End InputAdornment for this component.
error bool - If true, the input will indicate an error.
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 element type ‘input’ The component used for the input element.
inputProps object {} Attributes applied to the input element.
inputRef ref - Pass a ref to the input element.
margin ‘dense’ | ‘none’ - If dense, will adjust vertical spacing.
maxRows number | string - Maximum number of rows to display when multiline option is set to true.
minRows number | string - Minimum number of rows to display when multiline option is set to true.
multiline bool false If true, a TextareaAutosize element is rendered.
name string - Name attribute of the input element.
onBlur func - Callback fired when the input is blurred.
onChange func - Callback fired when the value is changed.
onInvalid func - Callback fired when the input doesn’t satisfy its constraints.
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.
required bool - If true, the input element is required.
rows number | string - Number of rows to display when multiline option is set to true.
size ‘medium’ | ‘small’ | string - The size of the component.
slotProps { input?: object, root?: object } {} The extra props for the slot components.
slots { input?: elementType, root?: elementType } {} The components used for each slot inside.
startAdornment node - Start InputAdornment for this component.
sx Array<func | object | bool> | func | object - The system prop that allows defining system overrides as well as additional CSS styles.
type string ‘text’ Type of the input element.
value any - The value of the input element, required for a controlled component.

The ref is forwarded to the root element.

Theme Default Props

You can use MuiInputBase to change the default props of this component with the theme.

CSS Classes

Class name Rule name Description
.Mui-disabled Styles applied to the root element if disabled={true}.
.Mui-error State class applied to the root element if error={true}.
.Mui-focused Styles applied to the root element if the component is focused.
(Other classes as in the original document)

Customization

You can override the style of the component using one of these customization options:

Source Code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.