Focus First Input With Error

import { FocusFirstInputWithError } from '@/demos/FocusFirstInputWithError.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How can I focus the first input with error with use-form?', description: 'Learn how to handle focus with use-form hook', slug: 'focus-first-input-with-error', category: 'forms', tags: ['inputs', 'focus', 'error', 'use-form', 'useForm'], created_at: 'July 15, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

Get input DOM node with use-form

You can use the form.getInputNode function to get the input DOM node at the given path. For example:

import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    order_id: null,
    user: { email: '' },
  },
});

// Returns the input DOM node for order_id input
form.getInputNode('order_id');

// Returns the input DOM node for user.email input
form.getInputNode('user.email');

Focus first input with error on form submit

The form.onSubmit handler accepts two functions: the first function is called with valid form values when validation passes, the second function is called with form errors when validation fails. You can use the second function and form.getInputNode to focus the first input with an error: