Multistep Forms in React with Awesome UX – Tech Stack

05 Aug 2021

3 minute read

Your tech stack


Before we even start building this form, the first thing we should assess is the tech stack we’re building with.

There are as many tech stacks out there as grains of sand on a beach, but this is a pretty typical modern stack:

JUST this.

…no actual application code, no images, no fonts, no nothing

… bundled and minified with create-react-app’s default build script

… comes out to almost 300 kilobytes of JS and CSS! We haven’t even added any of our own code yet, this is the baseline. And our app doesn’t even DO anything yet!

Browser network tab showing downloaded file sizes for a React app

If you’re fortunate to live and work in a wealthy part of the world, with a new-ish phone in your pocket and good internet access, this may not seem like such a big concern. An afternoon’s journey through the web might consume tens or hundreds of megabytes of code and assets along the way, but you’d never know it on a 5G connection, to say nothing of a localhost dev environment.

But if we expand the commonly understood definition of “web accessibility” a little bit, the picture looks very different. “Accessible” outside the context of the web means “easy to access,” and an unnecessarily bloated website is anything but. If your web app is a chonker of a page that takes a long time to download, then you’re cutting off that easy access to those who don’t have fast internet or a modern browsing device.


So, what can we do to cut down on baseline code?

React vs Preact

Instead of React, why not use Preact? It has the exact same API and clocks in at a fraction of the size. There are differences in how Preact works internally, but nothing that would impact most React projects.

You may not even need to refactor your app to integrate Preact either: it can be used as a drop-in replacement for React via the preact-compat library.

Preact logo

React Router vs Page.js

Instead of React Router, why not use something like Page.js, or if you’re going with Preact, preact-router. If we’re talking about big, chonky libraries, React Router is the chonkiest. Most use cases don’t justify such a huge library.

React Router does include some important accessibility features along with its routing capabilities, but we can reimplement them ourselves easily enough with very little code. We’ll address this in the accessibility section of the guide.

If all you need is simple frontend URL routing, pick a simple URL router.

Page.js logo

Monolith CSS vs Utility CSS

Instead of a monolithic CSS library like Bootstrap, how about something smaller? You’ve got a lot of options here:

Tailwind CSS logo

Next up

Next up, we’ll take a look at accessibility for multistep forms. We touched briefly on the topic here as it pertains to download speeds and “ease of access,” but when it comes to keyboard users and assistive technology, there are a number of things you need to do with a multistep form that you might take for granted in a single-page HTML form.

Let’s dive in: Part two: Accessibility

Table of contents:

This is a series of blog posts which will cover each aspect of a great multi-step form experience separately. Check back for a new post each Monday until they’re all done!

Leave a comment

Related Posts