Awesome HTML Trick: Stop Prop Drilling `disabled` State to 10 Components! 🚀

Today, I ran into a super annoying yet common challenge in one of my projects. I wanted to share how I solved it using a hidden gem from vanilla HTML, saving myself from unnecessary code complexity.

The Problem

I had a form made up of about 10 different nested components and multiple inputs. When the user submitted the form, an API request was fired, and I needed to disable all inputs and buttons during the loading state to prevent double-clicks or accidental edits.

My initial thought was:

"Alright, I'll create an isLoading state in the parent component and pass it down as a prop to all 10 child components."

But as soon as I started typing, I cringed. Prop drilling across 10 components just for a simple loading state? No, thanks!

My second option was using React Context, but honestly, adding context just to disable a few form fields felt like complete over-engineering.

The Solution: <fieldset> to the Rescue!

Enter the humble <fieldset> tag—an old-school HTML element many developers completely forget about.

Here is the magic feature: When you set the disabled attribute on a <fieldset>, all nested <input>, <button>, <textarea>, and <select> elements inside it automatically inherit that disabled state!

No matter how deeply nested your child components are, you don't need to pass disabled to a single one of them manually.

Before vs. After

❌ The Messy Way (Prop Drilling)

function ParentForm() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <form>
      <InputOne disabled={isLoading} />
      <InputTwo disabled={isLoading} />
      <SelectComponent disabled={isLoading} />
      {/* ... and 8 other components ... */}
      <SubmitButton isLoading={isLoading} />
    </form>
  );
}

✅ The Clean Way (<fieldset>)

function ParentForm() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <form>
      <fieldset disabled={isLoading}>
        <InputOne />
        <InputTwo />
        <SelectComponent />
        {/* Everything inside is automatically disabled! */}
        <SubmitButton />
      </fieldset>
    </form>
  );
}

A Quick Tip

By default, browsers render a border and some margin around <fieldset>. You can easily reset it with basic CSS so it acts as a clean wrapper:

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

---

Conclusion

Sometimes, the best solution in modern frameworks isn't writing more JavaScript, but leaning back on standard HTML features.

Have you used this <fieldset> trick before, or are you still relying on props and context? Let me know in the comments below! 👇