Mantine Form スキル

コアワークフロー

1. フォームをセットアップする

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. getInputProps でインプットを接続する

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

チェックボックスの場合は { type: 'checkbox' } を渡します:

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

3. サブミッションを処理する

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

onSubmit は検証が成功した場合のみハンドラを呼び出します。失敗時に処理する場合:

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

モード

モード	状態の保存	再レンダリング	インプットプロップス
'controlled' (デフォルト)	React state	変更のたびに	value + onChange
'uncontrolled'	Refs	なし	defaultValue + onChange

非制御モードでは、インプットの再レンダリングを強制する必要がある場合、React の key プロップとして form.key('fieldPath') を使用します。

参考資料

• references/api.md — 完全な API: useForm オプション、完全な戻り値、useField、createFormContext、createFormActions、すべての組み込みバリデータ、キーの型
• references/patterns.md — コード例: ネストされたオブジェクト、配列フィールド、非同期検証、コンポーネント間のフォームコンテキスト、transformValues、スタンドアロンの useField