Disable All Inputs In Form

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

export const meta = { title: 'How can I disable all inputs/input groups inside a form?', description: 'Learn how to disable all inputs/input groups inside a form with the unstyled Fieldset component', slug: 'disable-all-inputs-in-form', category: 'forms', tags: ['form', 'inputs', 'Fieldset'], created_at: 'November 30, 2023', last_updated_at: 'July 15, 2023', };

export default Layout(meta);

Disable all inputs with fieldset

To disable all inputs/input groups inside a form, you can use the Fieldset component. If the 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 the disabled feature, set variant="unstyled":

<Demo data={FieldsetInputs} />

Disable all inputs with enhanceGetInputProps

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

<Demo data={EnhanceDisableInputs} />