OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add mantinedev/skills --skill mantine-form
Build forms using @mantine/form in the mantine-9 repository. Use this skill when: (1) setting up a form with useForm, (2) adding validation rules or async validation, (3) working with nested object or array fields, (4) sharing form state across components with createFormContext, (5) using uncontrolled mode for performance, (6) using the standalone useField hook, or (7) any task involving useForm, getInputProps, onSubmit, insertListItem, or form validation.
npx skills add mantinedev/skills --skill mantine-form
For checkboxes pass { type: 'checkbox' }:
onSubmit only calls the handler when validation passes. To handle failures:
| 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/api.md — Full API: useForm options, complete return value, useField, createFormContext, createFormActions, all built-in validators, key typesreferences/patterns.md — Code examples: nested objects, array fields, async validation, form context across components, transformValues, useField standalone<TextInput {...form.getInputProps('email')} label="Email" />
<NumberInput {...form.getInputProps('age')} label="Age" /><Checkbox {...form.getInputProps('agreed', { type: 'checkbox' })} label="I agree" /><form onSubmit={form.onSubmit((values) => console.log(values))}>
...
<Button type="submit">Submit</Button>
</form>form.onSubmit(
(values) => save(values),
(errors) => console.log('Validation failed', errors)
)validate: {
name: isNotEmpty('Required'),
email: isEmail('Invalid email'),
password: hasLength({ min: 8 }, 'Min 8 chars'),
confirmPassword: matchesField('password', 'Passwords do not match'),
}validate: (values) => ({
endDate: values.endDate < values.startDate ? 'End must be after start' : null,
})validateInputOnChange: true, // validate all fields on every change
validateInputOnChange: ['email'], // validate specific fields only
validateInputOnBlur: true, // validate on blur instead