diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx
index addb605194..bad73d19ce 100644
--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -33,7 +33,7 @@ export type SelectProps<T> = {
   defaultText?: string
   // Initial selected item, displayed in the initial render. When both `defaultText`
   // and `defaultItem` are set the latter is ignored.
-  defaultItem?: T
+  defaultItem?: T | null
   // Stringifies an item. The resulting string is rendered as a subtitle in a dropdown option.
   itemToSubtitle?: (item: T | null | undefined) => string
   // Stringifies an item. The resulting string is rendered as a React `key` for each item.
@@ -41,7 +41,7 @@ export type SelectProps<T> = {
   // Callback invoked after the selected item is updated.
   onSelectedItemChanged?: (item: T | null | undefined) => void
   // Optionally directly control the selected item.
-  selected?: T
+  selected?: T | null
   // When `true` item selection is disabled.
   disabled?: boolean
   // Determine which items should be disabled
diff --git a/services/web/test/frontend/components/shared/select.spec.tsx b/services/web/test/frontend/components/shared/select.spec.tsx
index 9d95441aea..361679a73a 100644
--- a/services/web/test/frontend/components/shared/select.spec.tsx
+++ b/services/web/test/frontend/components/shared/select.spec.tsx
@@ -329,5 +329,13 @@ describe('<Select />', function () {
       })
       cy.findByText('Demo item 2').should('exist')
     })
+
+    it('should show default text when selected is null', function () {
+      render({
+        selected: null,
+        defaultText: 'Choose an item',
+      })
+      cy.findByText('Choose an item').should('exist')
+    })
   })
 })