go with react-bootstrap for now

components/rangeSelect.js

@@ -1,31 +1,50 @@
 import { useContext } from 'react'
 import { AppContext, ACTIONS } from '../context/appStore'
+
+import Form from 'react-bootstrap/Form'
+
 export default function RangeSelect() {
   const { state, dispatch } = useContext(AppContext)
 
+  function getValue() {
+    const { multipleDays } = state
+
+    if (multipleDays === null || multipleDays === undefined) {
+      return null
+    }
+
+    if (multipleDays === true) {
+      return 'multiple'
+    }
+
+    return 'single'
+  }
+
   return (
-    <div>
-      Ich will das Bussle für
-      <input
+    <Form.Group controlId="dateSelect">
+      <Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
+      <Form.Check
         type="radio"
-        id="single"
-        name="days"
+        id={'multipleDays-single'}
+        label="Einen Tag"
+        name="multipleDays"
+        value="single"
         checked={state.multipleDays === false}
         onChange={() =>
           dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
         }
       />
-      <label htmlFor="single">einen Tag</label>
-      <input
+      <Form.Check
         type="radio"
-        id="multiple"
-        name="days"
+        id={'multipleDays-multiple'}
+        label="Mehrere Tage"
+        name="multipleDays"
+        value="multiple"
         checked={state.multipleDays === true}
         onChange={() =>
           dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
         }
       />
-      <label htmlFor="multiple">mehrere Tage</label> mieten
-    </div>
+    </Form.Group>
   )
 }