mantine-form

Mantine Form Skill

Core Workflow

1. Set up the form

const form = useForm({
  mode: 'controlled',       // or 'uncontrolled' for large forms
  initialValues: {
    email: '',
    age: 0,
  },
  validate: {
    email: isEmail('Invalid email'),
    age: isInRange({ min: 18 }, 'Must be at least 18'),
  },
});

2. Wire inputs with getInputProps

<TextInput {...form.getInputProps('email')} label="Email" />
<NumberInput {...form.getInputProps('age')} label="Age" />

For checkboxes pass { type: 'checkbox' }:

<Checkbox {...form.getInputProps('agreed', { type: 'checkbox' })} label="I agree" />

3. Handle submission

<form onSubmit={form.onSubmit((values) => console.log(values))}>
  ...
  <Button type="submit">Submit</Button>
</form>

onSubmit only calls the handler when validation passes. To handle failures:

form.onSubmit(
  (values) => save(values),
  (errors) => console.log('Validation failed', errors)
)

Validation

Rules object (most common)

validate: {
  name: isNotEmpty('Required'),
  email: isEmail('Invalid email'),
  password: hasLength({ min: 8 }, 'Min 8 chars'),
  confirmPassword: matchesField('password', 'Passwords do not match'),
}

Function (for cross-field logic)

validate: (values) => ({
  endDate: values.endDate < values.startDate ? 'End must be after start' : null,
})

When to validate

validateInputOnChange: true,        // validate all fields on every change
validateInputOnChange: ['email'],    // validate specific fields only
validateInputOnBlur: true,          // validate on blur instead

Modes

Mode	State storage	Re-renders	Input props
'controlled' (default)	React state	On every change	value + onChange
'uncontrolled'	Refs	None	defaultValue + onChange

In uncontrolled mode, use form.key('fieldPath') as the React key prop when you need to force a re-render of an input.