How to align input with a button in a flex container?

If you try to align a Mantine input with a button in a flex container, you will notice that the input is not aligned with the button. This happens because Mantine inputs have associated elements: label, description, and error message.

Your email

Something went wrong

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

function Demo() {
  return (
    <Group align="flex-end">
      <TextInput label="Your email" error="Something went wrong" />
      <Button>Submit</Button>
    </Group>
  );
}

To align the input with a button, you can either use the inputContainer prop to wrap the button next to it in a flex container:

Your email

Something went wrong

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

function Demo() {
  return (
    <TextInput
      label="Your email"
      error="Something went wrong"
      inputContainer={(children) => (
        <Group align="flex-start">
          {children}
          <Button>Submit</Button>
        </Group>
      )}
    />
  );
}

Or change error/description position to absolute with Styles API:

Your email

Something went wrong

.root {
  position: relative;
}

.error {
  position: absolute;
  bottom: rem(-18px);
}

.wrapper {
  margin-bottom: 0;
}