Input

Komponen input untuk merender field isian teks standar

Jika kalian ingin membuat input teks seperti form, kalian bisa menggunakan komponen ini,

Button.jsx

import { clsx } from "clsx";
import React, { forwardRef } from "react";
import { twMerge } from "tailwind-merge";

const variantClasses = {
  default: "bg-white text-gray-900 rounded-md border border-gray-300 ",
  filled:
    "bg-gray-200 rounded-sm text-gray-700 focus:border-none focus:ring-0 border-none ",
  ghost:
    "border-none bg-transparent border-gray-600 border-2 text-gray-900 rounded-md focus:ring-0 focus:border-none",
} as const;

const sizeClasses = {
  sm: "px-3 py-1 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-5 py-3 text-lg",
} as const;
export type InputProps = React.ComponentPropsWithRef<"input"> & {
  as?: React.ElementType;
  variant?: keyof typeof variantClasses;
  size?: keyof typeof sizeClasses;
  className?: string;
};

export const Input: React.FC<InputProps> = forwardRef(
  (
    {
      as: Component = "input",
      variant = "default",
      size = "md",
      className,
      ...props
    },
    ref
  ) => {
    return (
      <Component
        ref={ref}
        className={twMerge(
          clsx(
            variantClasses[variant],
            sizeClasses[size as keyof typeof sizeClasses],
            className
          )
        )}
        {...props}
      />
    );
  }
);

Input.displayName = "Input";

Button.jsx

<Input
    type="text"
    id="first_name"
    className="bg-gray-50 border border-gray-300 text-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    placeholder="Badriana"
    required
/>
  <Input
    type="text"
    id="first_name"
    className="w-full  bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    placeholder="Badriana"
    variant="filled"
    required
/>
<Input
    type="text"
    id="first_name"
    className="w-full"
    placeholder="John"
    variant="ghost"
    required
/>;
};

Keunggulan dari Input

✅ Fully typed dengan React.ComponentPropsWithRef, mendukung semua atribut standar <input> plus ref.
🎨 Styling fleksibel dengan varian variant dan size, memudahkan konsistensi desain antar elemen form.
🧩 Composable dan polymorphic melalui prop as, bisa diganti menjadi elemen lain seperti <textarea> atau komponen lain.
🧠 Ref-friendly — dapat difokuskan, dipantau, atau dikontrol secara imperatif melalui ref.
⚡ Terintegrasi dengan Tailwind CSS menggunakan clsx dan twMerge untuk penggabungan kelas yang bersih dan efisien.
🛡️ Type-safe dan reusable, memudahkan pengembangan form dengan TypeScript dan menjaga keakuratan props.