How to create a floating label input with css-in-js and react
Tags: javascript, jss, css, react
Published: 2021-02-18 14:31:48


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](https://cssinjs.org/?v=v10.3.0)).

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o48jko2xfvawc03y0jvt.png)

**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
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asswusmkobvhzwz9d7il.png)

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

```
$ yarn add react-jss
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0jn0zb52r67191cp09v.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iof3k6q1kt2nydj0cydr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wnv94e4g9gsjrdm5yqq.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czv7fvm1wd4dm910wjs0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kpeyjl9bewpx3ipz84l.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e6r15b4ys1s4owstm20.png)

We have our output of floating input as this

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0t9ry4ch2z7ltm7onk1.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46a53v1bi4k8gm5iuemu.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfaa96gncrrq5s4jmj3n.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugsuwhb9l2x3zg2cl2am.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1udii470ik5gs8fbob60.png)

Next we add another state to manage the text inputted 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkp1ngvx9dhlkk2k6xbl.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pryz8bmffdctn2uzu4w.png)

Finally, we add the JSS style for active 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eg36x5193c5u2f4tlar.png)

We have a full javascript enabled floating label input completed

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8ikbww861ncqhpbikjk.png)

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 👩‍💻👨‍💻](https://dev.to/rafacdomin/creating-floating-label-placeholder-for-input-with-reactjs-4m1f)