React Hook Form

Here an example if you want to plug MuiColorInput to your form using React Hook Form.

import React from 'react';
import ReactDOM from 'react-dom';
import { Controller, useForm } from 'react-hook-form';
import { matchIsValidColor, MuiColorInput } from 'mui-color-input';
import Button from '@mui/material/Button';

const App = () => {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      color: '#ffffff',
    },
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="color"
        control={control}
        rules={{ validate: matchIsValidColor }}
        render={({ field, fieldState }) => (
          <MuiColorInput
            {...field}
            format="hex"
            helperText={fieldState.invalid ? 'Color is invalid' : ''}
            error={fieldState.invalid}
          />
        )}
      />
      <div>
        <Button type="submit" variant="contained" sx={{ mt: 2 }}>
          Submit
        </Button>
      </div>
    </form>
  );
};