Changing mantine TextInput error border color

Question

Is there a way to use a selector to change the border color for Mantine V6 TextInput when the error is set?

I can do this by setting the borderColor within the sx object as follows:

<TextInput sx={{ borderColor: error ? 'red': 'green' }} />

but then I have to set the standard borderColor as well.

Using dev tools, I can see that they have a data-invalid class, but I can't seem to find a way to use a selector to target that:

.mantine-188bo4n[data-invalid] {
    color: #fa5252;
    border-color: #fa5252;
}

I know they have the errors property within the styles object but that seems to just target the error text under the input.

Any help would be much appreciated.

Note: I'm using inline styles and the sx prop. I do not want to be using external CSS files.

Usama Kayani · Accepted Answer · 2024-11-18 09:32:29Z

0

Targeting the data-invalid attribute directly via sx might not work as expected, but the error prop provides a more direct and reliable way to style the input based on its state.

<TextInput
  error={error}
  classNames={{
    root: error ? 'custom-invalid' : 'custom-valid',  // Apply custom class conditionally
  }}
  sx={{
    '&.custom-invalid': {
      borderColor: 'red',  // Red border for error state
    },
    '&.custom-valid': {
      borderColor: 'green',  // Green border for valid state
    },
  }}
/>

edited Nov 18, 2024 at 9:32

answered Nov 18, 2024 at 9:24

Usama Kayani

1784 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yhfullstack Over a year ago

'&[data-invalid="true"]' does not seem to have any effect.

Usama Kayani Over a year ago

<TextInput error={error} classNames={{ root: error ? 'custom-invalid' : 'custom-valid', // Apply custom class conditionally }} sx={{ '&.custom-invalid': { borderColor: 'red', // Red border for error state }, '&.custom-valid': { borderColor: 'green', // Green border for valid state }, }} /> Try this one

yhfullstack Over a year ago

Your new solution still has the same problem. I'm looking to set just the error styles without needing to define the non error styles.

Collectives™ on Stack Overflow

Changing mantine TextInput error border color

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related