_invalid Input State Theming

Description

Is there a reason this shouldn’t work?

export const chakraTheme = extendTheme({
  components: {
    FormLabel: {
      defaultProps: { _invalid: { textColor: 'red.100' } },
    },
  },
});

It works fine as a prop on the component but I want to have it be a default.

Problem Statement/Justification

This is important as to not having to individually set _invalid states on all components throughout a codebase. We should be able to theme it directly to apply to all components.

Proposed Solution or API

(see above snippet)

Alternatives

No response

Additional Information

No response

[primos63]

My apologies. I misunderstood your issue as I was going by your theme where you list FormLabel. You’re looking to set the border color for an Input when the input is invalid, correct?

If so, then you need to look closely at the theme source.

// Theme source for Input
function getDefaults(props: Record<string, any>) {
  const { focusBorderColor: fc, errorBorderColor: ec } = props
  return {
    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
    errorBorderColor: ec || mode("red.500", "red.300")(props),
  }
}

const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
  const { theme } = props
  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
    
  return {
    field: {
      border: "1px solid",
      borderColor: "inherit",
      bg: "inherit",
      _hover: {
        borderColor: mode("gray.300", "whiteAlpha.400")(props),
      },
      _readOnly: {
        boxShadow: "none !important",
        userSelect: "all",
      },
      _disabled: {
        opacity: 0.4,
        cursor: "not-allowed",
      },
      _invalid: {
        borderColor: getColor(theme, ec),
        boxShadow: `0 0 0 1px ${getColor(theme, ec)}`,
      },
      _focus: {
        zIndex: 1,
        borderColor: getColor(theme, fc),
        boxShadow: `0 0 0 1px ${getColor(theme, fc)}`,
      },
    },

You have two options for setting the border color for an invalid Input. Option 1: Set the errorBorderColor in defaultProps

components: {
  Input: {
    defaultProps: {
      errorBorderColor: 'purple.500'
    }
  }
}

Option 2: Set the value of borderColor and boxShadow for _invalid within the variant you are using, default is outline

components: {
  Input: {
    variants: {
      outline: (props) => {
        const { theme } = props;
        return {
          field: {
            _invalid: {
              borderColor: "pink.500",
              boxShadow: `0 0 0 1px ${getColor(theme, "pink.500")}`
            }
          }
        }
      }
    },
  },
}

[Thebigbignooby]

What is the recommended way of changing the error color theme-wide?

ie: the default error color in the base theme is red.500 in light mode and red.300 in dark mode. I want to change it to red.400 for dark mode: do I have to set this for color and border for the Inputs and the FormError (duplicating a lot of code). or is there a more straightforward way of changing this?