How to build a floating label input field using react and ant design (antd).

What are floating labels? — A floating label is a text label which appears inside the input field at a regular font-size. When user tries to enter a value into the input field, then label “floats” above.

If you’ve been using ant-design, then you might’ve known already that antd does not support floating fields.

If you want to know why antd does not support floating labels, please visit: https://github.com/ant-design/ant-design/issues/16323. In short, floating labels are not in antd design specifications 😞 😏

I am going to show you how to build your own floating labelled component and use it in your project 🙌

Before going through the code, play with the below code-sandbox to get glimpse on how it will look.

Floating label code sandbox

Let’s get directly into the code, shall we?

Floating label component:

import classNames from "classnames";
import styles from "./InputFields.module.css";
import React from "react";
export type InputLabelProps = {
  labelText: string,
};
type OtherProps = {
  children: React.ReactElement,
  active: boolean,
  value?: string,
};
export default function InputLabel({
  active,
  labelText,
  children,
  value,
}: InputLabelProps & OtherProps) {
  return (
    <div style={{ display: "flex", flexFlow: "column-reverse" }}>
      {children}
      <span
        className={classNames(styles.label, {
          [styles.floatingLabel]: active || value,
        })}
      >
        {labelText}
      </span>
    </div>
  );
}

So whats going on in the above 🔝 component?

It’s a simple component, which wraps an input field inside of floating label. There are two props (active and value) that are used to style the floating label. active will be true when user enters the input field and will be false when user leaves the field. value contains the text that user inputing to the field.

We set the div display to flex and flex-flow to be column-reverse. So, the label can come before the input field, when it’s rendered.

So what are we trying to achieve here? — when the input field is active and has value, then float the label or else keep the label inside the input field.

Lets look at the styles —

InputFields.module.css:

.label {
     z-index: 1;
     font-family: serif;
     font-size: 18px;
     pointer-events: none;
     transition: 0.2s ease all;
     color: #595959;
     transform: translate(0, 2.25rem) scale(1);
     margin-left: 10px;
}
 .floatingLabel {
     color: #1890ff;
     transform: translate(0, 0) scale(1);
     margin-left: 0;
}

For label class styling, we transform the label to be in inside of the input field and in floatingLabel class styling, we set transformation to its original state. If you want to know about css transformation, then pleas have a look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

How to use InputLabel component? Let’s look at another component (TextInput) which uses the InputLabel component.

Text Input Component:

import React, { useState } from "react";
import InputLabel, { InputLabelProps } from "./FloatingLabel";
import { Form, Input } from "antd";
type TextInputProps = {
  name: string,
};
export default function TextInput({
  name,
  ...otherProps
}: TextInputProps & InputLabelProps) {
  const [active, setActive] = useState(false);
const onBlur = () => {
    setActive(false);
  };
const onFocus = () => {
    setActive(true);
  };
return (
    <Form.Item
      noStyle
      shouldUpdate={(prevValues, currentValues) =>
        prevValues[name] !== currentValues[name]
      }
    >
      {({ getFieldValue }) => (
        <InputLabel active={active} value={getFieldValue(name)} {...otherProps}>
          <Form.Item name={name}>
            <Input
              onBlur={onBlur}
              onFocus={onFocus}
              style={{ height: "45px" }}
            />
          </Form.Item>
        </InputLabel>
      )}
    </Form.Item>
  );
}

We use onBlur and onFocus to maintain active state. To get value we use getFieldValue helper from antd’s useForm. So in order to use getFieldValue helper method from form context, we wrap the input label with noStyle form item.

That’s it! You have a input field component that can float 😍

Note: I used classNames library to conditionally use css classes. Of course you need not to use it.

If you do not want to use getFieldValue then, you might want to try using placeholder:shown pseudo css class (https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown). So you can float the variable when place holder is not shown. So by default, you’ll have to hide the label and show it when placeholder disappears.

Entire code is at: https://codesandbox.io/s/eloquent-easley-jyuyx?file=/src/App.js

Thank you for reading this story so far, if you like then please share with your friends and colleagues.
If you have knowledge, let others light their candles in it. — Margaret Fuller