Question

155

Floating labels using React and Ant Design

rated 0 times [ 162] [ 7] / answers: 1 / hits: 16336 / 5 Years ago, mon, november 4, 2019, 12:00:00

For my React app, I'm trying to build a form with floating labels using a template from Antd with different input types using only styles to make the labels float. So far I've been able to put the label behind the input, but when I apply transition + transform to my css code it seems to not work at all.

This is part of my form:

switch (data.inputType) {

        case 'input':

          return (

            <Form.Item key={`frmItem-${data.id}`}>

              <label htmlFor={data.id} className=floating-label>

                {data.label}

              </label>



              <Input

                key={`input-${data.id}`}

                id={data.id}

                className=floating-label-field

                project-field={data.id}

                defaultValue={projectData[data.id]}

                onChange={handleUpload}

                // placeholder={data.placeholder}

                allowClear

              />

            </Form.Item>

          )

And this is my style.js:

export const StyledFormDiv = styled.div`

  .ant-form-item {

    position: relative;

  }



  .ant-form-item-control {

    height: 50px;

  }



  /* Floating label */

  .floating-label {

    /* top: 0; */

    /* left: 0; */

    position: absolute;

    /* z-index: 500; */

    /* transform: translate(0, 25px) scale(1); */

    /* transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, */

    /* transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; */

    /* transition: width 0.4s ease; */

  }



  .floating-label-field {

    /* position: absolute; */

    /* touch-action: manipulation; */

    border-bottom: 1px solid #000 !important;

    border-radius: 0;

    box-shadow: none;

    width: 100%;

    /* transition: transform 0.25s, opacity 0.25s ease-in-out; */

    /* transform-origin: 0 0; */

    /* opacity: 0.5; */

    /* transition: padding-top 0.2s ease, margin-top 0.2s ease; */



    &::placeholder {

      color: transparent;

    }

  }

I think maybe there is something with antd not allowing me to float the labels, but I would like a workaround not having to install another package or making another component.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyamelinad

Add To Favorites

Follow

Total Points: 339

Total Questions: 85

Total Answers: 116

Location: Marshall Islands

Member since Sun, Aug 29, 2021

3 Years ago

answered 5 Years ago kearaw · Accepted Answer

My example may help somebody https://codesandbox.io/s/antd-float-label-forked-k8p00?file=/Example.js

Feel free to update css.

Form component

import React from "react";

import { Form } from "antd";



import FloatInput from "./FloatInput";



import "antd/dist/antd.css";

import "./main.css";



const validator = {

  require: {

    required: true,

    message: "Required"

  }

};



const Example = (props) => {

  return (

    <div className="example">

      <h3>Antd float labels Example</h3>



      <Form

        size="large"

        name="user_login"

        className="login-form"

        layout="vertical"

      >

        <Form.Item name="email" rules={[validator.require]} hasFeedback>

          <FloatInput

            label="Email"

            placeholder="Email here please"

            name="email"

          />

        </Form.Item>

      </Form>

    </div>

  );

};



export default Example;

Float input component

import React, { useState } from "react";

import { Input } from "antd";



import "./index.css";



const FloatInput = (props) => {

  const [focus, setFocus] = useState(false);

  let { label, value, placeholder, type, required } = props;



  if (!placeholder) placeholder = label;



  const isOccupied = focus || (value && value.length !== 0);



  const labelClass = isOccupied ? "label as-label" : "label as-placeholder";



  const requiredMark = required ? <span className="text-danger">*</span> : null;



  return (

    <div

      className="float-label"

      onBlur={() => setFocus(false)}

      onFocus={() => setFocus(true)}

    >

      <Input onChange={props.onChange} type={type} defaultValue={value} />

      <label className={labelClass}>

        {isOccupied ? label : placeholder} {requiredMark}

      </label>

    </div>

  );

};



export default FloatInput;

CSS

.float-label {

  position: relative;

}



.label {

  font-weight: normal;

  position: absolute;

  pointer-events: none;

  left: 12px;

  top: 11px;

  transition: 0.2s ease all;

}



.as-placeholder {

  color: gray;

}



.as-label {

  top: -8px;

  font-size: 12px !important;

  background: white;

  padding: 0 4px;

  margin-left: -4px;

}