Skip to content

PickersTextField API

API reference docs for the React PickersTextField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
// or
import { PickersTextField } from '@mui/x-date-pickers';
// or
import { PickersTextField } from '@mui/x-date-pickers-pro';

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

Props

NameTypeDefaultDescription
areAllSectionsEmpty*bool-

Is true if the current values equals the empty value. For a single item value, it means that value === null For a range value, it means that value === [null, null]

contentEditable*bool-

If true, the whole element is editable. Useful when all the sections are selected.

elements*Array<{ after: object, before: object, container: object, content: object }>-

The elements to render. Each element contains the prop to edit a section of the value.

color'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'		'primary'

The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

focusedbool-

If true, the component is displayed in focused state.

helperTextnode-

The helper text content.

hiddenLabelboolfalse

If true, the label is hidden. This is used to increase density for a FilledInput. Be sure to add aria-label to the input element.

InputPropsobject-

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

margin'dense'
| 'none'
| 'normal'		'none'

If dense or normal, will adjust vertical spacing of this and contained components.

requiredboolfalse

If true, the label will indicate that the input is required.

size'medium'
| 'small'		'medium'

The size of the component.

sxArray<func
| object
| bool>
| func
| object		-

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

variant'filled'
| 'outlined'
| 'standard'		'outlined'

The variant to use.

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiPickersTextField-fullWidthfullWidthStyles applied to the root element if fullWidth={true}.
.MuiPickersTextField-marginDensemarginDenseStyles applied to the root element if margin="dense".
.MuiPickersTextField-marginNormalmarginNormalStyles applied to the root element if margin="normal".
.MuiPickersTextField-rootrootStyles applied to the root element.

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