@mantine/form 7.3.0

7.3.0 🌟

on Node.js Yarn

View changelog with demos on mantine.dev website

smaller-than and larger-than mixins

smaller-than and larger-than mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint.
Note that to use these mixins, you need to update postcss-preset-mantine to version 1.11.0 or higher.

.demo {
  @mixin smaller-than 320px {
    color: red;
  }

  @mixin larger-than 320px {
    color: blue;
  }
}

Will be transformed to:

// Breakpoint values are converted to em units
// In smaller-than mixin 0.1px is subtracted from breakpoint value
// to avoid intersection with larger-than mixin
@media (max-width: 19.99375em) {
  .demo {
    color: red;
  }
}

@media (min-width: 20em) {
  .demo {
    color: blue;
  }
}

You can also use smaller-than and larger-than mixins with mantine breakpoints:

.demo {
  @mixin smaller-than $mantine-breakpoint-sm {
    color: red;
  }

  @mixin larger-than $mantine-breakpoint-sm {
    color: blue;
  }
}

Form schema resolvers packages

@mantine/form schema validation resolver packages are now available as separate packages.
Moving resolvers to separate packages allows making them type-safe and fully tested.
Old resolvers are still exported from @mantine/form package – you will be able to use them without any changes
until 8.0.0 release.

The new packages are drop-in replacements for old resolvers, they have the same API and can be used in the same way.

Example of zod resolver:

yarn add zod mantine-form-zod-resolver

import { z } from 'zod';
import { useForm } from '@mantine/form';
import { zodResolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.string().email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zodResolver(schema),
});

form.validate();
form.errors;
// -> {
//  name: 'Name should have at least 2 letters',
//  email: 'Invalid email',
//  age: 'You must be at least 18 to create an account'
// }

rem/em functions improvements

rem and em function now support space-separated values. This feature is available
both in rem function exported from @mantine/core package and postcss-preset-mantine.
Note that you need to update postcss-preset-mantine to 1.11.0 to use this feature.

import { rem } from '@mantine/core';

rem('16px 32px');
// -> calc(1rem * var(--mantine-scale)) calc(2rem * var(--mantine-scale))

All components props that are converted to rem units now support space-separated values as well.
For example, space-separated values can be used in radius prop of Modal component:

import { Modal } from '@mantine/core';

function Demo() {
  return <Modal radius="10px 10px 0 0" opened onClose={() => {}} />;
}

component and renderRoot props for non-polymorphic components

All Mantine components now support component and renderRoot props event if they are not polymorphic.
The difference between polymorphic and non-polymorphic components is that polymorphic components
include the full set of props of the component passed to the component prop, while non-polymorphic
components only include props that are specific to the original component. It is done this way to
improve TypeScript performance.

import { Group } from '@mantine/core';

// Group is not polymorphic component,
// but it still supports component and renderRoot props
function Demo() {
  return (
    <Group component="nav">
      <a>Item 1</a>
      <a>Item 2</a>
      <a>Item 3</a>
    </Group>
  );
}

Outline Checkbox and Radio variant

Checkbox and Radio components now support outline variant:

import { Radio, Checkbox, Stack } from '@mantine/core';

function Demo() {
  return (
    <Stack gap={7}>
      <Checkbox variant="outline" label="Outline Checkbox" defaultChecked />
      <Checkbox variant="outline" label="Outline indeterminate Checkbox" indeterminate />
      <Radio variant="outline" label="Outline Radio" defaultChecked />
    </Stack>
  );
}

HueSlider and AlphaSlider components

HueSlider and AlphaSlider components were added back:

import { useState } from 'react';
import { HueSlider, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState(250);

  return (
    <>
      <Text>Hue value: {value}</Text>
      <HueSlider value={value} onChange={onChange} />
    </>
  );
}

import { useState } from 'react';
import { AlphaSlider, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState(0.55);

  return (
    <>
      <Text>Alpha value: {value}</Text>
      <AlphaSlider color="#1c7ed6" value={value} onChange={onChange} />
    </>
  );
}

Button loading state animation

Button component now has loading state animation:

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

function Demo() {
  const [loading, { toggle }] = useDisclosure();
  return (
    <>
      <Group>
        <Button loading={loading}>Filled button</Button>
        <Button variant="light" loading={loading}>
          Light button
        </Button>
        <Button variant="outline" loading={loading}>
          Outline button
        </Button>
      </Group>

      <Switch checked={loading} onChange={toggle} label="Loading state" mt="md" />
    </>
  );
}

Drawer offset

Drawer now supports offset prop. It changes drawer offset from the edge of the viewport:

import { useDisclosure } from '@mantine/hooks';
import { Drawer, Button } from '@mantine/core';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Drawer offset={8} radius="md" opened={opened} onClose={close} title="Authentication">
        {/* Drawer content */}
      </Drawer>

      <Button onClick={open}>Open Drawer</Button>
    </>
  );
}

z-index CSS variables

You can now use Mantine z-index CSS variables:

• --mantine-z-index-app – value 100
• --mantine-z-index-modal – value 200
• --mantine-z-index-popover – value 300
• --mantine-z-index-overlay – value 400
• --mantine-z-index-max – value 9999

Example of using --mantine-z-index-modal variable:

/* Display content above the modal */
.my-content {
  z-index: calc(var(--mantine-z-index-modal) + 1);
}

Improved dark color scheme colors

theme.colors.dark colors were slightly changed to improve contrast and make it easier to read text.
You can preview new colors on this page. New colors values are:

--mantine-color-dark-0: #c9c9c9;
--mantine-color-dark-1: #b8b8b8;
--mantine-color-dark-2: #828282;
--mantine-color-dark-3: #696969;
--mantine-color-dark-4: #4a4a4a;
--mantine-color-dark-5: #404040;
--mantine-color-dark-6: #383838;
--mantine-color-dark-7: #2e2e2e;
--mantine-color-dark-8: #242424;
--mantine-color-dark-9: #212121;

If you prefer old colors, change theme settings on MantineProvider:

import { createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    dark: [
      '#C1C2C5',
      '#A6A7AB',
      '#909296',
      '#5c5f66',
      '#373A40',
      '#2C2E33',
      '#25262b',
      '#1A1B1E',
      '#141517',
      '#101113',
    ],
  },
});

function Demo() {
  return <MantineProvider theme={theme}>{/* Your app here */}</MantineProvider>;
}

Documentation updates

• Schema-based validation with @mantine/form now has a dedicated page. It includes more examples for basic, nested and list fields validation for each resolver.
• Autocomplete, Select, MultiSelect and TagsInput now include new demos that show how to customize dropdown behavior and styles.
• Example of using Mantine with disabled JavaScript was added to the color schemes guide.
• Pagination now includes an additional example with chunked content handling.
• A new section about dayjs localization with Next.js app router and server components has been added to the dates getting started page
• Modals manager now includes a guide on how to pass props down to the underlying Modal component.
• Slider now has sections about decimal values and minRange prop.
• You can now view all 200+ releases with release dates on the all releases page.

Other changes

• use-hash hook now supports getInitialValueInEffect: false option to get initial value during state initialization.
• New useMantineColorScheme({ keepTransitions: true }) option allows keeping transitions when color scheme changes. Note that it is false by default.
• All templates were migrated to yarn v4 – this change significantly improves installation speed.
• TypographyStylesProvider now has styles for <kbd /> element.
• MultiSelect and TagsInput components now support hiddenValuesDivider prop. It allows customizing divider character between values in value prop of the hidden input.
• Grid component now supports overflow prop, which allows controlling overflow CSS property on the root element. It is hidden by default.
• Modal and Drawer components now support removeScrollProps prop. It allows configuring react-remove-scroll.
• AppShell now supports offsetScrollbars prop. It determines whether scrollbars should be offset, it is true by default. The logic of scrollbars offset is controlled by react-remove-scroll.
• Menu now supports trigger="click-hover" prop, to open menu both on click and on hover.
• It is now possible to set keepMounted prop on Tabs.Panel components individually, not only on Tabs component.
• mantine-flagpack has been migrated to support 7.x versions of @mantine/core. To use it, update mantine-flagpack to 4.0.0.
• vite-template was migrated from Jest to Vitest.
• The main Mantine repository was migrated to yarn v4. The process of getting started locally was changed
• @mantine/ds package has been deprecated. You can use @mantinex/mantine-logo package to use MantineLogo component in your project.