Align Input Button

import { AlignInputButton, AlignInputButtonCorrect, AlignInputButtonStyles, } from '@/demos/AlignInputButton.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How to align input with a button in a flex container?', description: 'Learn how to align Mantine inputs with buttons using Group component', slug: 'align-input-button', category: 'styles', tags: ['inputs', 'button', 'flexbox', 'centering'], created_at: 'February 15, 2024', last_updated_at: 'February 15, 2024', };

export default Layout(meta);

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.

<Demo data={AlignInputButton} />

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:

<Demo data={AlignInputButtonCorrect} />

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

<Demo data={AlignInputButtonStyles} />