@piplup/rhf-adaptersmui-chips-inputComponents
MuiChipsInputElement
A pre-integrated MuiChipsInputElement component for connecting string chip arrays to React Hook Form.
Import
import { MuiChipsInputElement } from "@piplup/rhf-adapters/mui-chips-input";Usage
"use client";import Stack from "@mui/material/Stack";import { MuiChipsInputElement } from "@piplup/rhf-adapters/mui-chips-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { tags: ["react"] }, }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <MuiChipsInputElement control={control} name="tags" label="Tags" /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Submit </MuiButtonElement> </div> </Stack> </form> );}"use client";import Stack from "@mui/material/Stack";import { MuiChipsInputElement } from "@piplup/rhf-adapters/mui-chips-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer defaultValues={{ tags: ["react"] }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack direction="column" spacing={2}> <MuiChipsInputElement name="tags" label="Tags" /> <div> <MuiButtonElement variant="contained" type="submit"> Submit </MuiButtonElement> </div> </Stack> </FormContainer> );}Props
Prop
Type
Notes
- Use this component when the field value is an array of strings.
- For custom chip inputs, build on
useMuiChipsInputAdapter.