How can I change input focus styles?

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:

TextInput with custom focus styles

.input {
  &:focus-within {
    outline: rem(2px) solid var(--mantine-primary-color-filled);
  }
}

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:

Text input

Native select

.input {
  &:focus-within {
    outline: rem(2px) solid var(--mantine-primary-color-filled);
  }
}