Back to all questions

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

Last updated

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

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 input with a button, you can either use inputContainer prop to wrap the button next to the in a flex container:

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:

Something went wrong

.root {
  position: relative;
}

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

.wrapper {
  margin-bottom: 0;
}