useMuiChipsInputAdapter
Returns adapter props for wiring mui-chips-input's MuiChipsInput to React Hook Form, including custom storage formats for the chip array.
useMuiChipsInputAdapter connects a field to React Hook Form and returns props you spread onto MuiChipsInput from mui-chips-input. It's what MuiChipsInputElement uses internally.
Use the element for most forms. Reach for the hook when you want a reusable tags field with its chip rules built in, or when the form should store the chips as something other than a string[], like the comma-separated string in the example below.
Import
import { useMuiChipsInputAdapter } from "@piplup/rhf-adapters/mui-chips-input";Usage
This KeywordsField shows chips but stores "react,forms". Added keywords are lowercased and de-duplicated, so adding React again does nothing. A keyword with a comma is refused by the input.
"use client";import Stack from "@mui/material/Stack";import { useMuiChipsInputAdapter } from "@piplup/rhf-adapters/mui-chips-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { MuiChipsInput } from "mui-chips-input";import { type Control, useForm } from "react-hook-form";// The API expects keywords as one comma-separated string, not an array.type FormValues = { keywords: string };function KeywordsField({ control }: { control: Control<FormValues> }) { const adapter = useMuiChipsInputAdapter<string[], FormValues, "keywords", HTMLDivElement>({ control, name: "keywords", required: true, composeHelperText: true, helperText: "Press Enter after each keyword", messages: { required: "Add at least one keyword" }, transform: { // "react,forms" -> ["react", "forms"] for the chips input: (value) => (value ? value.split(",") : []), // chips -> lowercase, de-duplicated, comma-separated string output: (chips: string[]) => Array.from(new Set(chips.map((chip) => chip.toLowerCase()))).join(","), }, }); return ( <MuiChipsInput label="Keywords" validate={(chip) => ({ isError: chip.includes(","), textError: "Keywords can't contain commas", })} {...adapter} /> );}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { keywords: "react,forms" }, }); return ( <form noValidate onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)))} > <Stack direction="column" spacing={2}> <KeywordsField control={control} /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Save </MuiButtonElement> </div> </Stack> </form> );}How it works
Value. By default the chip array goes both ways unchanged: the form value is passed as value, and the array from onChange is written back. transform.input turns the form value into the array the input shows; transform.output receives the new array (and the current value) and returns what to store. The two must round-trip: whatever output stores, input must turn back into chips.
Validation. required treats an empty array (and undefined) as empty; its default message is "Please fill out this field." min, max, minLength, maxLength and pattern are not accepted, because they don't apply to arrays. Limit the number of chips with rules.validate, for example (chips) => chips.length <= 5 || "Up to 5 tags".
Per-chip checks. MuiChipsInput's own validate prop only stops new chips from being added, and its textError replaces the helper text until the user types again. It never runs against values already in the form, such as defaultValues or values set with setValue. To check those too, wrap the same function with validateChipValues and use it as a form rule. See MuiChipsInputElement for an example.
Errors and helper text. The hook returns error from the field state. With composeHelperText: true, helperText becomes the error message while the field is invalid.
Refs and blur. The returned inputRef is React Hook Form's field ref merged with your inputRef, so focus-on-error lands in the text input. The second argument to the hook is returned as ref for the component root. onBlur marks the field as touched when the text input loses focus.
Props
Prop
Type
Return value
Prop
Type