DEV Community

Cover image for How to create a floating label input with css-in-js and react
Deola Adediran
Deola Adediran

Posted on

How to create a floating label input with css-in-js and react

In case you are not familiar with JSS that is css-in-js. JSS is an authoring tool in css which allows you to use javascript to describe styles in a declarative, conflict-free and reusable ways, (as stated on JSS website).

What is Float Label?

These are input with different behaviour from the usual or normal way we understand input. To explain more on how it works; when an input is empty, the placeholder will act normal as expected, then when filled with text, it moves to the top as shown below

Alt Text

Create a new project

Let’s create a new react project (I’m using Yarn but you can also use npm)

$ yarn create-react-app floating-input
Enter fullscreen mode Exit fullscreen mode

Once the project is created completely, remember to clear out unwanted files, remaining the App.js, we then create a div that contains the input and label like this

Alt Text

Now we need to style the above component with JSS but first we install react-jss

$ yarn add react-jss
Enter fullscreen mode Exit fullscreen mode

Then we import createUseStyles from the package react-jss as shown below

Alt Text

Then we create our useStyle function after that we can now start styling our component, feel free to style the component according to your taste.

Alt Text

Note how I used useStyle() inside the App function to access the selector or object key as it’s in the form of an object. Then we create our JSS syntax like this and in my case

Alt Text

As you can see how the css in js is accessed on the jsx, classes is use to store the returned from useStyles function then inside the className, we pick out each css that should affect the html element. Now our input looks like this

Alt Text

Next we’ll be adding css animation to the above input, we start with the interaction, which consists of a transition and the behaviour of position absolute and relative combined. First we add position relative to JSS floatingLabelWrap

Alt Text

Then we add position absolute to our label and a transform to center the label similar to the way placeholder works.

Alt Text

We have our output of floating input as this

Alt Text

Now we complete the animation with transition and to use focus-within to apply the translate effect to change the position and scale label

Alt Text

Now we have this result but with a minor problem that needs to be fixed.

Alt Text

Alt Text

To fix the error as noticed above, we’ll be doing so in reactjs as follow:
Firstly we create a state using useState hooks as shown below

Alt Text

Next we add another state to manage the text inputted

Alt Text

Next we add a function handler on input onChange to toggle our JSS active which we haven’t yet written.

Alt Text

Finally, we add the JSS style for active

Alt Text

We have a full javascript enabled floating label input completed

Alt Text

Remember there are always a better way to achieve this and if you do have a better way, please i would love to see it. Thanks

Based on Creating Floating Label/Placeholder for Input with ReactJS - DEV Community 👩‍💻👨‍💻

Discussion (0)