remix-demo

Input.tsx

(1260B)

 import { useField } from "remix-validated-form";
 import InputError from "./InputError";
 
 const styles = {
   label: {
     base: "block mb-2 font-medium",
     error: "text-red-700",
     success: "text-gray-900",
   },
   input: {
     base: "block w-full rounded-lg border p-2.5 border-gray-300",
     error:
       "bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:outline-red-500",
     success: "bg-gray-50 text-gray-900 focus:outline-blue-500",
   },
 };
 
 export function getInputStyles(
   name: "label" | "input",
   error: string | undefined
 ): string {
   return `${styles[name].base} ${
     error ? styles[name].error : styles[name].success
   }`;
 }
 
 export default function Input(props: any) {
   const { label, name } = props;
   const attributes = { ...props, label: undefined };
   const { error, getInputProps } = useField(name);
 
   return (
     <div>
       <label htmlFor={name} className={getInputStyles("label", error)}>
         {label}
       </label>
       <input
         {...getInputProps({ id: name })}
         {...attributes}
         className={getInputStyles("input", error)}
         aria-invalid={Boolean(error)}
         aria-describedby={`${name}-error`}
       />
       <InputError error={error} id={`${name}-error`} />
     </div>
   );
 }