These form elements can include buttons, links, inputs, selects, and text areas, each with various styling options. Instead of creating separate components for each form element, we can build a polymorphic React FormElement component.

FormElement.tsx

import React from 'react';

type FormElementBaseProps = {
  children?: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline' | 'link';
};

type FormElementProps = FormElementBaseProps &
  (
    | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
        as: 'button';
      })
    | (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
        as: 'a';
      })
    | (React.InputHTMLAttributes<HTMLInputElement> & {
        as: 'input';
      })
    | (React.SelectHTMLAttributes<HTMLSelectElement> & {
        as: 'select';
      })
    | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
        as: 'textarea';
      })
  );

export function FormElement({ variant, ...props }: FormElementProps) {
  switch (props.as) {
    case 'button':
      return <button {...props}>{props.children}</button>;
    case 'a':
      return <a {...props}>{props.children}</a>;
    case 'input':
      return <input {...props} />;
    case 'select':
      return <select {...props}>{props.children}</select>;
    case 'textarea':
      return <textarea {...props} />;
    default:
      return null;
  }
}