Build Advanced React Input Fields Using Styled Components and Storybook.js

A development guide to building React components with the latest technologies

Image credit: Author

In a previous article, we built React tabs using Recoil, Styled Components, and Storybook.js. Here we’ll walk through advanced input fields: ClearableInput and MultiValueClearableInput. The development process can be applied to daily coding work. It’s also a frequently asked interview question, fitting easily within the one-hour interview time frame.

Since an input field is self-contained, useState is well-suited for state management. We don’t need to use Recoil for external state management in this case.

Create React App is used to set up the React coding environment:

npx create-react-app my-app
cd my-app
npm start

Set up Styled Components for dependencies in your package.json:

npm i styled-components

Install Storybook for the project:

npx sb init

Create src/components/AdvancedInputs with the following files:

$ ls
AdvancedInputs.stories.js   MultiValueClearableInput.js index.js
ClearableInput.js           clear.svg

Input Field

The HTML <input> tag specifies an input field, in which a user can enter data. It can be a text field, a checkbox, a radio button, a file input, or something else.

The default input is a text field:

It looks good.

Type some text into it.

Typing Backspace can delete the content, character by character, from back to front. Will an x to clear all of the text work better?

The Clearable Input

The HTML input element doesn’t include the clear icon (the x mark), let alone the clear functionality. We need to build a React component to achieve the ClearableInput field. It’s a container that’s composed by two elements: an input field and a clear icon. We call it a combo input.

The inner input field has a black border. When it’s focused, it has a blue outline: