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

For checkboxes pass { type: 'checkbox' }:

3. Handle submission

 console.log(values))}>
  ...
  Submit

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.

References

• [references/api.md](references/api.md) — Full API: useForm options, complete return value, useField, createFormContext, createFormActions, all built-in validators, key types
• [references/patterns.md](references/patterns.md) — Code examples: nested objects, array fields, async validation, form context across components, transformValues, useField standalone

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mantinedev
• Source: mantinedev/skills
• License: MIT

Install and usage instructions live in the source repository linked above.