useMuiColorInputAdapter
Returns adapter props for wiring mui-color-input's MuiColorInput to React Hook Form, for color fields with your own format and checks.
useMuiColorInputAdapter connects a field to React Hook Form and returns props you spread onto MuiColorInput from mui-color-input. It's what MuiColorInputElement uses internally.
Use the element for most forms. Reach for the hook when you want a color field with a fixed format and project rules, such as brand or theme colors that must meet a contrast requirement, reused across forms.
Import
import { useMuiColorInputAdapter } from "@piplup/rhf-adapters/mui-color-input";Usage
This ButtonColorField accepts hex colors only, hides the alpha slider, and rejects colors too light for white text. Try #ffeb3b or an invalid value like #12, then submit. The preview button reads the stored value with useWatch.
"use client";import Button from "@mui/material/Button";import Stack from "@mui/material/Stack";import { useMuiColorInputAdapter } from "@piplup/rhf-adapters/mui-color-input";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { MuiColorInput, matchIsValidColor } from "mui-color-input";import { type Control, useForm, useWatch } from "react-hook-form";type FormValues = { buttonColor: string };// Perceived brightness of a "#rrggbb" color, from 0 (black) to 255 (white).function brightness(hex: string) { const rgb = parseInt(hex.slice(1, 7), 16); const r = (rgb >> 16) & 255; const g = (rgb >> 8) & 255; const b = rgb & 255; return (r * 299 + g * 587 + b * 114) / 1000;}// A color field for button backgrounds: hex only, no alpha,// and it rejects colors too light for white button text.function ButtonColorField({ control }: { control: Control<FormValues> }) { const adapter = useMuiColorInputAdapter<string, FormValues, "buttonColor", HTMLDivElement>({ control, name: "buttonColor", required: true, composeHelperText: true, helperText: "Used behind white button text", messages: { required: "Pick a button color" }, rules: { validate: { valid: (value) => matchIsValidColor(value) || "Enter a valid hex color", contrast: (value) => brightness(value) < 128 || "Too light for white text", }, }, }); return <MuiColorInput label="Button color" format="hex" isAlphaHidden {...adapter} />;}function Preview({ control }: { control: Control<FormValues> }) { const color = useWatch({ control, name: "buttonColor" }); const background = matchIsValidColor(color) ? color : undefined; return ( <Button variant="contained" sx={{ bgcolor: background, alignSelf: "flex-start" }}> Preview </Button> );}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { buttonColor: "#1976d2" }, }); return ( <form noValidate onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)))} > <Stack direction="column" spacing={2}> <ButtonColorField control={control} /> <Preview control={control} /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Save theme </MuiButtonElement> </div> </Stack> </form> );}How it works
Value. The form value is passed to MuiColorInput as value, and the first argument of its onChange is stored: the color as a string in the component's format (rgb unless you set one). So with format="hex", typing red stores "#ff0000".
Text that isn't a valid color is stored exactly as typed, for example "#12", and clearing the input stores "". The hook adds no color check of its own, so add one with rules.validate and matchIsValidColor from mui-color-input. required only rejects the empty string.
Other formats. onChange also receives an object with the color in every format (hex, hex8, rgb, hsl, hsv). transform.output gets the same arguments, so (value, colors) => colors.hex would store hex whatever the format. Those strings are empty while the typed text is invalid, though, and storing "" mid-typing clears the input. Setting format is the safer way to choose the stored format.
Validation. All standard props apply to the stored string. pattern, for instance, can restrict values to six-digit hex (/^#[0-9a-f]{6}$/i). Its default message is "Please match the requested format."
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 the text input gets focus when validation fails. The second argument to the hook is returned as ref for the root. onBlur marks the field as touched when the text input loses focus, then calls your onBlur.
Props
Prop
Type
Return value
Prop
Type