forms & validation

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Props required for custom inputs with use-form hook

Custom inputs must accept the following props to support all @mantine/form features including form.getInputProps(): value (input value in controlled mode), defaultValue (input value in uncontrolled mode), onChange (input change handler used for both controlled and uncontrolled modes), error (validation error message), and onBlur (used to set the field as touched).

Custom input with use-uncontrolled example

Example of a custom input component supporting both controlled and uncontrolled modes: import { useUncontrolled } from '@mantine/hooks'; interface CustomInputProps { value?: string; defaultValue?: string; onChange?: (value: string) => void; } function CustomInput({ value, defaultValue, onChange, }: CustomInputProps) { const [_value, handleChange] = useUncontrolled({ value, defaultValue, finalValue: 'Final', onChange, }); return ( <input type="text" value={_value} onChange={(event) => handleChange(event.currentTarget.value)} /> ); }

Disable all inputs in a form with Fieldset

To disable all inputs or input groups inside a form, use the Fieldset component. When the disabled prop is set on Fieldset, all inputs inside it are disabled. By default, Fieldset has border and padding styles. To use Fieldset only for the disabled feature without styling, set variant="unstyled".

Disable all inputs with enhanceGetInputProps in use-form

When using the use-form hook, you can disable all inputs by using the enhanceGetInputProps function to control form input behavior.

Default input size causes browser zoom on focus

Mantine inputs have a default size of 'sm' with a 14px font-size. This causes browsers to zoom in when the input is focused because the font is below the default 16px threshold that most browsers use to prevent zoom.

Prevent browser zoom on input focus with larger size

To prevent the browser from zooming in when an input is focused, increase the input size to 'md' or larger, which uses a font-size of at least 16px.

Disable browser scaling with viewport meta tag

Add the meta tag <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" /> to the <head/> of your application to disable browser scaling entirely. Note that this will disable zooming for the entire application and may cause accessibility issues.

TextInput size prop example to prevent zoom

To prevent browser zoom on focus, use: <TextInput size="md" />. The 'md' size uses a larger font that meets the browser's 16px threshold for preventing automatic zoom.

Give your agent this brain