Problem 3: Conflicting Props

Props that contradict each other

The Problem: Conflicting Props
Props that create invalid combinations

What happens if you pass disabled= and required=? Or loading= and error=?

Invalid Combination 1:

What does this mean? Can't submit but is required?

Invalid Combination 2:

All three true? Which state should display?

Issues:

  • Invalid prop combinations are possible
  • Runtime errors instead of compile-time errors
  • Unclear which props work together
  • Difficult to document valid combinations
  • Poor developer experience