diff --git a/package.json b/package.json
index dcc3afefaf..46c32a9b73 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@hospitalrun/components": "~1.6.0",
+    "@hospitalrun/components": "~1.14.1",
     "@reduxjs/toolkit": "~1.4.0",
     "@types/escape-string-regexp": "~2.0.1",
     "@types/pouchdb-find": "~6.3.4",
diff --git a/src/components/PageComponent.tsx b/src/components/PageComponent.tsx
index 2c7716a755..1d7654837b 100644
--- a/src/components/PageComponent.tsx
+++ b/src/components/PageComponent.tsx
@@ -18,7 +18,6 @@ const PageComponent = ({
   pageNumber,
   setPreviousPageRequest,
   setNextPageRequest,
-  onPageSizeChange,
 }: any) => {
   const { t } = useTranslation()
 
@@ -48,13 +47,7 @@ const PageComponent = ({
         {t('actions.page')} {pageNumber}
       </div>
       <div className="row float-right">
-        <Select onChange={onPageSizeChange} defaultValue={defaultPageSize.label}>
-          {pageSizes.map((pageSize) => (
-            <option key={pageSize.label} value={pageSize.value}>
-              {pageSize.label}
-            </option>
-          ))}
-        </Select>
+        <Select id="page" options={pageSizes} />
       </div>
     </div>
   )
diff --git a/src/components/input/LanguageSelector.tsx b/src/components/input/LanguageSelector.tsx
index 5fc90334b6..c6f55e05d6 100644
--- a/src/components/input/LanguageSelector.tsx
+++ b/src/components/input/LanguageSelector.tsx
@@ -1,32 +1,33 @@
-import _ from 'lodash'
-import React from 'react'
+import { sortBy } from 'lodash'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import i18n, { resources } from '../../i18n'
-import SelectWithLabelFormGroup from './SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from './SelectWithLableFormGroup'
 
 const LanguageSelector = () => {
   const { t } = useTranslation()
+  const [selected, setSelected] = useState(i18n.language)
 
-  let languageOptions = Object.keys(resources).map((abbr) => ({
+  let languageOptions: Option[] = Object.keys(resources).map((abbr) => ({
     label: resources[abbr].name,
     value: abbr,
   }))
-  languageOptions = _.sortBy(languageOptions, (o) => o.label)
+  languageOptions = sortBy(languageOptions, (o) => o.label)
 
-  const onLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = event.target.value
-    i18n.changeLanguage(selected)
+  const onChange = (value: string) => {
+    i18n.changeLanguage(value)
+    setSelected(value)
   }
 
   return (
     <SelectWithLabelFormGroup
       name="language"
-      value={i18n.language}
       label={t('settings.language.label')}
-      isEditable
       options={languageOptions}
-      onChange={onLanguageChange}
+      defaultSelected={languageOptions.filter(({ value }) => value === selected)}
+      onChange={(values) => onChange(values[0])}
+      isEditable
     />
   )
 }
diff --git a/src/components/input/SelectWithLableFormGroup.tsx b/src/components/input/SelectWithLableFormGroup.tsx
index c61cf415c7..e48f249bcd 100644
--- a/src/components/input/SelectWithLableFormGroup.tsx
+++ b/src/components/input/SelectWithLableFormGroup.tsx
@@ -6,28 +6,31 @@ interface Option {
   value: string
 }
 
+// todo: add feedback in next round
 interface Props {
-  value: string
-  label?: string
   name: string
+  label?: string
   isRequired?: boolean
-  isEditable?: boolean
   options: Option[]
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
-  feedback?: string
+  defaultSelected?: Option[]
+  onChange?: (values: string[]) => void
+  placeholder: string
+  multiple?: boolean
+  isEditable?: boolean
   isInvalid?: boolean
 }
 
 const SelectWithLabelFormGroup = (props: Props) => {
   const {
-    value,
-    label,
     name,
-    isEditable,
+    label,
+    isRequired,
     options,
+    defaultSelected,
     onChange,
-    isRequired,
-    feedback,
+    placeholder,
+    multiple,
+    isEditable,
     isInvalid,
   } = props
   const id = `${name}Select`
@@ -35,27 +38,22 @@ const SelectWithLabelFormGroup = (props: Props) => {
     <div className="form-group">
       {label && <Label text={label} htmlFor={id} isRequired={isRequired} />}
       <Select
-        disabled={!isEditable}
+        id={id}
+        options={options}
+        defaultSelected={defaultSelected}
         onChange={onChange}
-        value={value}
-        feedback={feedback}
+        placeholder={placeholder}
+        multiple={multiple}
+        disabled={!isEditable}
         isInvalid={isInvalid}
-      >
-        <option disabled value="">
-          -- Choose --
-        </option>
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
+      />
     </div>
   )
 }
 
 SelectWithLabelFormGroup.defaultProps = {
-  value: '',
+  placeholder: '-- Choose --',
 }
 
 export default SelectWithLabelFormGroup
+export type { Option }
diff --git a/src/incidents/list/ViewIncidents.tsx b/src/incidents/list/ViewIncidents.tsx
index 4cb0213561..4fe6d09a5f 100644
--- a/src/incidents/list/ViewIncidents.tsx
+++ b/src/incidents/list/ViewIncidents.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
-import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup'
 import Incident from '../../model/Incident'
 import { useButtonToolbarSetter } from '../../page-header/ButtonBarProvider'
 import useTitle from '../../page-header/useTitle'
@@ -48,11 +48,7 @@ const ViewIncidents = () => {
     history.push(`incidents/${incident.id}`)
   }
 
-  const onFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSearchFilter(event.target.value as IncidentFilter)
-  }
-
-  const filterOptions = Object.values(IncidentFilter).map((filter) => ({
+  const filterOptions: Option[] = Object.values(IncidentFilter).map((filter) => ({
     label: t(`incidents.status.${filter}`),
     value: `${filter}`,
   }))
@@ -63,11 +59,11 @@ const ViewIncidents = () => {
         <div className="col-md-3 col-lg-2">
           <SelectWithLabelFormGroup
             name="type"
-            value={searchFilter}
             label={t('incidents.filterTitle')}
-            isEditable
             options={filterOptions}
-            onChange={onFilterChange}
+            defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
+            onChange={(values) => setSearchFilter(values[0] as IncidentFilter)}
+            isEditable
           />
         </div>
       </div>
@@ -86,9 +82,15 @@ const ViewIncidents = () => {
             {incidents.map((incident: Incident) => (
               <tr onClick={() => onTableRowClick(incident)} key={incident.id}>
                 <td>{incident.code}</td>
-                <td>{format(new Date(incident.date), 'yyyy-MM-dd hh:mm a')}</td>
+                <td>
+                  {incident.date ? format(new Date(incident.date), 'yyyy-MM-dd hh:mm a') : ''}
+                </td>
                 <td>{incident.reportedBy}</td>
-                <td>{format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a')}</td>
+                <td>
+                  {incident.reportedOn
+                    ? format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a')
+                    : ''}
+                </td>
                 <td>{incident.status}</td>
               </tr>
             ))}
diff --git a/src/labs/ViewLabs.tsx b/src/labs/ViewLabs.tsx
index 8587ae4739..c8a724d240 100644
--- a/src/labs/ViewLabs.tsx
+++ b/src/labs/ViewLabs.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup'
 import useDebounce from '../hooks/debounce'
 import Lab from '../model/Lab'
@@ -15,7 +15,7 @@ import useTitle from '../page-header/useTitle'
 import { RootState } from '../store'
 import { searchLabs } from './labs-slice'
 
-type filter = 'requested' | 'completed' | 'canceled' | 'all'
+type LabFilter = 'requested' | 'completed' | 'canceled' | 'all'
 
 const ViewLabs = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const ViewLabs = () => {
   const { permissions } = useSelector((state: RootState) => state.user)
   const dispatch = useDispatch()
   const { labs, isLoading } = useSelector((state: RootState) => state.labs)
-  const [searchFilter, setSearchFilter] = useState<filter>('all')
+  const [searchFilter, setSearchFilter] = useState<LabFilter>('all')
   const [searchText, setSearchText] = useState<string>('')
   const debouncedSearchText = useDebounce(searchText, 500)
 
@@ -50,15 +50,6 @@ const ViewLabs = () => {
     return buttons
   }, [permissions, history, t])
 
-  const setFilter = (filter: string) =>
-    filter === 'requested'
-      ? 'requested'
-      : filter === 'completed'
-      ? 'completed'
-      : filter === 'canceled'
-      ? 'canceled'
-      : 'all'
-
   useEffect(() => {
     dispatch(searchLabs(debouncedSearchText, searchFilter))
   }, [dispatch, debouncedSearchText, searchFilter])
@@ -76,21 +67,24 @@ const ViewLabs = () => {
     history.push(`/labs/${lab.id}`)
   }
 
-  const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSearchFilter(setFilter(event.target.value))
-  }
-
   const onSearchBoxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value)
   }
 
+  const filterOptions: Option[] = [
+    { label: t('labs.status.requested'), value: 'requested' },
+    { label: t('labs.status.completed'), value: 'completed' },
+    { label: t('labs.status.canceled'), value: 'canceled' },
+    { label: t('labs.filter.all'), value: 'all' },
+  ]
+
   const listBody = (
     <tbody>
       {labs.map((lab) => (
         <tr onClick={() => onTableRowClick(lab)} key={lab.id}>
           <td>{lab.code}</td>
           <td>{lab.type}</td>
-          <td>{format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a')}</td>
+          <td>{lab.requestedOn ? format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a') : ''}</td>
           <td>{lab.status}</td>
         </tr>
       ))}
@@ -103,18 +97,11 @@ const ViewLabs = () => {
         <div className="col-md-3 col-lg-2">
           <SelectWithLabelFormGroup
             name="type"
-            value={searchFilter}
             label={t('labs.filterTitle')}
+            options={filterOptions}
+            defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
+            onChange={(values) => setSearchFilter(values[0] as LabFilter)}
             isEditable
-            options={[
-              { label: t('labs.status.requested'), value: 'requested' },
-              { label: t('labs.status.completed'), value: 'completed' },
-              { label: t('labs.status.canceled'), value: 'canceled' },
-              { label: t('labs.filter.all'), value: 'all' },
-            ]}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              onSelectChange(event)
-            }}
           />
         </div>
         <div className="col">
diff --git a/src/patients/ContactInfo.tsx b/src/patients/ContactInfo.tsx
index d6d491352c..7d3a9be3de 100644
--- a/src/patients/ContactInfo.tsx
+++ b/src/patients/ContactInfo.tsx
@@ -2,7 +2,7 @@ import { Spinner, Row, Column, Icon } from '@hospitalrun/components'
 import React, { useEffect, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup'
 import { ContactInfoPiece } from '../model/ContactInformation'
@@ -30,7 +30,7 @@ const ContactInfo = (props: Props): ReactElement => {
     }
   }, [data, onChange])
 
-  const typeOptions = Object.values(ContactInfoTypes).map((value) => ({
+  const typeOptions: Option[] = Object.values(ContactInfoTypes).map((value) => ({
     label: t(`patient.contactInfoType.options.${value}`),
     value: `${value}`,
   }))
@@ -53,9 +53,8 @@ const ContactInfo = (props: Props): ReactElement => {
   }
   const Component = componentList[component]
 
-  const onTypeChange = (event: React.ChangeEvent<HTMLSelectElement>, index: number) => {
+  const onTypeChange = (newType: string, index: number) => {
     if (onChange) {
-      const newType = event.currentTarget.value
       const currentContact = { ...data[index], type: newType }
       const newContacts = [...data]
       newContacts.splice(index, 1, currentContact)
@@ -83,10 +82,10 @@ const ContactInfo = (props: Props): ReactElement => {
         <Column sm={4}>
           <SelectWithLabelFormGroup
             name={`${name}Type${i}`}
-            value={entry.type}
-            isEditable={isEditable}
             options={typeOptions}
-            onChange={(event) => onTypeChange(event, i)}
+            defaultSelected={typeOptions.filter(({ value }) => value === entry.type)}
+            onChange={(values) => onTypeChange(values[0], i)}
+            isEditable={isEditable}
           />
         </Column>
         <Column sm={8}>
diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx
index eca1ea70a2..decafea491 100644
--- a/src/patients/GeneralInformation.tsx
+++ b/src/patients/GeneralInformation.tsx
@@ -4,7 +4,7 @@ import React, { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import DatePickerWithLabelFormGroup from '../components/input/DatePickerWithLabelFormGroup'
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup'
 import { ContactInfoPiece } from '../model/ContactInformation'
 import Patient from '../model/Patient'
@@ -59,6 +59,18 @@ const GeneralInformation = (props: Props): ReactElement => {
     onFieldChange('isApproximateDateOfBirth', checked)
   }
 
+  const sexOptions: Option[] = [
+    { label: t('sex.male'), value: 'male' },
+    { label: t('sex.female'), value: 'female' },
+    { label: t('sex.other'), value: 'other' },
+    { label: t('sex.unknown'), value: 'unknown' },
+  ]
+
+  const typeOptions: Option[] = [
+    { label: t('patient.types.charity'), value: 'charity' },
+    { label: t('patient.types.private'), value: 'private' },
+  ]
+
   return (
     <div>
       <Panel title={t('patient.basicInformation')} color="primary" collapsible>
@@ -115,28 +127,20 @@ const GeneralInformation = (props: Props): ReactElement => {
             <SelectWithLabelFormGroup
               name="sex"
               label={t('patient.sex')}
-              value={patient.sex}
+              options={sexOptions}
+              defaultSelected={sexOptions.filter(({ value }) => value === patient.sex)}
+              onChange={(values) => onFieldChange('sex', values[0])}
               isEditable={isEditable}
-              options={[
-                { label: t('sex.male'), value: 'male' },
-                { label: t('sex.female'), value: 'female' },
-                { label: t('sex.other'), value: 'other' },
-                { label: t('sex.unknown'), value: 'unknown' },
-              ]}
-              onChange={(event) => onFieldChange('sex', event.currentTarget.value)}
             />
           </div>
           <div className="col">
             <SelectWithLabelFormGroup
               name="type"
               label={t('patient.type')}
-              value={patient.type}
+              options={typeOptions}
+              defaultSelected={typeOptions.filter(({ value }) => value === patient.type)}
+              onChange={(values) => onFieldChange('type', values[0])}
               isEditable={isEditable}
-              options={[
-                { label: t('patient.types.charity'), value: 'charity' },
-                { label: t('patient.types.private'), value: 'private' },
-              ]}
-              onChange={(event) => onFieldChange('type', event.currentTarget.value)}
             />
           </div>
         </div>
diff --git a/src/patients/care-plans/CarePlanForm.tsx b/src/patients/care-plans/CarePlanForm.tsx
index 6a5a24e7d9..be517b45c7 100644
--- a/src/patients/care-plans/CarePlanForm.tsx
+++ b/src/patients/care-plans/CarePlanForm.tsx
@@ -1,9 +1,9 @@
 import { Alert, Column, Row } from '@hospitalrun/components'
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import DatePickerWithLabelFormGroup from '../../components/input/DatePickerWithLabelFormGroup'
-import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../components/input/TextInputWithLabelFormGroup'
 import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../model/CarePlan'
@@ -32,6 +32,10 @@ const CarePlanForm = (props: Props) => {
   const { t } = useTranslation()
   const { patient, carePlan, carePlanError, disabled, onChange } = props
 
+  const [condition, setCondition] = useState(carePlan.diagnosisId)
+  const [status, setStatus] = useState(carePlan.status)
+  const [intent, setIntent] = useState(carePlan.intent)
+
   const onFieldChange = (name: string, value: string | CarePlanStatus | CarePlanIntent) => {
     if (onChange) {
       const newCarePlan = {
@@ -42,6 +46,13 @@ const CarePlanForm = (props: Props) => {
     }
   }
 
+  const conditionOptions: Option[] =
+    patient.diagnoses?.map((d) => ({ label: d.name, value: d.id })) || []
+
+  const statusOptions: Option[] = Object.values(CarePlanStatus).map((v) => ({ label: v, value: v }))
+
+  const intentOptions: Option[] = Object.values(CarePlanIntent).map((v) => ({ label: v, value: v }))
+
   return (
     <form>
       {carePlanError?.message && <Alert color="danger" message={t(carePlanError.message)} />}
@@ -75,44 +86,51 @@ const CarePlanForm = (props: Props) => {
       </Row>
       <Row>
         <Column sm={12}>
+          {/* add feedback in next round */}
           <SelectWithLabelFormGroup
-            isRequired
-            value={carePlan.diagnosisId}
-            label={t('patient.carePlan.condition')}
             name="condition"
-            feedback={t(carePlanError?.condition || '')}
-            isInvalid={!!carePlanError?.condition}
+            label={t('patient.carePlan.condition')}
+            isRequired
+            options={conditionOptions}
+            defaultSelected={conditionOptions.filter(({ value }) => value === condition)}
+            onChange={(values) => {
+              onFieldChange('diagnosisId', values[0])
+              setCondition(values[0])
+            }}
             isEditable={!disabled}
-            onChange={(event) => onFieldChange('diagnosisId', event.currentTarget.value)}
-            options={patient.diagnoses?.map((d) => ({ label: d.name, value: d.id })) || []}
+            isInvalid={!!carePlanError?.condition}
           />
         </Column>
       </Row>
       <Row>
         <Column sm={6}>
           <SelectWithLabelFormGroup
-            isRequired
-            value={carePlan.status}
-            label={t('patient.carePlan.status')}
             name="status"
-            feedback={t(carePlanError?.status || '')}
-            isInvalid={!!carePlanError?.status}
+            label={t('patient.carePlan.status')}
+            isRequired
+            options={statusOptions}
+            defaultSelected={statusOptions.filter(({ value }) => value === status)}
+            onChange={(values) => {
+              onFieldChange('status', values[0])
+              setStatus(values[0] as CarePlanStatus)
+            }}
             isEditable={!disabled}
-            options={Object.values(CarePlanStatus).map((v) => ({ label: v, value: v }))}
-            onChange={(event) => onFieldChange('status', event.currentTarget.value)}
+            isInvalid={!!carePlanError?.status}
           />
         </Column>
         <Column sm={6}>
           <SelectWithLabelFormGroup
-            isRequired
-            value={carePlan.intent}
-            label={t('patient.carePlan.intent')}
             name="intent"
-            feedback={t(carePlanError?.intent || '')}
-            isInvalid={!!carePlanError?.intent}
+            label={t('patient.carePlan.intent')}
+            isRequired
+            options={intentOptions}
+            defaultSelected={intentOptions.filter(({ value }) => value === intent)}
+            onChange={(values) => {
+              onFieldChange('intent', values[0])
+              setIntent(values[0] as CarePlanIntent)
+            }}
             isEditable={!disabled}
-            options={Object.values(CarePlanIntent).map((v) => ({ label: v, value: v }))}
-            onChange={(event) => onFieldChange('intent', event.currentTarget.value)}
+            isInvalid={!!carePlanError?.intent}
           />
         </Column>
       </Row>
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index 612291ad3b..a43b591c47 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 
 import PatientRepository from '../../clients/db/PatientRepository'
 import DateTimePickerWithLabelFormGroup from '../../components/input/DateTimePickerWithLabelFormGroup'
-import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../../components/input/TextInputWithLabelFormGroup'
 import Appointment from '../../model/Appointment'
@@ -22,15 +22,20 @@ const AppointmentDetailForm = (props: Props) => {
   const { onFieldChange, appointment, patient, isEditable, error } = props
   const { t } = useTranslation()
 
-  const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, fieldName: string) =>
-    onFieldChange && onFieldChange(fieldName, event.target.value)
-
   const onDateChange = (date: Date, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, date.toISOString())
 
   const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, event.target.value)
 
+  const typeOptions: Option[] = [
+    { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
+    { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
+    { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
+    { label: t('scheduling.appointment.types.routine'), value: 'routine' },
+    { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
+  ]
+
   return (
     <>
       {error?.message && <Alert className="alert" color="danger" message={t(error?.message)} />}
@@ -112,18 +117,10 @@ const AppointmentDetailForm = (props: Props) => {
           <SelectWithLabelFormGroup
             name="type"
             label={t('scheduling.appointment.type')}
-            value={appointment.type}
+            options={typeOptions}
+            defaultSelected={typeOptions.filter(({ value }) => value === appointment.type)}
+            onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
             isEditable={isEditable}
-            options={[
-              { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
-              { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
-              { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
-              { label: t('scheduling.appointment.types.routine'), value: 'routine' },
-              { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
-            ]}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              onSelectChange(event, 'type')
-            }}
           />
         </div>
       </div>