make floating label

src/components/Input/InputBox.stories.tsx

@@ -35,19 +35,26 @@ export default {
   },
 } as Meta;
 
-export const Default = () => (
+export const TextInput = () => (
+  <InputContainer type="text" label="im a label" />
+);
+
+export const AllTypes = () => (
   <div
     style={{
       display: 'grid',
-      gridGap: '10px',
-      gridTemplateColumns: 'repeat(2, auto)',
-      justifyItems: 'start',
+      gridGap: '20px',
+      gridTemplateColumns: 'repeat(2, [col-start] 150px [col-end])',
+      justifyItems: '',
       alignItems: 'end',
     }}
   >
     {inputTypes.map((type) => (
       <>
-        {type} <InputContainer type={type} placeholder={type} /> <br />
+        <div>{type}</div>
+        <div>
+          <InputContainer type={type} label={type} />
+        </div>
       </>
     ))}
   </div>

src/components/Input/InputContainer.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 import tw, { styled, css } from 'twin.macro';
 
 // export interface InputContainerProps {
@@ -10,14 +10,45 @@ export interface TextInputContainerProps
   extends InputHTMLAttributes<HTMLInputElement> {
   name?: string;
   label?: string;
+  id?: string;
+}
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLInputElement> {
+  label?: string;
 }
 
 const TextInputContainer = styled.input(({}: TextInputContainerProps) => [
-  tw`border-2 border-red-500 `,
+  tw`
+  block w-full appearance-none focus:outline-none bg-transparent
+  focus-within:[~ label]:(transform scale-75 -translate-y-6 text-blue-400)
+  [:not(:placeholder-shown)~ label]:(transform scale-75 -translate-y-6)
+  `,
+]);
+
+const Label = styled.label(({}: LabelProps) => [
+  tw`absolute top-0 -z-10 duration-300 origin-0`,
 ]);
 
 const InputContainer = (props: TextInputContainerProps) => (
-  <TextInputContainer {...props} />
+  <>
+    {/** gotta add other types just testing with text for now */}
+    {props.type === 'text' ? (
+      <div tw="relative border-b-2 focus-within:border-blue-400">
+        <TextInputContainer
+          id={props.id}
+          name={props.id}
+          {...props}
+          placeholder=""
+        />
+        <Label htmlFor={props.id}>{props.label}</Label>
+      </div>
+    ) : (
+      <>
+        <input id={props.id} name={props.id} type={props.type} {...props} />
+        <label htmlFor={props.id}></label>
+      </>
+    )}
+  </>
 );
 
 // InputContainer.defaultProps = {};

tailwind.config.js

@@ -14,6 +14,9 @@ module.exports = {
       zIndex: {
         '-10': '-10',
       },
+      transformOrigin: {
+        0: '0%',
+      },
     },
   },
   plugins: [],