MUITextField

MUITextField extends the Material UI TextField component, accepting almost all of its props while wiring up the label, error state and helper text for you. It is a controlled component that works with plain useState or any form library able to provide a value and receive changes.

Usage#

import MUITextField, { MUITextFieldProps } from '@nish1896/mui-components/mui/textfield';

Provide fieldName, value and onValueChange to render a fully functional text field:

const [firstName, setFirstName] = useState();

<MUITextField
  fieldName="firstName"
  value={firstName}
  onValueChange={({ newValue }) => setFirstName(newValue)}
/>

Validation stays in your hands — derive errorMessage from your own state or form library and the field renders in an error state:

<MUITextField
  fieldName="email"
  value={email}
  onValueChange={({ newValue }) => setEmail(newValue)}
  onBlur={() => setEmailError(validateEmail(email))}
  errorMessage={emailError}
/>

Props#

MUITextFieldProps also accepts the remaining TextFieldProps in addition to the props below. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name/path of the field. Used to derive the `id`, the default label, and the `name` attribute. This prop is required for all components.
`value`	`string \| null`	Current value of the field. This is a controlled component — `value` and `onValueChange` must be supplied together, typically backed by your own state or form library. `undefined`/`null` are treated as an empty string.
`onValueChange`*	`({ newValue, event }) => void`	Called on every input change with the next string value and the original change event. Call your state setter (or form library's setter) with `newValue` to update `value`.
`label`	`ReactNode`	Label displayed for the field. Defaults to a human-readable label derived from `fieldName`, e.g. `firstName` becomes `First Name`
`showLabelAboveFormField`	`boolean`	When true, renders the field label above the form field in the FormLabel component, instead of inside or beside it.
`formLabelProps`	FormLabelProps	FormLabelProps forwarded to the internal `FormLabel`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`hideLabel`	`boolean`	When true, hides the rendered field label while preserving accessible labeling where possible.
`required`	`boolean`	Indicates that the field is mandatory by adding an asterisk symbol (*) to the form label and setting the relevant accessibility attributes.
`errorMessage`	`string \| string[]`	Validation error for the field — pass a single message `string`, or a `string[]` when the field can fail multiple rules at once (every message is shown together). A non-empty string or array puts the field in an error state; `undefined`/`''`/`[]` clear it. Normalize your form library's error shape to this at the call site (e.g. an RHF `FieldError` via its `.message`). Use `renderError` to customize how the message(s) are rendered.
`renderError`	`(errors: string[]) => ReactNode`	Custom renderer for the resolved error message(s), called only when the field is in an error state. Always receives a `string[]` — use `errors[0]` for the common single-message case, or map over `errors` when a field fails several rules. By default a single message renders as text and multiple messages render on separate lines.
`hideErrorMessage`	`boolean`	If true, hides the error message text while keeping the field in an error state.
`helperText`	`ReactNode`	Content displayed in the FormHelperText component below the field when there is no visible validation error.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps forwarded to the internal `FormHelperText`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Playground#

Reference#

MUI TextField

Installation

Password Input