@dsherwin/mui-kit
v0.1.2
Published
Reusable MUI-based React components
Maintainers
dsherwinReadme
Mui Kit
- Mui Kit
Messages
A React component that provides a message handling context and UI for showing notifications. It utilizes context to expose functions for displaying error, success, info, and warning messages, as well as managing a busy state with a backdrop.
The component wraps its children with a context provider and renders Material-UI Snackbars to display messages of various severities. A backdrop is also included to indicate a busy state.
MessagesContext
MessagesContext is a React context used for managing and sharing message-related state and functionality across a React component tree. It provides access to the implementation of the IMessagesContext interface, which defines the structure and behavior of the message-related state.
useMessagesContext
useMessagesContext() is a React hook that grants access to the MessagesContext value. It should be used within a Messages provider, and allows consumers to easily trigger notifications and control loading indicators.
MuiKit
MuiKit is a React functional component designed to compose and render its children elements
within a specific structure comprising Messages and MuiPrompts components.
It acts as a wrapper component that provides a contextual layout and functionality for its children.
AlertZeroValue
AlertZeroValue is a constant object of type AlertProps. It initializes default properties for an alert component.
Properties:
- message: A string representing the alert message. Defaults to an empty string.
- title: A string representing the alert title. Defaults to an empty string.
- open: A boolean indicating whether the alert is open. Defaults to false.
- onCancel: A callback function executed when the alert cancel action is triggered. Defaults to an empty function.
- onSubmit: A callback function executed when the alert submit action is triggered. Defaults to an empty function.
Alert
A stateless functional component that renders an alert prompt to the user.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| onClose | () => void | | |
| `open` | `boolean` | | |
| onCancel | () => void | | |
| `onSubmit` | `() => void` | | |
| title | string | | |
| `message` | `string | Element` | | |
| buttonText | string | | |
| `buttonColor` | `"primary" | "secondary" | "error" | "info" | "success" | "warning"` | | |
| cancelButtonColor | "primary" | "secondary" | "error" | "info" | "success" | "warning" | `` | |
BasePromptZeroValue
BasePromptZeroValue is a default configuration object for the BasePromptProps type. This object defines the initial state and behavior for a prompt component.
Properties:
open(boolean): Indicates whether the prompt is visible or not. Default is false.onCancel(function): A callback function executed when the prompt is canceled. Default is a no-op function.onSubmit(function): A callback function executed when the prompt is submitted. Default is a no-op function.submitButtonDisabled(boolean): Determines if the submit button is disabled. Default is false.title(string): The title text displayed in the prompt. Default is an empty string.message(string): The message text displayed in the prompt. Default is an empty string.
BasePrompt
A functional React component that renders a customizable dialog prompt for user interactions.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| open | boolean | | |
| `onCancel` | `() => void` | | |
| onSubmit | () => void | | |
| `submitButtonDisabled` | `boolean` | | |
| title | string | | |
| `message` | `string | Element` | | |
| buttonText | string | | |
| `buttonColor` | `"primary" | "secondary" | "error" | "info" | "success" | "warning"` | | |
| cancelButtonText | string | | |
| `cancelButtonColor` | `"primary" | "secondary" | "error" | "info" | "success" | "warning"` | | |
| hideCancelButton | boolean | `` | |
ConfirmPromptZeroValue
Represents the default configuration value for a confirmation prompt component.
ConfirmPromptZeroValue consolidates the base prompt properties into a specific implementation for use within a confirmation prompt. It is assigned the default value defined in BasePromptZeroValue.
This variable is typically used as a fallback or initial value when initializing or resetting confirmation prompt-related components in the application.
ConfirmPrompt
ConfirmPrompt is a React functional component designed to render a confirmation dialog.
This component utilizes the BasePrompt component as its base structure and accepts
additional properties through the props parameter.
The submitButtonDisabled property of BasePrompt is set to false by default
to ensure the submit button is enabled.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| open | boolean | | |
| `onCancel` | `() => void` | | |
| onSubmit | () => void | | |
| `title` | `string` | | |
| message | string | Element | | |
| `buttonText` | `string` | | |
| buttonColor | "primary" | "secondary" | "error" | "info" | "success" | "warning" | | |
| `cancelButtonText` | `string` | | |
| cancelButtonColor | "primary" | "secondary" | "error" | "info" | "success" | "warning" | | |
| `hideCancelButton` | `boolean` | | |
MuiPrompts
MuiPrompts is a React functional component that provides a context to manage and display interactive modal prompts such as text inputs, confirmation dialogs, and alerts. It acts as a centralized provider for handling user input and modal interactions within a React application.
MuiPromptsContext
MuiPromptsContext is a React context used to provide and manage the state or actions related to Material-UI prompts within a React application. This context allows for seamless sharing and handling of prompt-related data across the component tree.
It is strongly typed with the IMuiPromptsContext interface to ensure proper structure
and type safety for the context's value.
This context is typically used alongside a provider to supply the required values and/or functions to its consumers.
useMuiPrompts
A custom hook that provides access to the MuiPrompts context. This hook ensures that it is used within a valid MuiPrompts provider.
TextPrompt
Renders a prompt dialog containing a text input field. The component allows users to submit or cancel their input.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| fieldLabel | string | | |
| `initialValue` | `string` | | |
| onClose | (value: string) => void | | |
| `open` | `boolean` | | |
| title | string | | |
| `message` | `string | Element` | | |
| buttonText | string | | |
| `buttonColor` | `"primary" | "secondary" | "error" | "info" | "success" | "warning"` | | |
| cancelButtonText | string | | |
| `cancelButtonColor` | `"primary" | "secondary" | "error" | "info" | "success" | "warning"` | | |
| hideCancelButton | boolean | `` | |
ConstrainedMainContent
ConstrainedMainContent is a functional React component that creates a vertically stacked container with defined width constraints and automatic padding. It allows for dynamic adjustment to its size based on the dimensions of its containing element.
The component displays its width and height dynamically on the top-right corner of the container.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| className | string | `` | |
| padding | number | 0 | |
| minWidth | number | 1024 | |
| maxWidth | number | 1600 | |
useContainerDimensions
Calculates and returns the dimensions (width and height) of a given container element.
This hook tracks the dimensions of the container referenced by myRef and updates its state
whenever the window is resized. Initial dimensions are calculated when the hook is first executed.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| current | HTMLDivElement | `` | The current value of the ref. |
PasswordTextField
PasswordTextField is a password input field component with an option to toggle password visibility.
This component uses a controlled state for password input and handles user interactions such as toggling visibility and responding to the "Enter" key press event.
Props:
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| children | ReactNode | | The content of the component. @ignore |
| `classes` | `Partial<TextFieldClasses>` | | Override or extend the styles applied to the component. |
| className | string | | |
| `style` | `CSSProperties` | | |
| color | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning", TextFieldPropsColorOverrides> | '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. |
| disabled | boolean | false | If true, the component is disabled. |
| error | boolean | false | If true, the label is displayed in an error state. |
| fullWidth | boolean | false | If true, the input will take up the full width of its container. |
| focused | boolean | | If `true`, the component is displayed in focused state. |
| `hiddenLabel` | `boolean` | `false` | 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. |
| `margin` | `"dense" | "normal" | "none"` | `'none'` | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
| `required` | `boolean` | `false` | If `true`, the label is displayed as required and the `input` element is required. |
| `size` | `OverridableStringUnion<"small" | "medium", TextFieldPropsSizeOverrides>` | `'medium'` | The size of the component. |
| `sx` | `SxProps<Theme>` | | The system prop that allows defining system overrides as well as additional CSS styles. |
| variant | "standard" | 'outlined' | The variant to use. |
| label | string | | The label content. |
| `slot` | `string` | | |
| select | boolean | false | Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children. |
| title | string | | |
| `key` | `Key` | | |
| defaultChecked | boolean | | |
| `defaultValue` | `unknown` | | The default value. Use when the component is not controlled. |
| suppressContentEditableWarning | boolean | | |
| `suppressHydrationWarning` | `boolean` | | |
| accessKey | string | | |
| `autoCapitalize` | `"none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters"` | | |
| autoFocus | boolean | false | If true, the input element is focused during the first mount. |
| contentEditable | Booleanish | "inherit" | "plaintext-only" | | |
| `contextMenu` | `string` | | |
| dir | string | | |
| `draggable` | `Booleanish` | | |
| enterKeyHint | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | | |
| `hidden` | `boolean` | | |
| id | string | | The id of the `input` element. Use this prop to make `label` and `helperText` accessible for screen readers. |
| `lang` | `string` | | |
| nonce | string | | |
| `spellCheck` | `Booleanish` | | |
| tabIndex | number | | |
| `translate` | `"yes" | "no"` | | |
| radioGroup | string | | |
| `role` | `AriaRole` | | |
| about | string | | |
| `content` | `string` | | |
| datatype | string | | |
| `inlist` | `any` | | |
| prefix | string | | |
| `property` | `string` | | |
| rel | string | | |
| `resource` | `string` | | |
| rev | string | | |
| `typeof` | `string` | | |
| vocab | string | | |
| `autoCorrect` | `string` | | |
| autoSave | string | | |
| `itemProp` | `string` | | |
| itemScope | boolean | | |
| `itemType` | `string` | | |
| itemID | string | | |
| `itemRef` | `string` | | |
| results | number | | |
| `security` | `string` | | |
| unselectable | "off" | "on" | | |
| `inputMode` | `"search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"` | | Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | string | | Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| `exportparts` | `string` | | @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts} |
| part | string | | @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part} |
| `aria-activedescendant` | `string` | | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | Booleanish | | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| `aria-autocomplete` | `"none" | "list" | "inline" | "both"` | | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |
| aria-braillelabel | string | | Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label. |
| `aria-brailleroledescription` | `string` | | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription. |
| aria-busy | Booleanish | | |
| `aria-checked` | `boolean | "true" | "false" | "mixed"` | | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected. |
| aria-colcount | number | | Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex. |
| `aria-colindex` | `number` | | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan. |
| aria-colindextext | string | | Defines a human readable text alternative of aria-colindex. @see aria-rowindextext. |
| `aria-colspan` | `number` | | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan. |
| aria-controls | string | | Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns. |
| `aria-current` | `boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date"` | | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | string | | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-description` | `string` | | Defines a string value that describes or annotates the current element. @see related aria-describedby. |
| aria-details | string | | Identifies the element that provides a detailed, extended description for the object. @see aria-describedby. |
| `aria-disabled` | `Booleanish` | | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly. |
| aria-dropeffect | "link" | "none" | "copy" | "execute" | "move" | "popup" | | Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1 |
| `aria-errormessage` | `string` | | Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby. |
| aria-expanded | Booleanish | | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-flowto` | `string` | | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | Booleanish | | Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1 |
| `aria-haspopup` | `boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree"` | | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | Booleanish | | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-invalid` | `boolean | "true" | "false" | "grammar" | "spelling"` | | Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage. |
| aria-keyshortcuts | string | | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| `aria-label` | `string` | | Defines a string value that labels the current element. @see aria-labelledby. |
| aria-labelledby | string | | Identifies the element (or elements) that labels the current element. @see aria-describedby. |
| `aria-level` | `number` | | Defines the hierarchical level of an element within a structure. |
| aria-live | "off" | "assertive" | "polite" | | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| `aria-modal` | `Booleanish` | | Indicates whether an element is modal when displayed. |
| aria-multiline | Booleanish | | Indicates whether a text box accepts multiple lines of input or only a single line. |
| `aria-multiselectable` | `Booleanish` | | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | "horizontal" | "vertical" | | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| `aria-owns` | `string` | | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls. |
| aria-placeholder | string | | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
| `aria-posinset` | `number` | | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize. |
| aria-pressed | boolean | "true" | "false" | "mixed" | | Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected. |
| `aria-readonly` | `Booleanish` | | Indicates that the element is not editable, but is otherwise operable. @see aria-disabled. |
| aria-relevant | "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic. |
| `aria-required` | `Booleanish` | | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | string | | Defines a human-readable, author-localized description for the role of an element. |
| `aria-rowcount` | `number` | | Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex. |
| aria-rowindex | number | | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan. |
| `aria-rowindextext` | `string` | | Defines a human readable text alternative of aria-rowindex. @see aria-colindextext. |
| aria-rowspan | number | | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan. |
| `aria-selected` | `Booleanish` | | Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed. |
| aria-setsize | number | | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset. |
| `aria-sort` | `"none" | "ascending" | "descending" | "other"` | | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | number | | Defines the maximum allowed value for a range widget. |
| `aria-valuemin` | `number` | | Defines the minimum allowed value for a range widget. |
| aria-valuenow | number | | Defines the current value for a range widget. @see aria-valuetext. |
| `aria-valuetext` | `string` | | Defines the human readable text alternative of aria-valuenow for a range widget. |
| dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | | |
| `onCopy` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onCopyCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onCut` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onCutCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onPaste` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onPasteCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onCompositionEnd` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionEndCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onCompositionStart` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionStartCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionUpdateCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onFocus` | `FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | |
| onFocusCapture | FocusEventHandler<HTMLDivElement> | | |
| `onBlur` | `FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | |
| onBlurCapture | FocusEventHandler<HTMLDivElement> | | |
| `onChange` | `ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | Callback fired when the value is changed. @param event The event source of the callback. You can pull out the new value by accessing event.target.value (string). |
| onChangeCapture | FormEventHandler<HTMLDivElement> | | |
| `onBeforeInput` | `FormEventHandler<HTMLDivElement>` | | |
| onBeforeInputCapture | FormEventHandler<HTMLDivElement> | | |
| `onInput` | `FormEventHandler<HTMLDivElement>` | | |
| onInputCapture | FormEventHandler<HTMLDivElement> | | |
| `onReset` | `FormEventHandler<HTMLDivElement>` | | |
| onResetCapture | FormEventHandler<HTMLDivElement> | | |
| `onSubmit` | `FormEventHandler<HTMLDivElement>` | | |
| onSubmitCapture | FormEventHandler<HTMLDivElement> | | |
| `onInvalid` | `FormEventHandler<HTMLDivElement>` | | |
| onInvalidCapture | FormEventHandler<HTMLDivElement> | | |
| `onLoad` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadCapture | ReactEventHandler<HTMLDivElement> | | |
| `onError` | `ReactEventHandler<HTMLDivElement>` | | |
| onErrorCapture | ReactEventHandler<HTMLDivElement> | | |
| `onKeyDown` | `KeyboardEventHandler<HTMLDivElement>` | | |
| onKeyDownCapture | KeyboardEventHandler<HTMLDivElement> | | |
| `onKeyPress` | `KeyboardEventHandler<HTMLDivElement>` | | @deprecated Use onKeyUp or onKeyDown instead |
| onKeyPressCapture | KeyboardEventHandler<HTMLDivElement> | | @deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead |
| `onKeyUp` | `KeyboardEventHandler<HTMLDivElement>` | | |
| onKeyUpCapture | KeyboardEventHandler<HTMLDivElement> | | |
| `onAbort` | `ReactEventHandler<HTMLDivElement>` | | |
| onAbortCapture | ReactEventHandler<HTMLDivElement> | | |
| `onCanPlay` | `ReactEventHandler<HTMLDivElement>` | | |
| onCanPlayCapture | ReactEventHandler<HTMLDivElement> | | |
| `onCanPlayThrough` | `ReactEventHandler<HTMLDivElement>` | | |
| onCanPlayThroughCapture | ReactEventHandler<HTMLDivElement> | | |
| `onDurationChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onDurationChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEmptied` | `ReactEventHandler<HTMLDivElement>` | | |
| onEmptiedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEncrypted` | `ReactEventHandler<HTMLDivElement>` | | |
| onEncryptedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEnded` | `ReactEventHandler<HTMLDivElement>` | | |
| onEndedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadedData` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadedDataCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadedMetadata` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadedMetadataCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadStart` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadStartCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPause` | `ReactEventHandler<HTMLDivElement>` | | |
| onPauseCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPlay` | `ReactEventHandler<HTMLDivElement>` | | |
| onPlayCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPlaying` | `ReactEventHandler<HTMLDivElement>` | | |
| onPlayingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onProgress` | `ReactEventHandler<HTMLDivElement>` | | |
| onProgressCapture | ReactEventHandler<HTMLDivElement> | | |
| `onRateChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onRateChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onResize` | `ReactEventHandler<HTMLDivElement>` | | |
| onResizeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSeeked` | `ReactEventHandler<HTMLDivElement>` | | |
| onSeekedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSeeking` | `ReactEventHandler<HTMLDivElement>` | | |
| onSeekingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onStalled` | `ReactEventHandler<HTMLDivElement>` | | |
| onStalledCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSuspend` | `ReactEventHandler<HTMLDivElement>` | | |
| onSuspendCapture | ReactEventHandler<HTMLDivElement> | | |
| `onTimeUpdate` | `ReactEventHandler<HTMLDivElement>` | | |
| onTimeUpdateCapture | ReactEventHandler<HTMLDivElement> | | |
| `onVolumeChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onVolumeChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onWaiting` | `ReactEventHandler<HTMLDivElement>` | | |
| onWaitingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onAuxClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement>` | | |
| onContextMenuCapture | MouseEventHandler<HTMLDivElement> | | |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onDoubleClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onDrag` | `DragEventHandler<HTMLDivElement>` | | |
| onDragCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragEnd` | `DragEventHandler<HTMLDivElement>` | | |
| onDragEndCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragEnter` | `DragEventHandler<HTMLDivElement>` | | |
| onDragEnterCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragExit` | `DragEventHandler<HTMLDivElement>` | | |
| onDragExitCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragLeave` | `DragEventHandler<HTMLDivElement>` | | |
| onDragLeaveCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragOver` | `DragEventHandler<HTMLDivElement>` | | |
| onDragOverCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragStart` | `DragEventHandler<HTMLDivElement>` | | |
| onDragStartCapture | DragEventHandler<HTMLDivElement> | | |
| `onDrop` | `DragEventHandler<HTMLDivElement>` | | |
| onDropCapture | DragEventHandler<HTMLDivElement> | | |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseDownCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseLeave | MouseEventHandler<HTMLDivElement> | | |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseMoveCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseOutCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseOverCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseUpCapture | MouseEventHandler<HTMLDivElement> | | |
| `onSelect` | `ReactEventHandler<HTMLDivElement>` | | |
| onSelectCapture | ReactEventHandler<HTMLDivElement> | | |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchCancelCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchEndCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchMoveCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchStartCapture | TouchEventHandler<HTMLDivElement> | | |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerDownCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerMoveCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerUpCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerCancelCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerLeave | PointerEventHandler<HTMLDivElement> | | |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerOverCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerOutCapture | PointerEventHandler<HTMLDivElement> | | |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement>` | | |
| onGotPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | | |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement>` | | |
| onLostPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | | |
| `onScroll` | `UIEventHandler<HTMLDivElement>` | | |
| onScrollCapture | UIEventHandler<HTMLDivElement> | | |
| `onWheel` | `WheelEventHandler<HTMLDivElement>` | | |
| onWheelCapture | WheelEventHandler<HTMLDivElement> | | |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationStartCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationEndCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationIterationCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement>` | | |
| onTransitionEndCapture | TransitionEventHandler<HTMLDivElement> | | |
| `component` | `ElementType<any, keyof IntrinsicElements>` | | |
| passwordState | [string, Dispatch<SetStateAction<string>>] | | |
| `passwordError` | `string` | | |
| onEnterCallback | () => void | | |
| `name` | `string` | | Name attribute of the input element. |
| InputProps | Partial<InputProps> | | Props applied to the Input element. It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/), [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/) component depending on the `variant` prop value. @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| `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. |
| FormHelperTextProps | Partial<FormHelperTextProps> | | Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element. @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| `helperText` | `ReactNode` | | The helper text content. |
| InputLabelProps | Partial<InputLabelProps> | | Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element. Pointer events like `onClick` are enabled if and only if `shrink` is `true`. @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| `inputProps` | `InputBaseComponentProps` | | Attributes applied to the input element. @deprecated Use slotProps.htmlInput instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details. |
| inputRef | Ref<any> | | Pass a ref to the `input` element. |
| `multiline` | `boolean` | `false` | If `true`, a `textarea` element is rendered instead of an input. |
| `placeholder` | `string` | | The short hint displayed in the input before the user enters a value. |
| rows | string | number | | Number of rows to display when multiline option is set to true. |
| `maxRows` | `string | number` | | Maximum number of rows to display when multiline option is set to true. |
| minRows | string | number | | Minimum number of rows to display when multiline option is set to true. |
| `SelectProps` | `Partial<SelectProps>` | | Props applied to the Select element. @deprecated Use slotProps.select instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details. |
| type | HTMLInputTypeAttribute | | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). |
| `value` | `unknown` | | The value of the input element, required for a controlled component. |
| slots | Partial<TextFieldSlots> | {} | The components used for each slot inside. |
| slotProps | { root?: SlotProps<ElementType<FormControlProps, keyof IntrinsicElements>, {}, BaseTextFieldProps>; ... 4 more ...; select?: SlotProps<...>; } | {} | The props used for each slot inside. |
| ref | LegacyRef<HTMLDivElement> | `` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
SelectWithLabel
A reusable React functional component that wraps a Material-UI Select component with an associated label. It applies custom styling and allows dynamic properties and children to be passed through.
Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| variant | "filled" | "outlined" | "standard" | 'outlined'
'outlined'
'outlined'
'outlined' | The variant to use. |
| defaultValue | T | | The default value. Use when the component is not controlled. |
| `onBlur` | `FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | Callback fired when the input is blurred. Notice that the first argument (event) might be undefined. |
| onFocus | FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | | |
| `onInvalid` | `FormEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | Callback fired when the input doesn't satisfy its constraints. |
| onKeyDown | KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | | |
| `onKeyUp` | `KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>` | | |
| defaultChecked | boolean | | |
| `suppressContentEditableWarning` | `boolean` | | |
| suppressHydrationWarning | boolean | | |
| `accessKey` | `string` | | |
| autoCapitalize | "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | | |
| `autoFocus` | `boolean` | | If true, the input element is focused during the first mount. |
| className | string | | |
| `contentEditable` | `Booleanish | "inherit" | "plaintext-only"` | | |
| contextMenu | string | | |
| `dir` | `string` | | |
| draggable | Booleanish | | |
| `enterKeyHint` | `"enter" | "done" | "go" | "next" | "previous" | "search" | "send"` | | |
| hidden | boolean | | |
| `lang` | `string` | | |
| nonce | string | | |
| `slot` | `string` | | |
| spellCheck | Booleanish | | |
| `style` | `CSSProperties` | | |
| tabIndex | number | | |
| `title` | `string` | | |
| translate | "yes" | "no" | | |
| `radioGroup` | `string` | | |
| role | AriaRole | | |
| `about` | `string` | | |
| content | string | | |
| `datatype` | `string` | | |
| inlist | any | | |
| `prefix` | `string` | | |
| property | string | | |
| `rel` | `string` | | |
| resource | string | | |
| `rev` | `string` | | |
| typeof | string | | |
| `vocab` | `string` | | |
| autoCorrect | string | | |
| `autoSave` | `string` | | |
| color | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning", InputBasePropsColorOverrides> | | The color of the component. It supports both default and custom theme colors, which can be added as shown in the [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. |
| `itemProp` | `string` | | |
| itemScope | boolean | | |
| `itemType` | `string` | | |
| itemID | string | | |
| `itemRef` | `string` | | |
| results | number | | |
| `security` | `string` | | |
| unselectable | "off" | "on" | | |
| `inputMode` | `"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"` | | Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | string | | Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| `exportparts` | `string` | | @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts} |
| part | string | | @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part} |
| `aria-activedescendant` | `string` | | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | Booleanish | | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| `aria-autocomplete` | `"none" | "list" | "inline" | "both"` | | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |
| aria-braillelabel | string | | Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label. |
| `aria-brailleroledescription` | `string` | | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription. |
| aria-busy | Booleanish | | |
| `aria-checked` | `boolean | "true" | "false" | "mixed"` | | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected. |
| aria-colcount | number | | Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex. |
| `aria-colindex` | `number` | | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan. |
| aria-colindextext | string | | Defines a human readable text alternative of aria-colindex. @see aria-rowindextext. |
| `aria-colspan` | `number` | | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan. |
| aria-controls | string | | Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns. |
| `aria-current` | `boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"` | | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | string | | Identifies the element (or elements) that describes the object. |
| `aria-description` | `string` | | Defines a string value that describes or annotates the current element. @see related aria-describedby. |
| aria-details | string | | Identifies the element that provides a detailed, extended description for the object. @see aria-describedby. |
| `aria-disabled` | `Booleanish` | | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly. |
| aria-dropeffect | "none" | "link" | "copy" | "execute" | "move" | "popup" | | Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1 |
| `aria-errormessage` | `string` | | Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby. |
| aria-expanded | Booleanish | | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-flowto` | `string` | | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | Booleanish | | Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1 |
| `aria-haspopup` | `boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"` | | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | Booleanish | | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-invalid` | `boolean | "true" | "false" | "grammar" | "spelling"` | | Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage. |
| aria-keyshortcuts | string | | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| `aria-label` | `string` | | Defines a string value that labels the current element. @see aria-labelledby. |
| aria-labelledby | string | | Identifies the element (or elements) that labels the current element. @see aria-describedby. |
| `aria-level` | `number` | | Defines the hierarchical level of an element within a structure. |
| aria-live | "off" | "assertive" | "polite" | | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| `aria-modal` | `Booleanish` | | Indicates whether an element is modal when displayed. |
| aria-multiline | Booleanish | | Indicates whether a text box accepts multiple lines of input or only a single line. |
| `aria-multiselectable` | `Booleanish` | | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | "horizontal" | "vertical" | | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| `aria-owns` | `string` | | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls. |
| aria-placeholder | string | | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
| `aria-posinset` | `number` | | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize. |
| aria-pressed | boolean | "true" | "false" | "mixed" | | Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected. |
| `aria-readonly` | `Booleanish` | | Indicates that the element is not editable, but is otherwise operable. @see aria-disabled. |
| aria-relevant | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic. |
| `aria-required` | `Booleanish` | | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | string | | Defines a human-readable, author-localized description for the role of an element. |
| `aria-rowcount` | `number` | | Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex. |
| aria-rowindex | number | | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan. |
| `aria-rowindextext` | `string` | | Defines a human readable text alternative of aria-rowindex. @see aria-colindextext. |
| aria-rowspan | number | | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan. |
| `aria-selected` | `Booleanish` | | Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed. |
| aria-setsize | number | | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset. |
| `aria-sort` | `"none" | "ascending" | "descending" | "other"` | | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | number | | Defines the maximum allowed value for a range widget. |
| `aria-valuemin` | `number` | | Defines the minimum allowed value for a range widget. |
| aria-valuenow | number | | Defines the current value for a range widget. @see aria-valuetext. |
| `aria-valuetext` | `string` | | Defines the human readable text alternative of aria-valuenow for a range widget. |
| dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | | |
| `onCopy` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onCopyCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onCut` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onCutCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onPaste` | `ClipboardEventHandler<HTMLDivElement>` | | |
| onPasteCapture | ClipboardEventHandler<HTMLDivElement> | | |
| `onCompositionEnd` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionEndCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onCompositionStart` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionStartCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLDivElement>` | | |
| onCompositionUpdateCapture | CompositionEventHandler<HTMLDivElement> | | |
| `onFocusCapture` | `FocusEventHandler<HTMLDivElement>` | | |
| onBlurCapture | FocusEventHandler<HTMLDivElement> | | |
| `onChangeCapture` | `FormEventHandler<HTMLDivElement>` | | |
| onBeforeInput | FormEventHandler<HTMLDivElement> | | |
| `onBeforeInputCapture` | `FormEventHandler<HTMLDivElement>` | | |
| onInput | FormEventHandler<HTMLDivElement> | | |
| `onInputCapture` | `FormEventHandler<HTMLDivElement>` | | |
| onReset | FormEventHandler<HTMLDivElement> | | |
| `onResetCapture` | `FormEventHandler<HTMLDivElement>` | | |
| onSubmit | FormEventHandler<HTMLDivElement> | | |
| `onSubmitCapture` | `FormEventHandler<HTMLDivElement>` | | |
| onInvalidCapture | FormEventHandler<HTMLDivElement> | | |
| `onLoad` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadCapture | ReactEventHandler<HTMLDivElement> | | |
| `onError` | `ReactEventHandler<HTMLDivElement>` | | |
| onErrorCapture | ReactEventHandler<HTMLDivElement> | | |
| `onKeyDownCapture` | `KeyboardEventHandler<HTMLDivElement>` | | |
| onKeyPress | KeyboardEventHandler<HTMLDivElement> | | @deprecated Use `onKeyUp` or `onKeyDown` instead |
| `onKeyPressCapture` | `KeyboardEventHandler<HTMLDivElement>` | | @deprecated Use onKeyUpCapture or onKeyDownCapture instead |
| onKeyUpCapture | KeyboardEventHandler<HTMLDivElement> | | |
| `onAbort` | `ReactEventHandler<HTMLDivElement>` | | |
| onAbortCapture | ReactEventHandler<HTMLDivElement> | | |
| `onCanPlay` | `ReactEventHandler<HTMLDivElement>` | | |
| onCanPlayCapture | ReactEventHandler<HTMLDivElement> | | |
| `onCanPlayThrough` | `ReactEventHandler<HTMLDivElement>` | | |
| onCanPlayThroughCapture | ReactEventHandler<HTMLDivElement> | | |
| `onDurationChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onDurationChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEmptied` | `ReactEventHandler<HTMLDivElement>` | | |
| onEmptiedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEncrypted` | `ReactEventHandler<HTMLDivElement>` | | |
| onEncryptedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onEnded` | `ReactEventHandler<HTMLDivElement>` | | |
| onEndedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadedData` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadedDataCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadedMetadata` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadedMetadataCapture | ReactEventHandler<HTMLDivElement> | | |
| `onLoadStart` | `ReactEventHandler<HTMLDivElement>` | | |
| onLoadStartCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPause` | `ReactEventHandler<HTMLDivElement>` | | |
| onPauseCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPlay` | `ReactEventHandler<HTMLDivElement>` | | |
| onPlayCapture | ReactEventHandler<HTMLDivElement> | | |
| `onPlaying` | `ReactEventHandler<HTMLDivElement>` | | |
| onPlayingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onProgress` | `ReactEventHandler<HTMLDivElement>` | | |
| onProgressCapture | ReactEventHandler<HTMLDivElement> | | |
| `onRateChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onRateChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onResize` | `ReactEventHandler<HTMLDivElement>` | | |
| onResizeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSeeked` | `ReactEventHandler<HTMLDivElement>` | | |
| onSeekedCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSeeking` | `ReactEventHandler<HTMLDivElement>` | | |
| onSeekingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onStalled` | `ReactEventHandler<HTMLDivElement>` | | |
| onStalledCapture | ReactEventHandler<HTMLDivElement> | | |
| `onSuspend` | `ReactEventHandler<HTMLDivElement>` | | |
| onSuspendCapture | ReactEventHandler<HTMLDivElement> | | |
| `onTimeUpdate` | `ReactEventHandler<HTMLDivElement>` | | |
| onTimeUpdateCapture | ReactEventHandler<HTMLDivElement> | | |
| `onVolumeChange` | `ReactEventHandler<HTMLDivElement>` | | |
| onVolumeChangeCapture | ReactEventHandler<HTMLDivElement> | | |
| `onWaiting` | `ReactEventHandler<HTMLDivElement>` | | |
| onWaitingCapture | ReactEventHandler<HTMLDivElement> | | |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onAuxClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement>` | | |
| onContextMenuCapture | MouseEventHandler<HTMLDivElement> | | |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement>` | | |
| onDoubleClickCapture | MouseEventHandler<HTMLDivElement> | | |
| `onDrag` | `DragEventHandler<HTMLDivElement>` | | |
| onDragCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragEnd` | `DragEventHandler<HTMLDivElement>` | | |
| onDragEndCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragEnter` | `DragEventHandler<HTMLDivElement>` | | |
| onDragEnterCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragExit` | `DragEventHandler<HTMLDivElement>` | | |
| onDragExitCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragLeave` | `DragEventHandler<HTMLDivElement>` | | |
| onDragLeaveCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragOver` | `DragEventHandler<HTMLDivElement>` | | |
| onDragOverCapture | DragEventHandler<HTMLDivElement> | | |
| `onDragStart` | `DragEventHandler<HTMLDivElement>` | | |
| onDragStartCapture | DragEventHandler<HTMLDivElement> | | |
| `onDrop` | `DragEventHandler<HTMLDivElement>` | | |
| onDropCapture | DragEventHandler<HTMLDivElement> | | |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseDownCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseLeave | MouseEventHandler<HTMLDivElement> | | |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseMoveCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseOutCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseOverCapture | MouseEventHandler<HTMLDivElement> | | |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement>` | | |
| onMouseUpCapture | MouseEventHandler<HTMLDivElement> | | |
| `onSelect` | `ReactEventHandler<HTMLDivElement>` | | |
| onSelectCapture | ReactEventHandler<HTMLDivElement> | | |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchCancelCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchEndCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchMoveCapture | TouchEventHandler<HTMLDivElement> | | |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement>` | | |
| onTouchStartCapture | TouchEventHandler<HTMLDivElement> | | |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerDownCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerMoveCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerUpCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerCancelCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerLeave | PointerEventHandler<HTMLDivElement> | | |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerOverCapture | PointerEventHandler<HTMLDivElement> | | |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement>` | | |
| onPointerOutCapture | PointerEventHandler<HTMLDivElement> | | |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement>` | | |
| onGotPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | | |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement>` | | |
| onLostPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | | |
| `onScroll` | `UIEventHandler<HTMLDivElement>` | | |
| onScrollCapture | UIEventHandler<HTMLDivElement> | | |
| `onWheel` | `WheelEventHandler<HTMLDivElement>` | | |
| onWheelCapture | WheelEventHandler<HTMLDivElement> | | |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationStartCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationEndCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement>` | | |
| onAnimationIterationCapture | AnimationEventHandler<HTMLDivElement> | | |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement>` | | |
| onTransitionEndCapture | TransitionEventHandler<HTMLDivElement> | | |
| `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. |
| components | { Root?: ElementType<any, keyof IntrinsicElements>; Input?: ElementType<any, keyof IntrinsicElements>; } | {} | The components used for each slot inside. @deprecated use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details. |
| componentsProps | { root?: HTMLAttributes<HTMLDivElement> & InputBaseComponentsPropsOverrides; input?: InputHTMLAttributes<HTMLInputElement> & InputBaseComponentsPropsOverrides; } | {} | The extra props for the slot components. You can override the existing props or add new ones. @deprecated use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details. |
| disabled | boolean | | If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component. |
| `disableInjectingGlobalStyles` | `boolean` | `false` | If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once. |
| `endAdornment` | `ReactNode` | | End InputAdornment for this component. |
| error | boolean | | If `true`, the `input` will indicate an error. The prop defaults to the value (`false`) inherited from the parent FormControl component. |
| `fullWidth` | `boolean` | `false` | If `true`, the `input` will take up the full width of its container. |
| `inputComponent` | `ElementType<InputBaseComponentProps, keyof IntrinsicElements>` | `'input'` | The component used for the `input` element. Either a string to use a HTML element or a component. |
| `inputRef` | `Ref<any>` | | Pass a ref to the input element. |
| margin | "none" | "dense" | | 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. |
| `multiline` | `boolean` | `false` | If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered. |
| `name` | `string` | | Name attribute of the input element. |
| readOnly | boolean | | It prevents the user from changing the value of the field (not from interacting with the field). |
| `required` | `boolean` | | If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component. |
| renderSuffix | (state: { disabled?: boolean; error?: boolean; filled?: boolean; focused?: boolean; margin?: "none" | "dense" | "normal"; required?: boolean; startAdornment?: ReactNode; }) => ReactNode | | |
| `rows` | `string | number` |