How to create one form with many actions in Remix

We have been in the middle of a migration at Crunchy Data from an express app to Remix, and boy have there been plenty of technical tidbits I am excited to write about on here. Last week I had a really interesting one I couldn't wait to write about. So let's do it.
In our app we have an integrated set of support pages. Behind the scenes it is run through Helpscout, but in app we allow teams to create, reply, and close support tickets without needing to jump to an email client.
The interesting implementation I came across appeared as I was migrating our open ticket page.
As you can see the page consists of three core areas.
Reply form.
Ticket details
Message Thread
What we are digging into is the first one.
One form multiple actions

The reply form is unique in that it is responsible for 3 potential actions that can be taken on it.
If no message exists you can close the ticket using the secondary button.
Once you have typed a message, that secondary button changes allowing you to submit that message as a new reply on the ticket thread and close the ticket at the same time.
Or, you can just submit the message and leave the ticket open.
Three very different outcomes that all live within that single form.
Obviously we could isolate the close ticket button somewhere else in the UI so that the form only has two actions, buuut we like the UX of having all actions that effect the state of the ticket tied together in a single place.
Thankfully, the solution for allowing that is a html feature that has been around since..well I am pretty sure forever. So, let's knock out the core solution and then we can dig into some extra ✨ that makes it nicer to work with in Remix and Typescript.
The core solution

This is all you really need to know that makes this whole thing tick.
In html a button is allowed to have a name and a value. This name and value combo is only appended to the form data if it is the button that was used to submit the form.
That's it. That is the solution, and here is what that shakes down to in our Remix codebase:

	
		
			New Message
		
		
			
				How can we help you today?
			
			
				 setMessage(e.target.value)}
					key={transition.location?.key}
				/>
			</div>
			<p className="mt-2 text-sm">
				Please include the time zone for any timestamps. Thanks!
			</p>
		</Panel.Body>
	</Panel>
	<Actions fullWidth>
		<Button
			disabled={transition.state !== 'idle'}
			type="submit"
			variant="outline"
			name="actionId"
			value={message.length ? 'reply-and-close' : 'close'}
		>
			{message.length ? 'Close and comment' : 'Close ticket'}
		</Button>
		<Button
			disabled={transition.state !== 'idle'}
			type="submit"
			name="actionId"
			value="reply"
		>
			Post reply
			<EnvelopeIcon
				aria-hidden="true"
				className="ml-2 -mr-1 h-4 w-4"
			/>
		</Button>
	</Actions>
</Form></pre></div><form class="border-foreground/20 font-code absolute top-0 left-full ml-2 hidden rounded-lg border p-0.5 text-xs md:block"><input type="hidden" hidden="" readonly="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"/><input type="radio" hidden="" readonly="" name="size" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none" checked="" value="text-sm"/><div class="flex gap-1 lg:flex-col" id="headlessui-radiogroup-:R4ikj5:" role="radiogroup"><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R3cikj5:" role="radio" aria-checked="true" tabindex="0" data-headlessui-state="checked" data-checked="">sm</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R5cikj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">md</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R7cikj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">lg</span></div></form></div><p>After that you can handle the submission on your server however you want because you're just working with a formData submission like usual. That being said, let's dig into some extra systems we put in place at Crunchy to deal with the potential states this form can be submitted as.</p><h2>Unions and Validation</h2><p>If you have never heard this quote before I am happy to introduce you to it:</p><blockquote><p>Make impossible states impossible</p></blockquote><p>This is a mantra of type driven development where you eliminate states where data should be impossible. Let's look at how they applies here.</p><p>We have a single form that looks something like this:</p><div class="custom-scroll relative md:-mx-10 lg:-mx-12"><div class="text-xs md:text-sm [&>*]:border-foreground/10 bg-layer [&>*]:rounded-xl [&>*]:border [&>*]:pt-4"><pre>type Submission = {
  message?: string
  actionId: "reply" | "close" | "reply-and-close"
}</pre></div><form class="border-foreground/20 font-code absolute top-0 left-full ml-2 hidden rounded-lg border p-0.5 text-xs md:block"><input type="hidden" hidden="" readonly="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"/><input type="radio" hidden="" readonly="" name="size" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none" checked="" value="text-sm"/><div class="flex gap-1 lg:flex-col" id="headlessui-radiogroup-:R4pkj5:" role="radiogroup"><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R3cpkj5:" role="radio" aria-checked="true" tabindex="0" data-headlessui-state="checked" data-checked="">sm</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R5cpkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">md</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R7cpkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">lg</span></div></form></div><p>Anytime you see an option param it’s worth taking a second look at your type and see if you can eliminate it. In our case we know that if our submission is <code class="bg-foreground/10 inline-block px-1 text-sm before:hidden after:hidden">close</code> we will never have a message. We also know that the other two actions should always have a message. How can our type help us?</p><div class="custom-scroll relative md:-mx-10 lg:-mx-12"><div class="text-xs md:text-sm [&>*]:border-foreground/10 bg-layer [&>*]:rounded-xl [&>*]:border [&>*]:pt-4"><pre>type Submission =
  | { action: "close" }
  | {
      actionId: "reply" | "reply-and-close"
      message: string
    }</pre></div><form class="border-foreground/20 font-code absolute top-0 left-full ml-2 hidden rounded-lg border p-0.5 text-xs md:block"><input type="hidden" hidden="" readonly="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"/><input type="radio" hidden="" readonly="" name="size" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none" checked="" value="text-sm"/><div class="flex gap-1 lg:flex-col" id="headlessui-radiogroup-:R4rkj5:" role="radiogroup"><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R3crkj5:" role="radio" aria-checked="true" tabindex="0" data-headlessui-state="checked" data-checked="">sm</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R5crkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">md</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R7crkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">lg</span></div></form></div><p>Awesome our type now matches the states we expect to work with. At Crunchy we take it a step further as well and add in runtime validation. Most people are familiar with Zod, we use a similar library <code class="bg-foreground/10 inline-block px-1 text-sm before:hidden after:hidden">@badrap/valita</code> . Here is what the type above looks like translated over and how you can use that to validate your form data in an action.</p><div class="custom-scroll relative md:-mx-10 lg:-mx-12"><div class="text-xs md:text-sm [&>*]:border-foreground/10 bg-layer [&>*]:rounded-xl [&>*]:border [&>*]:pt-4"><pre>const SubmissionValidator = v.union(
	v.object({
		actionId: v.literal('close'),
	}),
	v.object({
		actionId: v.union(v.literal('reply'), v.literal('reply-and-close')),
		message: v.string(),
	}),
)

export async function action({ context, params }: ActionArgs) {
	const formData = await request.formData()
	const validated = SubmissionValidator.try(formData, { mode: 'strip' })

	if (!validated.ok) {
		return json({
			message: 'Validation failed on your message submission.',
			messageType: 'error',
		})
	}

	const { value } = validated

	if (value.actionId === 'reply') {
		// do stuff
	} else if (value.actionId === 'close') {
		// do stuff
	} else if (value.actionId === 'reply-and-close') {
		// do stuff
	}
}</pre></div><form class="border-foreground/20 font-code absolute top-0 left-full ml-2 hidden rounded-lg border p-0.5 text-xs md:block"><input type="hidden" hidden="" readonly="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"/><input type="radio" hidden="" readonly="" name="size" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none" checked="" value="text-sm"/><div class="flex gap-1 lg:flex-col" id="headlessui-radiogroup-:R4tkj5:" role="radiogroup"><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R3ctkj5:" role="radio" aria-checked="true" tabindex="0" data-headlessui-state="checked" data-checked="">sm</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R5ctkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">md</span><span class="data-[checked]:bg-foreground/20 data-[checked]:text-foreground border border-transparent rounded-md text-foreground/65 p-1 flex items-center justify-center cursor-pointer" id="headlessui-radio-:R7ctkj5:" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state="">lg</span></div></form></div><h2>It is in fact just a button</h2><p>When I found out that a button could do this it opened up so many new doors in my mind for simplifying forms across our codebase and I knew I had to share it with you too.</p><p>Hope it helps! Reach out if you want to talk about this or any other related stuff over on twitter.</p><div class="not-prose text-background bg-foreground w-full overflow-hidden"><svg width="650" height="22" fill="none" viewBox="0 0 650 22" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="four" patternUnits="userSpaceOnUse" width="8" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="0" y="0" width="4" height="1" fill="currentColor"></rect></pattern><pattern id="three" patternUnits="userSpaceOnUse" width="6" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="0" y="0" width="3" height="1" fill="currentColor"></rect></pattern><pattern id="two" patternUnits="userSpaceOnUse" width="4" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="0" y="0" width="2" height="1" fill="currentColor"></rect></pattern><pattern id="twoTwo" patternUnits="userSpaceOnUse" width="4" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="2" y="0" width="2" height="1" fill="currentColor"></rect></pattern><pattern id="twoThree" patternUnits="userSpaceOnUse" width="4" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="0" y="0" width="1" height="1" fill="currentColor"></rect><rect fill-rule="evenodd" clip-rule="evenodd" x="3" y="0" width="1" height="1" fill="currentColor"></rect></pattern><pattern id="twoFour" patternUnits="userSpaceOnUse" width="4" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="1" y="0" width="2" height="1" fill="currentColor"></rect></pattern><pattern id="threeInvert" patternUnits="userSpaceOnUse" width="6" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="2" y="0" width="3" height="1" fill="currentColor"></rect></pattern><pattern id="fourInvert" patternUnits="userSpaceOnUse" width="8" height="1"><rect fill-rule="evenodd" clip-rule="evenodd" x="3" y="0" width="4" height="1" fill="currentColor"></rect></pattern></defs><rect x="0" y="0" width="650" height="1" fill="url(#four)"></rect><rect x="0" y="1" width="650" height="2" class="fill-background"></rect><rect x="0" y="3" width="650" height="1" fill="url(#three)"></rect><rect x="0" y="4" width="650" height="1" class="fill-background"></rect><rect x="0" y="5" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="6" width="650" height="1" fill="url(#twoTwo)"></rect><rect x="0" y="7" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="8" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="9" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="10" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="11" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="12" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="13" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="14" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="15" width="650" height="1" fill="url(#twoTwo)"></rect><rect x="0" y="16" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="17" width="650" height="1" class="fill-foreground"></rect><rect x="0" y="18" width="650" height="1" fill="url(#threeInvert)"></rect><rect x="0" y="19" width="650" height="2" class="fill-foreground"></rect><rect x="0" y="21" width="650" height="1" fill="url(#fourInvert)"></rect></svg><div class="p-4 md:p-6 lg:p-12"><h3 class="text-primary font-mono text-sm font-semibold uppercase">I hope you enjoyed</h3><h2 class="font-display text-2xl font-semibold lg:text-3xl">There is a lot more coming...</h2><p class="mt-4 font-mono text-sm">If you want to get updates when I publish new guides, demos, and more just put your email in below.</p><form method="post" action="/guides/how-to-create-one-form-with-many-actions-in-remix" id="newsletter-form" novalidate="" class="mt-8 flex flex-col"><div class="flex w-full flex-col gap-4 md:flex-row md:items-end"><div id="honeypot_wrap" style="display:none" aria-hidden="true"><label for="honeypot">Please leave this field blank</label><input id="honeypot" name="honeypot" type="text" autoComplete="nope" tabindex="-1" value=""/><label for="honeypot_from">Please leave this field blank</label><input id="honeypot_from" name="honeypot_from" type="text" readonly="" autoComplete="off" tabindex="-1" value="U2FsdGVkX1+HgCZL/2HKIFh2mPWLJgYVpgTGslAa8xY="/></div><div class="flex flex-1 flex-col gap-1"><label class="font-mono text-sm" for="newsletter-form-email">Email Address</label><input required="" name="email" form="newsletter-form" type="email" placeholder="youare@awesome.com" autoComplete="email" class="border-background/20 focus:ring-primary/20 focus:border-primary placeholder:text-background/50 rounded-md border py-1.5 px-2 font-mono text-sm focus:ring-2 focus:outline-none" id="newsletter-form-email" data-headlessui-state=""/></div><button class="rounded-md border-background/10 bg-background/20 hover:[&:not(:disabled)]:bg-background/30 font-code text-sm border py-1.5 px-3 relative flex items-center justify-center gap-2.5 cursor-pointer transition"><span class="transition duration-200">Get Updates</span><span class="w-4"><svg class="h-auto w-full" width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H2H3H4H5H6H7H8H9H10H11H12V1H13V2V3V4V5V6V7V8V9V10H12V11H11H10H9H8H7H6H5H4H3H2H1V10H0V9V8V7V6V5V4V3V2V1H1V0ZM7 8V7H8V6H9V5H10V4H11V3H12V2H11V3H10V4H9V5H8V6H7V7H6V6H5V5H4V4H3V3H2V2H1V3H2V4H3V5H4V6H5V7H6V8H7Z" fill="currentColor"></path></svg></span></button></div></form></div><svg width="650" height="22" fill="none" viewBox="0 0 650 22" xmlns="http://www.w3.org/2000/svg" class="rotate-180"><rect x="0" y="0" width="650" height="1" fill="url(#four)"></rect><rect x="0" y="1" width="650" height="2" class="fill-background"></rect><rect x="0" y="3" width="650" height="1" fill="url(#three)"></rect><rect x="0" y="4" width="650" height="1" class="fill-background"></rect><rect x="0" y="5" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="6" width="650" height="1" fill="url(#twoTwo)"></rect><rect x="0" y="7" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="8" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="9" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="10" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="11" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="12" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="13" width="650" height="1" fill="url(#twoThree)"></rect><rect x="0" y="14" width="650" height="1" fill="url(#twoFour)"></rect><rect x="0" y="15" width="650" height="1" fill="url(#twoTwo)"></rect><rect x="0" y="16" width="650" height="1" fill="url(#two)"></rect><rect x="0" y="17" width="650" height="1" class="fill-foreground"></rect><rect x="0" y="18" width="650" height="1" fill="url(#threeInvert)"></rect><rect x="0" y="19" width="650" height="2" class="fill-foreground"></rect><rect x="0" y="21" width="650" height="1" fill="url(#fourInvert)"></rect></svg></div></div></article></div><footer class="border-foreground flex items-center justify-between gap-8 border-t p-2"><p class="flex items-center gap-2 text-sm font-semibold">wking © <!-- -->2024</p><div class="flex items-center gap-2"><nav class="font-code flex items-center gap-2 text-xs"><a target="_blank" href="https://github.com/wking-io" class="text-foreground/65 hover:text-foreground" rel="noreferrer"><svg class="w-4 h-4 inline self-center"><use href="/assets/sprite-DgH-WDEL.svg#github-logo"></use></svg><span class="sr-only">Checkout my github</span></a><a target="_blank" href="https://www.x.com/wking__" class="text-foreground/65 hover:text-foreground" rel="noreferrer"><svg class="w-4 h-4 inline self-center"><use href="/assets/sprite-DgH-WDEL.svg#twitter-logo"></use></svg><span class="sr-only">Follow me on X</span></a></nav></div></footer><script>window.ENV = {"ALLOW_INDEXING":"true","FATHOM_ID":"YFYDWIUY"}</script><script>((STORAGE_KEY2, restoreKey) => {
    if (!window.history.state || !window.history.state.key) {
      let key3 = Math.random().toString(32).slice(2);
      window.history.replaceState({
        key: key3
      }, "");
    }
    try {
      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY2) || "{}");
      let storedY = positions[restoreKey || window.history.state.key];
      if (typeof storedY === "number") {
        window.scrollTo(0, storedY);
      }
    } catch (error2) {
      console.error(error2);
      sessionStorage.removeItem(STORAGE_KEY2);
    }
  })("positions", null)</script><link rel="modulepreload" href="/assets/manifest-011c25ee.js"/><link rel="modulepreload" href="/assets/entry.client-C5KRYY1g.js"/><link rel="modulepreload" href="/assets/components-Bm-Hjhkx.js"/><link rel="modulepreload" href="/assets/icon-g2jIPmO8.js"/><link rel="modulepreload" href="/assets/honeypot-CthEGSXa.js"/><link rel="modulepreload" href="/assets/seo-f46cpyta.js"/><link rel="modulepreload" href="/assets/root-Cf8Di6cC.js"/><link rel="modulepreload" href="/assets/root-awAiwoED.js"/><link rel="modulepreload" href="/assets/motion-B0DHDyP_.js"/><link rel="modulepreload" href="/assets/resolve-element-B_Y5R0ig.js"/><link rel="modulepreload" href="/assets/utils-X_j3ONFs.js"/><link rel="modulepreload" href="/assets/index-UDeohblH.js"/><link rel="modulepreload" href="/assets/_0004.color-drawer-TtC34aHC.js"/><link rel="modulepreload" href="/assets/_0009.how-to-create-one-form-with-many-actions-in-remix-DcQeVNy9.js"/><script>window.__remixContext = {"url":"/guides/how-to-create-one-form-with-many-actions-in-remix","basename":"/","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false},"isSpaMode":false,"state":{"loaderData":{"root":{"honeyProps":{"nameFieldName":"honeypot","validFromFieldName":"honeypot_from","encryptedValidFrom":"U2FsdGVkX1+HgCZL/2HKIFh2mPWLJgYVpgTGslAa8xY="},"ENV":{"ALLOW_INDEXING":"true","FATHOM_ID":"YFYDWIUY"},"requestInfo":{"hints":{"theme":"light","timeZone":"UTC"},"origin":"https://www.wking.dev","path":"/guides/how-to-create-one-form-with-many-actions-in-remix","userPrefs":{"theme":"light"}}},"routes/_library+/guides+/_0009.how-to-create-one-form-with-many-actions-in-remix":null},"actionData":null,"errors":null}};</script><script type="module" async="">import "/assets/manifest-011c25ee.js";
import * as route0 from "/assets/root-awAiwoED.js";
import * as route1 from "/assets/_0009.how-to-create-one-form-with-many-actions-in-remix-DcQeVNy9.js";
window.__remixRouteModules = {"root":route0,"routes/_library+/guides+/_0009.how-to-create-one-form-with-many-actions-in-remix":route1};

import("/assets/entry.client-C5KRYY1g.js");</script></body></html>