@piplup/rhf-adaptersmui-materialComponents
MuiRadioGroupElement
A pre-integrated MuiRadioGroupElement component for connecting MUI RadioGroup to React Hook Form.
Import
import { MuiRadioGroupElement } from "@piplup/rhf-adapters/mui-material";Usage
"use client";import FormControlLabel from "@mui/material/FormControlLabel";import Stack from "@mui/material/Stack";import Radio from "@mui/material/Radio";import { MuiButtonElement, MuiRadioGroupElement,} from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { role: "user", plan: "starter" }, }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <MuiRadioGroupElement control={control} name="plan"> <FormControlLabel value="starter" control={<Radio />} label="Starter" /> <FormControlLabel value="pro" control={<Radio />} label="Pro" /> </MuiRadioGroupElement> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}"use client";import FormControlLabel from "@mui/material/FormControlLabel";import Stack from "@mui/material/Stack";import Radio from "@mui/material/Radio";import { MuiButtonElement, MuiRadioGroupElement,} from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer defaultValues={{ role: "user", plan: "starter" }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack direction="column" spacing={2}> <MuiRadioGroupElement name="plan"> <FormControlLabel value="starter" control={<Radio />} label="Starter" /> <FormControlLabel value="pro" control={<Radio />} label="Pro" /> </MuiRadioGroupElement> <div> <MuiButtonElement type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
MuiRadioGroupElement supports props of the MUI RadioGroup component, along with additional adapter-specific props. For a complete list of available RadioGroup properties, refer to the MUI API documentation.
The
refis forwarded to the underlying<RadioGroup />component.
Notes
- For custom radio-group UIs, build on
useMuiRadioGroupAdapter.