JumboForm

JumboForm is the @jumbo bridge between React Hook Form and MUI input components. It sets up an RHF FormProvider context and optionally wires in a Zod schema via zodResolver. All Jumbo* field components read from this context automatically.

Import

typescript

import {
  JumboForm,
  JumboInput,
  JumboOutlinedInput,
  JumboCheckbox,
  JumboSelect,
} from '@jumbo/vendors/react-hook-form';

JumboForm

Props

Prop	Type	Required	Description
`onSuccess`	`(data: T) => void`	Yes	Called with validated form data on submit
`validationSchema`	`ZodSchema`	No	Zod schema; wired via `zodResolver` automatically
`defaultValues`	`DefaultValues<T>`	No	RHF default values
`children`	`ReactNode`	Yes	Form fields and submit button

Usage

tsx

// src/components/LoginForm/LoginForm.tsx
import { JumboForm, JumboInput } from '@jumbo/vendors/react-hook-form';
import { Button } from '@mui/material';
import { z } from 'zod';
 
const loginSchema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(6, 'Password must be at least 6 characters'),
});
 
type LoginInput = z.infer<typeof loginSchema>;
 
export function LoginForm() {
  const { login } = useAuth();
 
  const handleSuccess = async (data: LoginInput) => {
    await login(data);
  };
 
  return (
    <JumboForm<LoginInput>
      onSuccess={handleSuccess}
      validationSchema={loginSchema}
      defaultValues={{ email: '', password: '' }}
    >
      <JumboInput
        name='email'
        label='Email address'
        type='email'
        fullWidth
        sx={{ mb: 2 }}
      />
      <JumboInput
        name='password'
        label='Password'
        type='password'
        fullWidth
        sx={{ mb: 3 }}
      />
      <Button type='submit' variant='contained' fullWidth>
        Sign in
      </Button>
    </JumboForm>
  );
}

JumboInput

MUI TextField bound to RHF. Displays inline validation errors automatically.

Props

Prop	Type	Required	Description
`name`	`string`	Yes	RHF field name; must match a key in the schema
`label`	`string`	No	Input label
`type`	`string`	No	HTML input type (`text`, `email`, `password`, etc.)
All MUI `TextField` props	—	No	Passed through to the underlying `TextField`

JumboOutlinedInput

Same as JumboInput but renders a OutlinedInput variant with an explicit InputLabel.

JumboCheckbox

MUI Checkbox + FormControlLabel bound to RHF.

Props

Prop	Type	Required	Description
`name`	`string`	Yes	RHF field name
`label`	`string \| ReactNode`	Yes	Checkbox label
All MUI `FormControlLabel` props	—	No	Passed through

JumboSelect

MUI Select + InputLabel + FormControl bound to RHF.

Props

Prop	Type	Required	Description
`name`	`string`	Yes	RHF field name
`label`	`string`	Yes	Select label
`options`	`{ value: unknown; label: string }[]`	Yes	Options to render as `MenuItem` elements
All MUI `FormControl` props	—	No	Passed through

Accessing RHF methods directly

JumboForm renders an RHF FormProvider. Use useFormContext() inside any child to access watch, setValue, formState, etc.:

tsx

import { useFormContext } from 'react-hook-form';
 
function PasswordStrengthMeter() {
  const { watch } = useFormContext<LoginInput>();
  const password = watch('password');
  return <StrengthBar value={password} />;
}

Always use Zod schemas

Pass a validationSchema to every JumboForm — never validate inputs with inline rules props. Centralising validation in a Zod schema keeps the component tree clean and makes schemas reusable across forms and server actions.