Input Focus Styles

import { InputFocusStyles } from '@/demos/InputFocusStyles.demo'; import { InputThemeFocusStyles } from '@/demos/InputThemeFocusStyles.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How can I change input focus styles?', description: 'Learn how to use Styles API with Mantine inputs', slug: 'input-focus-styles', category: 'styles', tags: ['tabs', 'Styles API'], created_at: 'February 15, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

Change focus styles of a single input

To change the focus styles of a single input, use Styles API. Note that in order for this to work correctly with all inputs, you need to use the :focus-within pseudo-class instead of :focus:

<Demo data={InputFocusStyles} />

Change focus styles of all inputs

To change the focus styles of all inputs, use Styles API with the Input component in the theme object:

<Demo data={InputThemeFocusStyles} />