This is a short post, but I think it’s a good one to know about the <fieldset> HTML element.

I’m doing the course “Ship an App with Remix” by Sam Selikoff, and one of the steps covers preventing duplicate entries when clicking “Save” multiple times.

What makes <fieldset> special is that it has a disabled prop!
There’s no disabled prop on an entire <form>, but there is on a <fieldset>.

So you can wrap all your form inputs in a fieldset and pass the submitting state to it, disabling the whole form — like in the example below:

<fetcher.Form method="post">
  <fieldset
    className="disabled:opacity-80"
    disabled={fetcher.state === "submitting"}
  >
    {/* ... */}
  </fieldset>
</fetcher.Form>

And that’s all for today — thank you for reading.