Add labels to inputs

Author: Rikthepixel

src/components/controls/Input.tsx

@@ -1,62 +1,111 @@
-import { ForwardedRef, forwardRef, InputHTMLAttributes, useMemo } from "react";
+import { ForwardedRef, forwardRef, InputHTMLAttributes, ReactNode, useId, useMemo } from "react";
 import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-export const style = cva("rounded-full py-2 px-3", {
+import Label, { style as labelStyle } from "./Label";
+
+export const style = cva("w-full rounded-full py-2 px-3 border-2", {
   variants: {
-    variant: {
-      outlined: "border-2"
-    },
     color: {
-      primary: "",
-      secondary: ""
+      primary: "border-primary bg-white",
+      secondary: "border-secondary bg-white"
     },
   },
-  compoundVariants: [
-    {
-      className: "border-primary bg-white",
-      color: "primary",
-      variant: "outlined"
-    },
-    {
-      className: "border-secondary bg-white",
-      color: "secondary",
-      variant: "outlined"
-    }
-  ],
   defaultVariants: {
-    color: "primary",
-    variant: "outlined"
+    color: "primary"
   }
 });
 
+const borderStyle = cva("absolute inset-0 border-2 top-[-9px] rounded-[inherit] pl-[var(--label-inset)]", {
+  variants: {
+    color: {
+      primary: "border-primary",
+      secondary: "border-secondary"
+    },
+  }
+});
+
+export type BaseProps = {
+  inputClassName?: string;
+  labelClassName?: string;
+  fieldsetClassName?: string;
+  labelInset?: string;
+  label?: ReactNode;
+};
+
 export type TagProps = Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
 export type VariantProps = GetVariantProps<typeof style>;
-export type InputProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+export type InputProps = BaseProps & TagProps & RequiredKeys<VariantProps, "color">;
 
 const Input = forwardRef((
   {
     className,
+    inputClassName,
+    labelClassName,
+    fieldsetClassName,
+    labelInset = "1.5rem",
+    label,
     color,
-    variant,
+    id,
     ...props
   }: InputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
 
+  const fallbackId = useId();
+
   const computedClassName = useMemo(
-    () => twMerge(style({ color, variant }), className),
-    [className, color, variant]
+    () => twMerge("relative rounded-full", className),
+    [className]
+  );
+
+  const computedInputClassName = useMemo(
+    () => twMerge(
+      style({ color }),
+      "rounded-[inherit]",
+      label ? "border-transparent" : "",
+      inputClassName
+    ),
+    [inputClassName, color, label]
+  );
+
+  const computedLabelClassName = useMemo(
+    () => twMerge("absolute left-[var(--label-inset)] top-0 translate-x-[2px] -translate-y-1/2 px-1", labelClassName),
+    [labelClassName]
+  );
+
+  const computedFieldsetClassName = useMemo(
+    () => twMerge(borderStyle({ color }), fieldsetClassName),
+    [color, fieldsetClassName]
+  );
+
+  const computedLegendClassName = useMemo(
+    () => twMerge(labelStyle(), "px-1 opacity-0"),
+    [computedLabelClassName]
+  );
+
+  const insetProps = useMemo<Record<string, string>>(
+    () => ({ "--label-inset": labelInset }),
+    [labelInset]
   );
 
   return (
-    <input
-      ref={ref}
-      className={computedClassName}
-      {...props}
-    />
+    <div className={computedClassName}>
+      {label && <Label className={computedLabelClassName} htmlFor={id ?? fallbackId} style={insetProps}>
+        {label}
+      </Label>}
+      {label && <fieldset aria-hidden className={computedFieldsetClassName} style={insetProps}>
+        <legend className={computedLegendClassName}>{label}</legend>
+      </fieldset>}
+      <input
+        ref={ref}
+        className={computedInputClassName}
+        id={id ?? fallbackId}
+        {...props}
+      />
+    </div>
   );
 });
 

src/components/controls/Label.tsx

@@ -1,14 +1,17 @@
+import { cva } from "class-variance-authority";
 import React, { DetailedHTMLProps, ForwardedRef, LabelHTMLAttributes, forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 
 export interface LabelProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
   htmlFor: string;
 }
 
+export const style = cva("text-sm font-bold block");
+
 const Label = forwardRef(({ className, ...props }: LabelProps, ref: ForwardedRef<HTMLLabelElement>) => {
 
   const computedClassName = useMemo(
-    () => twMerge("text-sm font-bold block", className),
+    () => twMerge(style(), className),
     [className]
   );
 

src/components/controls/TextArea.tsx

@@ -3,25 +3,26 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-import { style, VariantProps as InputVariantProps } from "./Input";
+import { style as inputStyle, VariantProps as InputVariantProps } from "./Input";
+
+export const style: typeof inputStyle = (props) => twMerge(inputStyle(props), "rounded-lg");
 
 export type TagProps = DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
 export type VariantProps = InputVariantProps;
-export type TextAreaProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+export type TextAreaProps = TagProps & RequiredKeys<VariantProps, "color">;
 
 const TextArea = forwardRef((
   {
     className,
     color,
-    variant,
     ...props
   }: TextAreaProps,
   ref: ForwardedRef<HTMLTextAreaElement>
 ) => {
 
   const computedClassName = useMemo(
-    () => twMerge(style({ color, variant }), className),
-    [className, color, variant]
+    () => twMerge(style({ color }), className),
+    [className, color]
   );
 
   return (

src/components/pages/contribute/FeedbackSection.tsx

@@ -11,6 +11,7 @@ import { backend } from "@/utils/wretch";
 import TextArea from "@/components/controls/TextArea";
 import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
+import Label from "@/components/controls/Label";
 
 const feedbackSchema = z.object({
   text: z.string()
@@ -65,14 +66,19 @@ const FeedbackSection = () => {
         successChildren={`🎉 ${response?.message} 🎉`}
         oneTime
       >
-        <TextArea
-          color="primary"
-          variant="outlined"
-          className="w-full p-4 text-lg rounded-lg md:text-xl h-fit min-h-[3.25em] max-h-[50ex]"
-          placeholder="I would like this feature!"
-          rows={5}
-          {...register("text")}
-        />
+        <div className="w-full">
+          <Label htmlFor="message-input" className="text-start text-secondary">
+            Your Message:
+          </Label>
+          <TextArea
+            id="message-input"
+            color="primary"
+            className="w-full p-4 text-lg md:text-xl h-fit min-h-[3.25em] max-h-[50ex]"
+            placeholder="I would like this feature!"
+            rows={5}
+            {...register("text")}
+          />
+        </div>
         <Error className="w-full px-2 text-start" state={formState} name="text" />
         <Button type="submit" color="secondary" loading={loading} className="px-5 py-3 text-lg md:text-xl w-fit">
           Submit Feedback

src/components/pages/front/SignupSection.tsx

@@ -8,11 +8,11 @@ import perks from "@/assets/state/perks";
 import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
-import { backend } from "@/utils/wretch";
 import Input from "@/components/controls/Input";
 import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 
+import { backend } from "@/utils/wretch";
 
 const signupSchema = z.object({
   email: z.string().email().min(3)
@@ -78,10 +78,14 @@ const SignupSection = () => {
       >
         <div className="w-full">
           <Input
+            id="signup-email-input"
             color="primary"
-            variant="outlined"
-            className="w-full p-4 text-lg md:text-xl"
+            className="w-full text-lg md:text-xl"
+            inputClassName="p-4"
             placeholder="your@email.com"
+            label="Email:"
+            labelInset="2rem"
+            labelClassName="text-primary"
             {...register("email")}
           />
           <Error className="w-full px-2 text-start" state={formState} name="email" />

src/pages/blog/index.tsx

@@ -104,7 +104,6 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
               id="search-input"
               type="text"
               color="secondary"
-              variant="outlined"
               placeholder="Search..."
               {...register("search")}
             />

src/pages/mail/unsubscribe.tsx

@@ -15,6 +15,7 @@ import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import { makeOgMeta } from "@/utils/meta/opengraph";
 import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import Label from "@/components/controls/Label";
 
 const unsubscribeSchema = z.object({
   email: z.string().email().min(3)
@@ -65,9 +66,11 @@ const UnsubscribePage: Page = ({ pathname }) => {
             Once you unsubscribe you won't receive any more emails from us and your email will be immediately deleted from our records.
           </p>
           <Input
+            id="email-input"
             color="secondary"
-            variant="outlined"
             placeholder="your@email.com"
+            label="Email:"
+            labelClassName="text-secondary"
             {...register("email")}
           />
           <Button type="submit" color="secondary">