floating label basic implementation + colors for error

pages/index.tsx

 import React from 'react';
 import type { NextPage } from 'next';
-import { Center } from '@chakra-ui/react';
+import { Center, FormControl, Input, FormLabel } from '@chakra-ui/react';
 import Page from '../components/Page/Page';
 
 const Home: NextPage = () => {
   return (
     <Page>
       <Center h="100%">
-        Home Page
+        <FormControl variant="floating" id="address" isRequired>
+          { /* Placeholder should be present */ }
+          <Input placeholder=" "/>
+          { /* It is important that the Label comes after the Control due to css selectors */ }
+          <FormLabel>Address</FormLabel>
+        </FormControl>
       </Center>
     </Page>
   );

theme/components/Form.ts

+import type { formAnatomy as parts } from '@chakra-ui/anatomy';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { getColor } from '@chakra-ui/theme-tools';
+import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
+import getDefaultFormColors from '../utils/getDefaultFormColors';
+
+const activeLabelStyles = {
+  fontSize: '12px',
+  lineHeight: '15px',
+  top: '10px',
+};
+
+const activeInputStyles = {
+  paddingTop: '30px',
+  paddingBottom: '10px',
+};
+
+const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
+  const { theme } = props;
+  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaultFormColors(props);
+
+  return {
+    container: {
+      _focusWithin: {
+        label: {
+          ...activeLabelStyles,
+        },
+        input: {
+          ...activeInputStyles,
+        },
+      },
+      'input:not(:placeholder-shown) + label': {
+        ...activeLabelStyles,
+      },
+      'input[aria-invalid=true] + label': {
+        color: getColor(theme, ec),
+      },
+      label: {
+        top: '20px',
+        left: 0,
+        zIndex: 2,
+        position: 'absolute',
+        color: getColor(theme, fc),
+        backgroundColor: 'transparent',
+        pointerEvents: 'none',
+        padding: '0 20px',
+        margin: 0,
+        transformOrigin: 'left top',
+        fontSize: '16px',
+        lineHeight: '20px',
+        transitionProperty: 'top, font-size, line-height',
+      },
+      input: {
+        padding: '20px',
+      },
+      'input:not(:placeholder-shown)': {
+        ...activeInputStyles,
+      },
+    },
+  }
+}
+
+const Form: ComponentStyleConfig = {
+  variants: {
+    floating: variantFloating,
+  },
+}
+
+export default Form;

theme/components/Input.ts

+import type { inputAnatomy as parts } from '@chakra-ui/anatomy';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+import getDefaultFormColors from '../utils/getDefaultFormColors';
+
+const sizes: Record<string, SystemStyleObject> = {
+  md: {
+    fontSize: '16px',
+    lineHeight: '20px',
+    px: '20px',
+    py: '20px',
+    h: '60px',
+    borderRadius: 'base',
+  },
+}
+
+const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
+  const { theme } = props
+  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaultFormColors(props)
+
+  return {
+    field: {
+      border: '1px solid',
+      borderColor: 'inherit',
+      bg: 'inherit',
+      _hover: {
+        borderColor: mode('gray.300', 'whiteAlpha.400')(props),
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all',
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+      },
+      _invalid: {
+        borderColor: getColor(theme, ec),
+        boxShadow: `none`,
+      },
+      _focusVisible: {
+        zIndex: 1,
+        borderColor: getColor(theme, fc),
+        boxShadow: `none`,
+      },
+    },
+    addon: {
+      border: '1px solid',
+      borderColor: mode('inherit', 'whiteAlpha.50')(props),
+      bg: mode('gray.100', 'whiteAlpha.300')(props),
+    },
+  }
+}
+
+const Input: ComponentStyleConfig = {
+  sizes: {
+    md: {
+      field: sizes.md,
+      addon: sizes.md,
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+  variants: {
+    outline: variantOutline,
+  },
+}
+
+export default Input;

theme/components/index.ts

@@ -2,12 +2,16 @@ import Switch from './Switch';
 import Button from './Button';
 import Modal from './Modal';
 import Table from './Table';
+import Form from './Form';
+import Input from './Input';
 
 const components = {
   Switch,
   Button,
   Modal,
   Table,
+  Input,
+  Form,
 }
 
 export default components;

theme/utils/getDefaultFormColors.ts

+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+
+export default function getDefaultFormColors(props: StyleFunctionProps) {
+  const { focusBorderColor: fc, errorBorderColor: ec } = props
+  return {
+    focusBorderColor: fc || mode('brand.700', 'brand.300')(props),
+    errorBorderColor: ec || mode('red.400', 'red.300')(props),
+  }
+}