glide-design-system/src/lib/components/multivalue-input/MultivalueInput.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState, useEffect } from "react";

const MultivalueInput = ({ label }) => {
  const [contents, setContents] = useState([]);
  return (
    <div>
      <label>{label}</label>

      <div
        style={{
          border: "1px solid #DDD",
          width: "350px",
          height: "auto",
          minHeight: "50px",
          borderRadius: "6px",
        }}>
        {contents?.length !== 0 && (
          <div
            style={{
              marginTop: "10px",
              marginLeft: "5px",
              marginBottom: "10px",
            }}>
            Inpur
          </div>
        )}

        <input
          style={{
            marginLeft: "10px",
            border: "none",
            outline: "none",
            width: "310px",
            alignSelf: "center",
            marginTop:'4%',
            paddingBottom:'10px'
          }}
          onFocus={(e) => (e.target.style.border = "none")}
          onBlur={(e) => (e.target.style.borderBottom = "none")}
          type="text"
        />
      </div>
    </div>
  );
};

export default MultivalueInput;