How can I disable all inputs/inputs group inside form?

Last updated July 15, 2023

Disable all inputs with fieldset

To disable all inputs/inputs group inside form, you can use the Fieldset component. If disabled prop is set, all inputs inside Fieldset are disabled. By default, Fieldset has border and padding styles. If you want to use Fieldset only for disabled feature, set variant="unstyled":

import { Fieldset, TextInput, Button } from '@mantine/core';

function Demo() {
  return (
    <form>
      <Fieldset disabled variant="unstyled">
        <TextInput label="Your name" placeholder="Your name" />
        <TextInput label="Your email" placeholder="Your email" mt="md" />
        <Button type="submit" mt="md">
          Submit
        </Button>
      </Fieldset>
    </form>
  );
}

Disable all inputs with enhanceGetInputProps

If you use use-form for your form, you can disable all inputs with enhanceGetInputProps:

import { useState } from 'react';
import { Button, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const [disabled, setDisabled] = useState(false);

  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { name: '', email: '' },
    enhanceGetInputProps: () => ({ disabled }),
  });

  return (
    <form>
      <TextInput
        label="Your name"
        placeholder="Your name"
        {...form.getInputProps('name')}
        key={form.key('name')}
      />
      <TextInput
        label="Your email"
        placeholder="Your email"
        mt="md"
        {...form.getInputProps('email')}
        key={form.key('email')}
      />
      <Button mt="md" onClick={() => setDisabled((d) => !d)}>
        Toggle disabled
      </Button>
    </form>
  );
}