@piplup/rhf-adaptersmui-materialComponents
MuiCheckboxElement
A pre-integrated MuiCheckboxElement component for connecting MUI Checkbox to React Hook Form.
Import
import { MuiCheckboxElement } from "@piplup/rhf-adapters/mui-material";Usage
"use client";import Stack from "@mui/material/Stack";import FormControlLabel from "@mui/material/FormControlLabel";import { MuiButtonElement, MuiCheckboxElement,} from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { terms: true }, }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack spacing={2} direction="column"> <FormControlLabel control={ <MuiCheckboxElement control={control} name="terms" transform={{ input(value) { // Checkbox expects value to be always array return Array.isArray(value) ? value : [value]; }, output(event, checked) { return checked; }, }} /> } label="Accept terms & conditions" value={true} /> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}"use client";import Stack from "@mui/material/Stack";import FormControlLabel from "@mui/material/FormControlLabel";import { MuiButtonElement, MuiCheckboxElement,} from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer defaultValues={{ terms: true }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack spacing={2} direction="column"> <FormControlLabel control={ <MuiCheckboxElement name="terms" transform={{ input(value) { // Checkbox expects value to be always array return Array.isArray(value) ? value : [value]; }, output(event, checked) { return checked; }, }} /> } label="Accept terms & conditions" value={true} /> <div> <MuiButtonElement type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
MuiCheckboxElement supports all standard props of the MUI Checkbox component, along with additional adapter-specific props. For a complete list of available Checkbox properties, refer to the MUI API documentation.
The
refis forwarded to the underlying<Fab />component.
Notes
- For custom checkbox UIs, build on
useMuiCheckboxAdapter. MuiCheckboxElementalways expects the input value to be an array. Use transform.input and transform.output when working with values that are not arrays.