@piplup/rhf-adaptersmui-materialComponents
MuiFabElement
A pre-integrated MuiFabElement component for React Hook Form-aware floating action button behavior.
Import
import { MuiFabElement } from "@piplup/rhf-adapters/mui-material";Usage
"use client";import AddIcon from "@mui/icons-material/Add";import Stack from "@mui/material/Stack";import { MuiFabElement, MuiTextFieldElement,} from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { name: "" } }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack spacing={2}> <MuiTextFieldElement control={control} name="name" label="Name" /> <div> <MuiFabElement control={control} type="submit" color="secondary" size="small" > <AddIcon /> </MuiFabElement> </div> </Stack> </form> );}"use client";import AddIcon from "@mui/icons-material/Add";import Stack from "@mui/material/Stack";import { MuiFabElement, MuiTextFieldElement,} from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer defaultValues={{ name: "" }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack spacing={2}> <MuiTextFieldElement name="name" label="Name" /> <div> <MuiFabElement type="submit" color="secondary" size="small"> <AddIcon /> </MuiFabElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
MuiFabElement supports all standard props of the MUI Fab component, along with additional adapter-specific props. For a complete list of available Fab properties, refer to the MUI API documentation.
The
refis forwarded to the underlying<Fab />component.
Notes
- For custom FAB UIs, build on
useMuiFabAdapter.