@piplup/rhf-adaptersmui-materialComponents
MuiInputLabelElement
A pre-integrated MuiInputLabelElement component for field-state-aware MUI input labels with React Hook Form.
Import
import { MuiInputLabelElement } from "@piplup/rhf-adapters/mui-material";Usage
"use client";import { useId } from "react";import Stack from "@mui/material/Stack";import FormControl from "@mui/material/FormControl";import { MuiFormHelperTextElement, MuiOutlinedInputElement, MuiInputLabelElement, MuiButtonElement,} from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const inputId = useId(); const helperTextId = `${inputId}-helper-text`; const { control, handleSubmit } = useForm({ defaultValues: { email: "" } }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} noValidate > <Stack direction="column" spacing={2}> <FormControl variant="outlined"> <MuiInputLabelElement control={control} name="email" htmlFor={inputId} sx={{ mb: 0.5 }} > Email </MuiInputLabelElement> <MuiOutlinedInputElement control={control} name="email" id={inputId} type="email" aria-describedby={helperTextId} required /> <MuiFormHelperTextElement control={control} name="email" id={helperTextId} renderOnError /> </FormControl> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}"use client";import { useId } from "react";import Stack from "@mui/material/Stack";import FormControl from "@mui/material/FormControl";import { MuiFormHelperTextElement, MuiOutlinedInputElement, MuiInputLabelElement, MuiButtonElement,} from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { const inputId = useId(); const helperTextId = `${inputId}-helper-text`; return ( <FormContainer defaultValues={{ email: "" }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack direction="column" spacing={2}> <FormControl variant="outlined"> <MuiInputLabelElement name="email" htmlFor={inputId} sx={{ mb: 0.5 }} > Email </MuiInputLabelElement> <MuiOutlinedInputElement name="email" id={inputId} type="email" aria-describedby={helperTextId} required /> <MuiFormHelperTextElement name="email" id={helperTextId} renderOnError /> </FormControl> <div> <MuiButtonElement type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
MuiInputLabelElement supports props of the MUI InputLabel component, along with additional adapter-specific props. For a complete list of available InputLabel properties, refer to the MUI API documentation.
The
refis forwarded to the underlying<InputLabel />component.
Notes
- Use this component when MUI InputLabel should react to RHF field state.
- For custom input-label UIs, build on
useMuiInputLabelAdapter.