MuiColorInputElement
A mui-color-input field connected to React Hook Form that stores the color as a string in the format you choose.
MuiColorInputElement renders MuiColorInput from mui-color-input and stores the selected color in React Hook Form as a string. It accepts all MuiColorInput props, such as format, isAlphaHidden and fallbackValue. To build your own color field, use useMuiColorInputAdapter.
Import
import { MuiColorInputElement } from "@piplup/rhf-adapters/mui-color-input";Usage
"use client";import Stack from "@mui/material/Stack";import { MuiColorInputElement } from "@piplup/rhf-adapters/mui-color-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { accent: "#1976d2" }, }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <MuiColorInputElement control={control} name="accent" label="Accent color" /> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}Handling invalid colors
The element stores whatever is in the text box, valid or not. There are two ways to deal with that:
- Validate it. Add
rules.validatewithmatchIsValidColorfrommui-color-input, as on the Background field below. Type#12and submit. - Replace it. Set
fallbackValue. When the input loses focus with invalid text, the component swaps in the fallback and stores it, as on the Border field. Typexyzand tab away.
"use client";import Stack from "@mui/material/Stack";import { MuiColorInputElement } from "@piplup/rhf-adapters/mui-color-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { matchIsValidColor } from "mui-color-input";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { background: "", border: "" }, }); return ( <form noValidate onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)))} > <Stack direction="column" spacing={2}> {/* Invalid text is stored as typed, so validate it. */} <MuiColorInputElement control={control} name="background" label="Background" format="hex" required messages={{ required: "Pick a background color" }} rules={{ validate: (value) => matchIsValidColor(value) || "Enter a valid color, e.g. #ff8800", }} /> {/* Invalid text is replaced with the fallback when the field loses focus. */} <MuiColorInputElement control={control} name="border" label="Border" format="rgb" fallbackValue="#000000" helperText="Invalid colors reset to black on blur" /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Submit </MuiButtonElement> </div> </Stack> </form> );}How it works
Stored format. A valid color is stored in the component's format: rgb by default ("rgb(25, 118, 210)"), or hex, hex8, hsl or hsv if you set it. Picking a color in the popover stores it in the same format. defaultValues can be in any format MuiColorInput understands; it is stored unchanged until the user edits it.
Empty and invalid input. Clearing the input stores "", which fails required ("Please fill out this field." by default). Invalid text is stored as typed, so required alone doesn't guarantee a usable color.
Rules. pattern, minLength and maxLength check the stored string, e.g. pattern={/^#[0-9a-f]{6}$/i} together with format="hex".
Errors and helper text. While the field is invalid, its error message replaces helperText.
Refs. inputRef is merged with React Hook Form's ref, so the text input gets focus when the field fails validation on submit. A ref on the element goes to the MuiColorInput root.
Props
Prop
Type