set for correctly on labels

components/input.tsx

@@ -7,11 +7,18 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export default function Input(props: InputProps) {
-  const { label, required, type = 'text', ...rest } = props
+  const { label, name, required, type = 'text', ...rest } = props
 
   return (
-    <InputWrapper label={label} required={required}>
+    <InputWrapper label={label} name={name} required={required}>
-      <input type={type} required={required} className="input-text" {...rest} />
+      <input
+        type={type}
+        required={required}
+        className="input-text"
+        id={name}
+        name={name}
+        {...rest}
+      />
     </InputWrapper>
   )
 }

components/inputWrapper.tsx

@@ -3,16 +3,17 @@ import Required from './required'
 
 export default function Input(props: {
   label: string
+  name: string
   required: boolean
   children: React.ReactNode
 }) {
-  const { label, required, children } = props
+  const { label, name, required, children } = props
 
   return (
     <>
       <div className="fsw">
         <div className="fs">
-          <label className="flabel">
+          <label className="flabel" htmlFor={name}>
             {label} {required && <Required />}
           </label>
           {children}

components/select.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 export default function Select({
   label,
+  name,
   value,
   onChange,
   children,
 }: {
   label: string
+  name: string
   value: string
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void
   children: React.ReactNode
@@ -14,11 +16,14 @@ export default function Select({
   return (
     <div className="fsw">
       <div className="fs">
-        <label className="flabel">{label}</label>
+        <label className="flabel" htmlFor={name}>
+          {label}
+        </label>
         <div className="relative">
           <select
             className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-            id="rate"
+            id={name}
+            name={name}
             value={value}
             onChange={onChange}
           >

pages/admin/booking/[uuid]/bill.tsx

@@ -217,6 +217,7 @@ export default function BillPage({
               <Input label="Gefahren" name="milage" readOnly value={milage} />
               <Select
                 label="Rate"
+                name="tarif"
                 value={tarif}
                 onChange={(e) => setTarif(e.target.value as MILAGE_TARIFS)}
               >
@@ -287,6 +288,7 @@ export default function BillPage({
             </div>
             <Select
               label="Status"
+              name={status}
               value={status}
               onChange={(e) => setStatus(e.target.value as BILL_STATUS)}
             >