@piplup/rhf-adaptersmui-materialComponents
MuiAutocompleteElement
A pre-integrated MuiAutocompleteElement component for connecting MUI Autocomplete to React Hook Form.
Import
import { MuiAutocompleteElement } from "@piplup/rhf-adapters/mui-material";Usage
"use client";import { TextField } from "@mui/material";import { MuiAutocompleteElement, MuiButtonElement,} from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm<{ framework: string | null }>({ defaultValues: { framework: "React" }, }); const options = ["React", "Vue", "Svelte"]; return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <MuiAutocompleteElement control={control} name="framework" options={options} renderInput={(params) => <TextField {...params} label="Framework" />} /> <MuiButtonElement control={control} type="submit" variant="contained" sx={{ mt: 2 }} > Submit </MuiButtonElement> </form> );}"use client";import { TextField } from "@mui/material";import { MuiAutocompleteElement, MuiButtonElement,} from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { const options = ["React", "Vue", "Svelte"]; return ( <FormContainer defaultValues={{ framework: "React" }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <MuiAutocompleteElement name="framework" options={options} renderInput={(params) => <TextField {...params} label="Framework" />} /> <MuiButtonElement type="submit" variant="contained" sx={{ mt: 2 }}> Submit </MuiButtonElement> </FormContainer> );}Props
Prop
Type
MuiAutocompleteElement supports all standard props of the MUI Autocomplete component, along with additional adapter-specific props. For a complete list of available Autocomplete properties, refer to the MUI API documentation.
The
refis forwarded to the underlying<Autocomplete />component.
Notes
- Use this component when MUI Autocomplete should behave like an
react-hook-formcontrolled field. - For custom autocomplete UIs, build on
useMuiAutocompleteAdapter.