From 356bd4f46328be6d884ab0758193f65d9fd7aca4 Mon Sep 17 00:00:00 2001
From: Mohammer5 <jan-gerke@dhis2.org>
Date: Mon, 25 Nov 2024 21:42:44 +0800
Subject: [PATCH] fix(select a11y): handle remaining TODO comments & rename
 internal components

---
 collections/forms/i18n/en.pot                 |   4 +-
 .../SingleSelectA11yFieldFF.js                |  12 +-
 .../SingleSelectA11yFieldFF.prod.stories.js   |   6 +-
 .../SingleSelectA11yFieldFF.test.js           |   6 +-
 .../single-select-a11y-field.js               |  18 +-
 .../single-select-a11y-field.prod.stories.js  |  16 +-
 .../single-select-a11y-field.test.js          |  14 +-
 .../__stories__/DefaultPosition.js            |  18 +-
 .../single-select-a11y/__stories__/Dense.js   |  13 +-
 .../single-select-a11y/__stories__/Empty.js   |  14 +-
 .../__stories__/EmptyWithEmptyNode.js         |  14 +-
 .../__stories__/EmptyWithEmptyText.js         |  14 +-
 .../__stories__/FlippedPosition.js            |  18 +-
 .../__stories__/InfiniteLoading.js            |  12 +-
 .../single-select-a11y/__stories__/Loading.js |   5 +-
 .../__stories__/ShiftedIntoView.js            |  17 +-
 .../__stories__/WithClearButton.js            |  16 +-
 .../__stories__/WithCustomLowMaxHeight.js     |  13 +-
 .../__stories__/WithCustomOptions.js          |  13 +-
 .../__stories__/WithDisabledOption.js         |  16 +-
 .../__stories__/WithFilterField.js            |  13 +-
 .../__stories__/WithInitialFocus.js           |  14 +-
 .../__stories__/WithManyOptions.js            |  16 +-
 .../__stories__/WithNoMatchText.js            |  11 +-
 .../__stories__/WithOnBlur.js                 |  14 +-
 .../__stories__/WithOnFocus.js                |  14 +-
 .../__stories__/WithOptionsAndDisabled.js     |  13 +-
 .../__stories__/WithOptionsAndLoading.js      |  13 +-
 .../__stories__/WithOptionsAndLoadingText.js  |  13 +-
 .../__stories__/WithPlaceholder.js            |  13 +-
 .../WithPlaceholderAndSelection.js            |  16 +-
 .../__stories__/WithPrefix.js                 |  13 +-
 .../__stories__/WithPrefixAndSelection.js     |  16 +-
 .../single-select-a11y/__stories__/WithRTL.js |  17 +-
 .../__stories__/WithSelection.js              |  16 +-
 .../__stories__/WithSelectionAndDisabled.js   |  16 +-
 .../__stories__/WithoutOptionsAndLoading.js   |  16 ++
 .../__stories__/WithoutSelection.js           |   9 +-
 .../keyboard-interactions.test.e2e.js         |  32 +++-
 .../features/menu-positioning.test.e2e.js     |   2 +-
 .../single-select-a11y/is-option-hidden.js    |  12 +-
 .../menu/{menu-filter.js => filter.js}        |  10 +-
 .../menu/{menu-loading.js => loading.js}      |   4 +-
 .../src/single-select-a11y/menu/menu.js       |  55 ++----
 .../src/single-select-a11y/menu/option.js     |   2 +-
 .../{menu-options-list.js => options-list.js} |  30 ++-
 .../selected-value/clear-button.js            |  90 +++++++++
 ...lected-value-container.js => container.js} |  10 +-
 ...ed-value-placeholder.js => placeholder.js} |  12 +-
 .../{selected-value-prefix.js => prefix.js}   |   4 +-
 .../selected-value-clear-button.js            |  86 ---------
 .../selected-value/selected-value.js          |  39 ++--
 .../single-select-a11y.e2e.stories.js         |  76 +++-----
 .../single-select-a11y/single-select-a11y.js  | 101 ++++------
 .../single-select-a11y.prod.stories.js        |   1 +
 .../single-select-a11y.test.js                | 181 +++++++++---------
 .../use-handle-key-press/index.js             |   2 +-
 ...js => use-handle-key-press-on-combobox.js} |   8 +-
 .../use-handle-key-press/use-handle-typing.js |   5 +-
 ...highlight-first-option-on-previous-page.js |   7 +-
 .../use-highlight-last-option-on-next-page.js |   7 +-
 ...ingle-select-a11y-server-side-filtering.js |  25 +--
 ...ingle-select-a11y-server-side-filtering.md |  66 ++-----
 .../single-select-a11y-simple-filtering.js    |  18 +-
 .../single-select-a11y-simple-filtering.md    |  33 +---
 65 files changed, 619 insertions(+), 811 deletions(-)
 create mode 100644 components/select/src/single-select-a11y/__stories__/WithoutOptionsAndLoading.js
 rename components/select/src/single-select-a11y/menu/{menu-filter.js => filter.js} (90%)
 rename components/select/src/single-select-a11y/menu/{menu-loading.js => loading.js} (93%)
 rename components/select/src/single-select-a11y/menu/{menu-options-list.js => options-list.js} (81%)
 create mode 100644 components/select/src/single-select-a11y/selected-value/clear-button.js
 rename components/select/src/single-select-a11y/selected-value/{selected-value-container.js => container.js} (94%)
 rename components/select/src/single-select-a11y/selected-value/{selected-value-placeholder.js => placeholder.js} (73%)
 rename components/select/src/single-select-a11y/selected-value/{selected-value-prefix.js => prefix.js} (85%)
 delete mode 100644 components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
 rename components/select/src/single-select-a11y/use-handle-key-press/{use-handle-key-press.js => use-handle-key-press-on-combobox.js} (96%)

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index aedabd0ab..3949bef80 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-19T08:12:09.695Z\n"
-"PO-Revision-Date: 2024-11-19T08:12:09.696Z\n"
+"POT-Creation-Date: 2024-11-28T08:22:51.040Z\n"
+"PO-Revision-Date: 2024-11-28T08:22:51.041Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js
index 364badd5f..89700a357 100644
--- a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js
+++ b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js
@@ -28,6 +28,7 @@ export const SingleSelectA11yFieldFF = ({
     return (
         <SingleSelectA11yField
             {...rest}
+            name={input.name}
             error={hasError(meta, error)}
             valid={isValid(meta, valid, showValidStatus)}
             loading={isLoading(meta, loading, showLoadingStatus)}
@@ -41,9 +42,6 @@ export const SingleSelectA11yFieldFF = ({
 }
 
 SingleSelectA11yFieldFF.propTypes = {
-    /** necessary for IDs that are required for accessibility **/
-    idPrefix: PropTypes.string.isRequired,
-
     /** `input` props received from Final Form `Field` */
     input: inputPropType.isRequired,
 
@@ -72,10 +70,6 @@ SingleSelectA11yFieldFF.propTypes = {
     /** Whether a clear button should be displayed or not **/
     clearable: PropTypes.bool,
 
-    /** Allows to override what's rendered inside the `button[role="option"]`.
-     * Can be overriden on an individual option basis **/
-    customOption: PropTypes.elementType,
-
     /** A value for a `data-test` attribute on the root element **/
     dataTest: PropTypes.string,
 
@@ -121,6 +115,10 @@ SingleSelectA11yFieldFF.propTypes = {
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
     /** For a11y: How aggressively the user should be updated about changes in options **/
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
 
diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js
index dd6cb2c9a..71675ec9a 100644
--- a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js
+++ b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js
@@ -61,8 +61,7 @@ export const Default = () => (
     <Field
         required
         component={SingleSelectA11yFieldFF}
-        idPrefix="story"
-        name="agree"
+        name="story"
         label="Do you agree?"
         options={options}
         validate={hasValue}
@@ -72,8 +71,7 @@ export const Default = () => (
 export const InitialValue = () => (
     <Field
         component={SingleSelectA11yFieldFF}
-        idPrefix="story"
-        name="agree"
+        name="story"
         label="Do you agree?"
         options={options}
         initialValue="4"
diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js
index 4959733e8..aa51c55bd 100644
--- a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js
+++ b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js
@@ -16,8 +16,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
                     <form onSubmit={formRenderProps.handleSubmit}>
                         <Field
                             component={SingleSelectA11yFieldFF}
-                            idPrefix="story"
-                            name="selectName"
+                            name="story"
                             label="Label text"
                             options={[
                                 { value: '', label: 'None' },
@@ -56,8 +55,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
                         <Field
                             required
                             component={SingleSelectA11yFieldFF}
-                            idPrefix="story"
-                            name="selectName"
+                            name="story"
                             label="Label text"
                             validate={hasValue}
                             options={[
diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.js
index 4cfd22883..8b95f245e 100644
--- a/components/select/src/single-select-a11y-field/single-select-a11y-field.js
+++ b/components/select/src/single-select-a11y-field/single-select-a11y-field.js
@@ -12,14 +12,14 @@ export function SingleSelectA11yField(props) {
         disabled,
         error,
         helpText,
-        idPrefix,
         label,
+        name,
         required,
         valid,
         validationText,
         warning,
     } = props
-    const labelId = `${idPrefix}-label`
+    const labelId = `${name}-label`
 
     return (
         <Field
@@ -41,12 +41,12 @@ export function SingleSelectA11yField(props) {
 }
 
 SingleSelectA11yField.propTypes = {
-    /** necessary for IDs that are required for accessibility **/
-    idPrefix: PropTypes.string.isRequired,
-
     /** Label displayed above the input **/
     label: PropTypes.string.isRequired,
 
+    /** necessary for IDs that are required for accessibility **/
+    name: PropTypes.string.isRequired,
+
     /** An array of options **/
     options: PropTypes.arrayOf(optionProp).isRequired,
 
@@ -65,10 +65,6 @@ SingleSelectA11yField.propTypes = {
     /** Whether a clear button should be displayed or not **/
     clearable: PropTypes.bool,
 
-    /** Allows to override what's rendered inside the `button[role="option"]`.
-     * Can be overriden on an individual option basis **/
-    customOption: PropTypes.elementType,
-
     /** A value for a `data-test` attribute on the root element **/
     dataTest: PropTypes.string,
 
@@ -114,6 +110,10 @@ SingleSelectA11yField.propTypes = {
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
     /** For a11y: How aggressively the user should be updated about changes in options **/
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
 
diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js
index 9d9aead89..6af9e0b72 100644
--- a/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js
+++ b/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js
@@ -40,7 +40,7 @@ export const Default = () => {
 
     return (
         <SingleSelectA11yField
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -58,7 +58,7 @@ export const WithHelpText = () => {
 
     return (
         <SingleSelectA11yField
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             helpText="This is the help text"
             value={value}
@@ -78,7 +78,7 @@ export const StatusValid = () => {
     return (
         <SingleSelectA11yField
             valid
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -98,7 +98,7 @@ export const StatusWarning = () => {
     return (
         <SingleSelectA11yField
             warning
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -118,7 +118,7 @@ export const StatusError = () => {
     return (
         <SingleSelectA11yField
             error
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -138,7 +138,7 @@ export const StatusDisabled = () => {
     return (
         <SingleSelectA11yField
             disabled
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -157,7 +157,7 @@ export const Required = () => {
     return (
         <SingleSelectA11yField
             required
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -176,7 +176,7 @@ export const InputWidth = () => {
     return (
         <div style={{ width: 200 }}>
             <SingleSelectA11yField
-                idPrefix="a11y"
+                name="a11y"
                 label="A very long label indeed, well at least longer than the input field to show how it looks and works and stuff"
                 value={value}
                 valueLabel={valueLabel}
diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js
index a38b50577..e05f6a65c 100644
--- a/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js
+++ b/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js
@@ -21,7 +21,7 @@ describe('<SingleSelectA11yField />', () => {
 
     it('should forward props to the SingleSelectA11y component', () => {
         const options = []
-        const customOption = () => null
+        const optionComponent = () => null
         const onChange = () => null
         const onBlur = () => null
         const onEndReached = () => null
@@ -32,14 +32,14 @@ describe('<SingleSelectA11yField />', () => {
             <SingleSelectA11yField
                 label="Label text"
                 // Props that'll be passed to SingleSelectA11y
-                idPrefix="foo"
+                name="foo"
                 options={options}
                 onChange={onChange}
                 autoFocus={false}
                 className=""
                 clearText=""
                 clearable={false}
-                customOption={customOption}
+                optionComponent={optionComponent}
                 dataTest=""
                 dense={false}
                 disabled={false}
@@ -67,15 +67,15 @@ describe('<SingleSelectA11yField />', () => {
             />
         )
 
-        expect(SingleSelectA11y.mock.calls[0][0].idPrefix).toBe('foo')
+        expect(SingleSelectA11y.mock.calls[0][0].name).toBe('foo')
         expect(SingleSelectA11y.mock.calls[0][0].options).toBe(options)
         expect(SingleSelectA11y.mock.calls[0][0].onChange).toBe(onChange)
         expect(SingleSelectA11y.mock.calls[0][0].autoFocus).toBe(false)
         expect(SingleSelectA11y.mock.calls[0][0].className).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].clearText).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].clearable).toBe(false)
-        expect(SingleSelectA11y.mock.calls[0][0].customOption).toBe(
-            customOption
+        expect(SingleSelectA11y.mock.calls[0][0].optionComponent).toBe(
+            optionComponent
         )
         expect(SingleSelectA11y.mock.calls[0][0].dataTest).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].dense).toBe(false)
@@ -122,7 +122,7 @@ describe('<SingleSelectA11yField />', () => {
                 validationText="Validation text"
                 valid={true}
                 // Props required by SingleSelectA11y
-                idPrefix="foo"
+                name="foo"
                 options={[]}
                 onChange={() => null}
             />
diff --git a/components/select/src/single-select-a11y/__stories__/DefaultPosition.js b/components/select/src/single-select-a11y/__stories__/DefaultPosition.js
index 9476342e4..2a2e88acc 100644
--- a/components/select/src/single-select-a11y/__stories__/DefaultPosition.js
+++ b/components/select/src/single-select-a11y/__stories__/DefaultPosition.js
@@ -3,7 +3,10 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const DefaultPosition = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <div
@@ -23,16 +26,9 @@ export const DefaultPosition = () => {
                 }}
             >
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value={value}
-                    valueLabel={
-                        value
-                            ? fiveOptions.find(
-                                  (option) => option.value === value
-                              ).label
-                            : ''
-                    }
-                    onChange={(nextValue) => setValue(nextValue)}
+                    name="a11y"
+                    selected={selected}
+                    onChange={setSelected}
                     options={fiveOptions}
                 />
             </div>
diff --git a/components/select/src/single-select-a11y/__stories__/Dense.js b/components/select/src/single-select-a11y/__stories__/Dense.js
index 1dbb334d4..c4b147a3f 100644
--- a/components/select/src/single-select-a11y/__stories__/Dense.js
+++ b/components/select/src/single-select-a11y/__stories__/Dense.js
@@ -3,19 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const Dense = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             dense
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/Empty.js b/components/select/src/single-select-a11y/__stories__/Empty.js
index 21b873079..d365edb14 100644
--- a/components/select/src/single-select-a11y/__stories__/Empty.js
+++ b/components/select/src/single-select-a11y/__stories__/Empty.js
@@ -1,20 +1,14 @@
 import React, { useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
-import { options } from './options.js'
 
 export const Empty = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={[]}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js b/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js
index 7732ff5b1..206a53a32 100644
--- a/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js
+++ b/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js
@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
-import { options } from './options.js'
 
 export const EmptyWithEmptyNode = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const emptyNode = (
         <div
             style={{
@@ -18,14 +17,9 @@ export const EmptyWithEmptyNode = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={[]}
             empty={emptyNode}
         />
diff --git a/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyText.js b/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyText.js
index 703d9ba26..b3fcab017 100644
--- a/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyText.js
+++ b/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyText.js
@@ -1,20 +1,14 @@
 import React, { useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
-import { options } from './options.js'
 
 export const EmptyWithEmptyText = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={[]}
             empty="Custom empty text"
         />
diff --git a/components/select/src/single-select-a11y/__stories__/FlippedPosition.js b/components/select/src/single-select-a11y/__stories__/FlippedPosition.js
index 6eea4f0c8..9d90e7d97 100644
--- a/components/select/src/single-select-a11y/__stories__/FlippedPosition.js
+++ b/components/select/src/single-select-a11y/__stories__/FlippedPosition.js
@@ -3,7 +3,10 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const FlippedPosition = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <div
@@ -22,16 +25,9 @@ export const FlippedPosition = () => {
                 }}
             >
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value={value}
-                    valueLabel={
-                        value
-                            ? fiveOptions.find(
-                                  (option) => option.value === value
-                              ).label
-                            : ''
-                    }
-                    onChange={(nextValue) => setValue(nextValue)}
+                    name="a11y"
+                    selected={selected}
+                    onChange={setSelected}
                     options={fiveOptions}
                 />
             </div>
diff --git a/components/select/src/single-select-a11y/__stories__/InfiniteLoading.js b/components/select/src/single-select-a11y/__stories__/InfiniteLoading.js
index 6744436fa..088303e98 100644
--- a/components/select/src/single-select-a11y/__stories__/InfiniteLoading.js
+++ b/components/select/src/single-select-a11y/__stories__/InfiniteLoading.js
@@ -25,11 +25,8 @@ const optionChunks = options.reduce((chunks, option, index) => {
 export const InfiniteLoading = () => {
     const [loading, setLoading] = useState(false)
     const [curLoadedPage, setCurLoadedPage] = useState(0)
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const [loadedOptions, setLoadedOptions] = useState(optionChunks[0])
-    const valueLabel = value
-        ? loadedOptions.find((option) => option.value === value).label
-        : ''
 
     const loadNextOptions = useCallback(() => {
         const nextPage = curLoadedPage + 1
@@ -56,12 +53,11 @@ export const InfiniteLoading = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={valueLabel}
+            name="a11y"
+            selected={selected}
             loading={loading}
             menuLoadingText="Foo bar baz"
-            onChange={(nextValue) => setValue(nextValue)}
+            onChange={setSelected}
             options={loadedOptions}
             onEndReached={loadNextOptions}
         />
diff --git a/components/select/src/single-select-a11y/__stories__/Loading.js b/components/select/src/single-select-a11y/__stories__/Loading.js
index 8e95a0b44..e149ec836 100644
--- a/components/select/src/single-select-a11y/__stories__/Loading.js
+++ b/components/select/src/single-select-a11y/__stories__/Loading.js
@@ -6,9 +6,8 @@ export const Loading = () => {
     return (
         <SingleSelectA11y
             loading
-            idPrefix="a11y"
-            value=""
-            valueLabel=""
+            name="a11y"
+            selected={null}
             onChange={() => null}
             options={options}
         />
diff --git a/components/select/src/single-select-a11y/__stories__/ShiftedIntoView.js b/components/select/src/single-select-a11y/__stories__/ShiftedIntoView.js
index a878b92db..3a1c36bb4 100644
--- a/components/select/src/single-select-a11y/__stories__/ShiftedIntoView.js
+++ b/components/select/src/single-select-a11y/__stories__/ShiftedIntoView.js
@@ -3,20 +3,17 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const ShiftedIntoView = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <>
             <SingleSelectA11y
-                idPrefix="a11y"
-                value={value}
-                valueLabel={
-                    value
-                        ? fiveOptions.find((option) => option.value === value)
-                              .label
-                        : ''
-                }
-                onChange={(nextValue) => setValue(nextValue)}
+                name="a11y"
+                selected={selected}
+                onChange={setSelected}
                 options={fiveOptions}
             />
 
diff --git a/components/select/src/single-select-a11y/__stories__/WithClearButton.js b/components/select/src/single-select-a11y/__stories__/WithClearButton.js
index e935c947f..994f5c2c2 100644
--- a/components/select/src/single-select-a11y/__stories__/WithClearButton.js
+++ b/components/select/src/single-select-a11y/__stories__/WithClearButton.js
@@ -3,19 +3,17 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithClearButton = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
             clearable
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithCustomLowMaxHeight.js b/components/select/src/single-select-a11y/__stories__/WithCustomLowMaxHeight.js
index 8472d346f..815584ea3 100644
--- a/components/select/src/single-select-a11y/__stories__/WithCustomLowMaxHeight.js
+++ b/components/select/src/single-select-a11y/__stories__/WithCustomLowMaxHeight.js
@@ -3,18 +3,13 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { options } from './options.js'
 
 export const WithCustomLowMaxHeight = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={options}
             menuMaxHeight="100px"
         />
diff --git a/components/select/src/single-select-a11y/__stories__/WithCustomOptions.js b/components/select/src/single-select-a11y/__stories__/WithCustomOptions.js
index d1c649d4e..456c1b1d6 100644
--- a/components/select/src/single-select-a11y/__stories__/WithCustomOptions.js
+++ b/components/select/src/single-select-a11y/__stories__/WithCustomOptions.js
@@ -59,7 +59,7 @@ const CustomOption = ({ label }) => (
 )
 
 export const WithCustomOptions = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const optionsWithCustomStyle = useMemo(() => {
         return options.slice(0, 3).map((option) => ({
             ...option,
@@ -69,14 +69,9 @@ export const WithCustomOptions = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={optionsWithCustomStyle}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithDisabledOption.js b/components/select/src/single-select-a11y/__stories__/WithDisabledOption.js
index 3a7702279..be6e90319 100644
--- a/components/select/src/single-select-a11y/__stories__/WithDisabledOption.js
+++ b/components/select/src/single-select-a11y/__stories__/WithDisabledOption.js
@@ -9,18 +9,16 @@ const fiveOptionsWithFourthDisabled = [
 ]
 
 export const WithDisabledOption = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptionsWithFourthDisabled}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithFilterField.js b/components/select/src/single-select-a11y/__stories__/WithFilterField.js
index b0f069b57..5013347e0 100644
--- a/components/select/src/single-select-a11y/__stories__/WithFilterField.js
+++ b/components/select/src/single-select-a11y/__stories__/WithFilterField.js
@@ -3,7 +3,7 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { options } from './options.js'
 
 export const WithFilterField = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const [filterValue, setFilterValue] = useState('')
     const filteredOptions = useMemo(() => {
         return filterValue
@@ -14,16 +14,11 @@ export const WithFilterField = () => {
             : options
     }, [filterValue])
 
-    const valueLabel = value
-        ? options.find((option) => option.value === value).label
-        : ''
-
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={valueLabel}
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             filterable
             filterPlaceholder="Filter placeholder"
             filterValue={filterValue}
diff --git a/components/select/src/single-select-a11y/__stories__/WithInitialFocus.js b/components/select/src/single-select-a11y/__stories__/WithInitialFocus.js
index 736ded59d..c0f324be8 100644
--- a/components/select/src/single-select-a11y/__stories__/WithInitialFocus.js
+++ b/components/select/src/single-select-a11y/__stories__/WithInitialFocus.js
@@ -3,21 +3,15 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithInitialFocus = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <>
             <SingleSelectA11y
                 autoFocus
-                idPrefix="a11y"
-                value={value}
-                valueLabel={
-                    value
-                        ? fiveOptions.find((option) => option.value === value)
-                              .label
-                        : ''
-                }
-                onChange={(nextValue) => setValue(nextValue)}
+                name="a11y"
+                selected={selected}
+                onChange={setSelected}
                 options={fiveOptions}
             />
 
diff --git a/components/select/src/single-select-a11y/__stories__/WithManyOptions.js b/components/select/src/single-select-a11y/__stories__/WithManyOptions.js
index d14b38f70..b1493be53 100644
--- a/components/select/src/single-select-a11y/__stories__/WithManyOptions.js
+++ b/components/select/src/single-select-a11y/__stories__/WithManyOptions.js
@@ -3,18 +3,16 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { options } from './options.js'
 
 export const WithManyOptions = () => {
-    const [value, setValue] = useState('art_entry_point:_no_pmtct')
+    const [selected, setSelected] = useState({
+        label: 'ART entry point: No PMTCT',
+        value: 'art_entry_point:_no_pmtct',
+    })
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={options}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithNoMatchText.js b/components/select/src/single-select-a11y/__stories__/WithNoMatchText.js
index 5acc1fd74..03c8c323b 100644
--- a/components/select/src/single-select-a11y/__stories__/WithNoMatchText.js
+++ b/components/select/src/single-select-a11y/__stories__/WithNoMatchText.js
@@ -2,15 +2,18 @@ import React, { useMemo, useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
 
 export const WithNoMatchText = () => {
-    const [value, setValue] = useState('foo')
+    const [selected, setSelected] = useState({
+        label: 'Foo',
+        value: 'foo',
+    })
     const [filterValue, setFilterValue] = useState('Bar')
     const filteredOptions = useMemo(() => [], [])
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             filterable
             filterPlaceholder="Filter placeholder"
             filterValue={filterValue}
diff --git a/components/select/src/single-select-a11y/__stories__/WithOnBlur.js b/components/select/src/single-select-a11y/__stories__/WithOnBlur.js
index 622eb9775..92018d7e7 100644
--- a/components/select/src/single-select-a11y/__stories__/WithOnBlur.js
+++ b/components/select/src/single-select-a11y/__stories__/WithOnBlur.js
@@ -3,22 +3,16 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithOnBlur = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const [blurTime, setBlurTime] = useState('')
 
     return (
         <>
             <SingleSelectA11y
                 onBlur={() => setBlurTime(new Date().toISOString())}
-                idPrefix="a11y"
-                value={value}
-                valueLabel={
-                    value
-                        ? fiveOptions.find((option) => option.value === value)
-                              .label
-                        : ''
-                }
-                onChange={(nextValue) => setValue(nextValue)}
+                name="a11y"
+                selected={selected}
+                onChange={setSelected}
                 options={fiveOptions}
             />
 
diff --git a/components/select/src/single-select-a11y/__stories__/WithOnFocus.js b/components/select/src/single-select-a11y/__stories__/WithOnFocus.js
index e350f1e4d..6b3f41d25 100644
--- a/components/select/src/single-select-a11y/__stories__/WithOnFocus.js
+++ b/components/select/src/single-select-a11y/__stories__/WithOnFocus.js
@@ -3,22 +3,16 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithOnFocus = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const [focusTime, setFocusTime] = useState('')
 
     return (
         <>
             <SingleSelectA11y
                 onFocus={() => setFocusTime(new Date().toISOString())}
-                idPrefix="a11y"
-                value={value}
-                valueLabel={
-                    value
-                        ? fiveOptions.find((option) => option.value === value)
-                              .label
-                        : ''
-                }
-                onChange={(nextValue) => setValue(nextValue)}
+                name="a11y"
+                selected={selected}
+                onChange={setSelected}
                 options={fiveOptions}
             />
 
diff --git a/components/select/src/single-select-a11y/__stories__/WithOptionsAndDisabled.js b/components/select/src/single-select-a11y/__stories__/WithOptionsAndDisabled.js
index acefcf4b2..56f8b1f98 100644
--- a/components/select/src/single-select-a11y/__stories__/WithOptionsAndDisabled.js
+++ b/components/select/src/single-select-a11y/__stories__/WithOptionsAndDisabled.js
@@ -3,19 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithOptionsAndDisabled = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             disabled
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoading.js b/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoading.js
index c453b2fd0..6af368d1a 100644
--- a/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoading.js
+++ b/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoading.js
@@ -9,19 +9,14 @@ const options = [
 ]
 
 export const WithOptionsAndLoading = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             loading
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={options}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoadingText.js b/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoadingText.js
index b1ab26439..6aab8c078 100644
--- a/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoadingText.js
+++ b/components/select/src/single-select-a11y/__stories__/WithOptionsAndLoadingText.js
@@ -9,20 +9,15 @@ const options = [
 ]
 
 export const WithOptionsAndLoadingText = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             loading
             menuLoadingText="Loading options"
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={options}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithPlaceholder.js b/components/select/src/single-select-a11y/__stories__/WithPlaceholder.js
index 70d27f42a..95fb5a7e8 100644
--- a/components/select/src/single-select-a11y/__stories__/WithPlaceholder.js
+++ b/components/select/src/single-select-a11y/__stories__/WithPlaceholder.js
@@ -3,20 +3,15 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { options } from './options.js'
 
 export const WithPlaceholder = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const withoutEmptyOptions = options.slice(1)
 
     return (
         <SingleSelectA11y
             placeholder="Placeholder text"
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={withoutEmptyOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithPlaceholderAndSelection.js b/components/select/src/single-select-a11y/__stories__/WithPlaceholderAndSelection.js
index b13999682..ba13213cb 100644
--- a/components/select/src/single-select-a11y/__stories__/WithPlaceholderAndSelection.js
+++ b/components/select/src/single-select-a11y/__stories__/WithPlaceholderAndSelection.js
@@ -3,19 +3,17 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithPlaceholderAndSelection = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
             placeholder="Placeholder text"
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithPrefix.js b/components/select/src/single-select-a11y/__stories__/WithPrefix.js
index 57af47deb..889f9e12c 100644
--- a/components/select/src/single-select-a11y/__stories__/WithPrefix.js
+++ b/components/select/src/single-select-a11y/__stories__/WithPrefix.js
@@ -3,19 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithPrefix = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             prefix="Prefix text"
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithPrefixAndSelection.js b/components/select/src/single-select-a11y/__stories__/WithPrefixAndSelection.js
index 9d6de8c2b..d6d10ced9 100644
--- a/components/select/src/single-select-a11y/__stories__/WithPrefixAndSelection.js
+++ b/components/select/src/single-select-a11y/__stories__/WithPrefixAndSelection.js
@@ -3,19 +3,17 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithPrefixAndSelection = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
             prefix="Prefix text"
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithRTL.js b/components/select/src/single-select-a11y/__stories__/WithRTL.js
index 4fa224ab8..0eebabf52 100644
--- a/components/select/src/single-select-a11y/__stories__/WithRTL.js
+++ b/components/select/src/single-select-a11y/__stories__/WithRTL.js
@@ -3,7 +3,10 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithRTL = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     // as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
     useEffect(() => {
@@ -16,15 +19,9 @@ export const WithRTL = () => {
     return (
         <div dir="rtl">
             <SingleSelectA11y
-                idPrefix="a11y"
-                value={value}
-                valueLabel={
-                    value
-                        ? fiveOptions.find((option) => option.value === value)
-                              .label
-                        : ''
-                }
-                onChange={(nextValue) => setValue(nextValue)}
+                name="a11y"
+                selected={selected}
+                onChange={setSelected}
                 options={fiveOptions}
             />
         </div>
diff --git a/components/select/src/single-select-a11y/__stories__/WithSelection.js b/components/select/src/single-select-a11y/__stories__/WithSelection.js
index db78e79dc..b6ff64a5f 100644
--- a/components/select/src/single-select-a11y/__stories__/WithSelection.js
+++ b/components/select/src/single-select-a11y/__stories__/WithSelection.js
@@ -3,18 +3,16 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithSelection = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithSelectionAndDisabled.js b/components/select/src/single-select-a11y/__stories__/WithSelectionAndDisabled.js
index bb8c50732..b3a795e4f 100644
--- a/components/select/src/single-select-a11y/__stories__/WithSelectionAndDisabled.js
+++ b/components/select/src/single-select-a11y/__stories__/WithSelectionAndDisabled.js
@@ -3,19 +3,17 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithSelectionAndDisabled = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <SingleSelectA11y
             disabled
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/__stories__/WithoutOptionsAndLoading.js b/components/select/src/single-select-a11y/__stories__/WithoutOptionsAndLoading.js
new file mode 100644
index 000000000..f9c55fb94
--- /dev/null
+++ b/components/select/src/single-select-a11y/__stories__/WithoutOptionsAndLoading.js
@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { SingleSelectA11y } from '../single-select-a11y.js'
+
+export const WithoutOptionsAndLoading = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SingleSelectA11y
+            loading
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
+            options={[]}
+        />
+    )
+}
diff --git a/components/select/src/single-select-a11y/__stories__/WithoutSelection.js b/components/select/src/single-select-a11y/__stories__/WithoutSelection.js
index aa17177f9..6d1abcff5 100644
--- a/components/select/src/single-select-a11y/__stories__/WithoutSelection.js
+++ b/components/select/src/single-select-a11y/__stories__/WithoutSelection.js
@@ -3,13 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const WithoutSelection = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            onChange={(nextValue) => setValue(nextValue)}
+            inputMaxHeight="50px"
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )
diff --git a/components/select/src/single-select-a11y/features/keyboard-interactions.test.e2e.js b/components/select/src/single-select-a11y/features/keyboard-interactions.test.e2e.js
index bfc6b396b..5213ce653 100644
--- a/components/select/src/single-select-a11y/features/keyboard-interactions.test.e2e.js
+++ b/components/select/src/single-select-a11y/features/keyboard-interactions.test.e2e.js
@@ -39,6 +39,8 @@ describe('<SingleSelectA11y/>', () => {
         cy.log(
             '**Then the first option on the currently displayed page is highlighted**'
         )
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.findByRole('option', { selected: true })
             .invoke('attr', 'aria-label')
             .should('equal', 'Select option 70')
@@ -86,6 +88,8 @@ describe('<SingleSelectA11y/>', () => {
         cy.log(
             '**Then the first option on the currently displayed page is highlighted**'
         )
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.findByRole('option', { selected: true })
             .invoke('attr', 'aria-label')
             .should('equal', 'Select option 16')
@@ -110,6 +114,8 @@ describe('<SingleSelectA11y/>', () => {
         })
 
         cy.log('**Then the first option on the previous page is highlighted**')
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.findByRole('option', { selected: true })
             .invoke('attr', 'aria-label')
             .should('equal', 'Select option 61')
@@ -145,6 +151,8 @@ describe('<SingleSelectA11y/>', () => {
         })
 
         cy.log('**Then the first option on the previous page is highlighted**')
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.findByRole('option', { selected: true })
             .invoke('attr', 'aria-label')
             .should('equal', 'Select option 16')
@@ -193,6 +201,8 @@ describe('<SingleSelectA11y/>', () => {
         })
 
         cy.log('**Then the first option is being highlighted**')
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.all(
             () => cy.findAllByRole('option').invoke('get', 0),
             () => cy.findByRole('option', { selected: true }).invoke('get', 0)
@@ -237,6 +247,8 @@ describe('<SingleSelectA11y/>', () => {
         })
 
         cy.log('**Then the second option is being highlighted**')
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.all(
             () => cy.findAllByRole('option').invoke('get', 1),
             () => cy.findByRole('option', { selected: true }).invoke('get', 0)
@@ -263,6 +275,8 @@ describe('<SingleSelectA11y/>', () => {
         cy.log(
             '**Then the last option on the currently displayed page is highlighted**'
         )
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
         cy.all(
             () => cy.get('[role="option"]:visible').last().invoke('get', 0),
             () => cy.findByRole('option', { selected: true }).invoke('get', 0)
@@ -299,6 +313,9 @@ describe('<SingleSelectA11y/>', () => {
             force: true,
         })
 
+        // For some reason, it takes a little time to change the highlighted  option
+        cy.wait(1)
+
         cy.log(
             '**Then the first enabled option after last option on the currently displayed page is highlighted**'
         )
@@ -309,14 +326,10 @@ describe('<SingleSelectA11y/>', () => {
             expect(highlightedOption).to.equal(eighteensOptions)
         })
 
-        // For some reason, without the timeout,
-        // cypress will still get the previously visible page
-        // when using the `:visible` pseudo-selector
-        cy.wait(0)
-
         cy.log(
             '**And the first enabled option after last option on the currently displayed page is the first visible option**'
         )
+
         cy.all(
             () => cy.get('[role="option"]:visible').invoke('get', 0),
             () => cy.findByRole('option', { selected: true }).invoke('get', 0)
@@ -467,13 +480,14 @@ describe('<SingleSelectA11y/>', () => {
             )
             for (
                 let i = 0;
-                i < 11; // This will bring us to the second last option exactly
+                i < 98; // This will bring us to the second last option exactly
                 ++i
             ) {
                 cy.findByRole('combobox').trigger('keydown', {
-                    key: 'PageDown',
+                    key: 'ArrowDown',
                     force: true,
                 })
+                cy.wait(1)
             }
             cy.findAllByRole('option').eq(98).should('be.visible')
 
@@ -487,6 +501,8 @@ describe('<SingleSelectA11y/>', () => {
             })
 
             cy.log('**Then the last option is highlighted**')
+            // For some reason, it takes a little time to change the highlighted  option
+            cy.wait(1)
             cy.all(
                 () => cy.findAllByRole('option').last().invoke('get', 0),
                 () =>
@@ -540,6 +556,8 @@ describe('<SingleSelectA11y/>', () => {
             })
 
             cy.log('**Then the last option is highlighted**')
+            // For some reason, it takes a little time to change the highlighted  option
+            cy.wait(1)
             cy.all(
                 () => cy.findAllByRole('option').invoke('get', 98),
                 () =>
diff --git a/components/select/src/single-select-a11y/features/menu-positioning.test.e2e.js b/components/select/src/single-select-a11y/features/menu-positioning.test.e2e.js
index 5ea33c8aa..057bb9afc 100644
--- a/components/select/src/single-select-a11y/features/menu-positioning.test.e2e.js
+++ b/components/select/src/single-select-a11y/features/menu-positioning.test.e2e.js
@@ -68,7 +68,7 @@ describe('SingleSelectA11y: Menu positioning', () => {
             const selectedValueRect = $selectedValue.getBoundingClientRect()
             const menuRect = $menu.getBoundingClientRect()
 
-            expect(selectedValueRect.top).to.be.closeTo(menuRect.bottom, 1)
+            expect(selectedValueRect.top).to.be.closeTo(menuRect.bottom, 2)
         })
 
         // And the left of the SingleSelect is aligned with the left of the anchor
diff --git a/components/select/src/single-select-a11y/is-option-hidden.js b/components/select/src/single-select-a11y/is-option-hidden.js
index f7035d0fe..073139cbf 100644
--- a/components/select/src/single-select-a11y/is-option-hidden.js
+++ b/components/select/src/single-select-a11y/is-option-hidden.js
@@ -1,3 +1,11 @@
+// If this many pixels are invisible, we still consider the option visible
+// The reason we're doing this is because of JS' number issues,
+// e.g:
+//      optionOffsetBottom is 345.6000061035156
+//      containerOffsetBottom is 345.5999984741211
+//      -> Without tolerance, option is invisible
+const TOLERANCE = 2
+
 export function isOptionHidden(option, scrollContainer) {
     const optionOffsetTop = option.getBoundingClientRect().top
     const optionHeight = option.offsetHeight
@@ -7,7 +15,7 @@ export function isOptionHidden(option, scrollContainer) {
     const containerOffsetBottom = containerOffsetTop + containerHeight
 
     return (
-        optionOffsetBottom > containerOffsetBottom ||
-        optionOffsetTop < containerOffsetTop
+        optionOffsetBottom > containerOffsetBottom + TOLERANCE ||
+        optionOffsetTop < containerOffsetTop - TOLERANCE
     )
 }
diff --git a/components/select/src/single-select-a11y/menu/menu-filter.js b/components/select/src/single-select-a11y/menu/filter.js
similarity index 90%
rename from components/select/src/single-select-a11y/menu/menu-filter.js
rename to components/select/src/single-select-a11y/menu/filter.js
index 828ed0ec5..11aa20daf 100644
--- a/components/select/src/single-select-a11y/menu/menu-filter.js
+++ b/components/select/src/single-select-a11y/menu/filter.js
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales/index.js'
 
-export function MenuFilter({
+export function Filter({
+    ariaControls,
     dataTest,
-    idPrefix,
     label,
     placeholder,
     tabIndex,
@@ -19,7 +19,7 @@ export function MenuFilter({
             <Input
                 dense
                 tabIndex={tabIndex}
-                ariaControls={`${idPrefix}-listbox`}
+                ariaControls={ariaControls}
                 ariaHaspopup="listbox"
                 ariaLabel={label || i18n.t('Search options')}
                 dataTest={`${dataTest}-input`}
@@ -46,8 +46,8 @@ export function MenuFilter({
     )
 }
 
-MenuFilter.propTypes = {
-    idPrefix: PropTypes.string.isRequired,
+Filter.propTypes = {
+    ariaControls: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
diff --git a/components/select/src/single-select-a11y/menu/menu-loading.js b/components/select/src/single-select-a11y/menu/loading.js
similarity index 93%
rename from components/select/src/single-select-a11y/menu/menu-loading.js
rename to components/select/src/single-select-a11y/menu/loading.js
index 936db6391..fc57e0a0f 100644
--- a/components/select/src/single-select-a11y/menu/menu-loading.js
+++ b/components/select/src/single-select-a11y/menu/loading.js
@@ -3,7 +3,7 @@ import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export function MenuLoading({ message }) {
+export function Loading({ message }) {
     return (
         <div className="container">
             <div>
@@ -33,6 +33,6 @@ export function MenuLoading({ message }) {
     )
 }
 
-MenuLoading.propTypes = {
+Loading.propTypes = {
     message: PropTypes.string,
 }
diff --git a/components/select/src/single-select-a11y/menu/menu.js b/components/select/src/single-select-a11y/menu/menu.js
index 9d2506b28..476f16656 100644
--- a/components/select/src/single-select-a11y/menu/menu.js
+++ b/components/select/src/single-select-a11y/menu/menu.js
@@ -1,23 +1,22 @@
 import { colors, elevations } from '@dhis2/ui-constants'
 import { Layer } from '@dhis2-ui/layer'
 import { Popper } from '@dhis2-ui/popper'
-import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import { optionProp } from '../shared-prop-types.js'
 import { Empty } from './empty.js'
-import { MenuFilter } from './menu-filter.js'
-import { MenuLoading } from './menu-loading.js'
-import { MenuOptionsList } from './menu-options-list.js'
+import { Filter } from './filter.js'
+import { Loading } from './loading.js'
 import { NoMatch } from './no-match.js'
+import { OptionsList } from './options-list.js'
 
 export function Menu({
     comboBoxId,
     focussedOptionIndex,
-    idPrefix,
+    name,
     options,
     onChange,
-    customOption,
+    optionComponent,
     dataTest,
     disabled,
     empty,
@@ -34,7 +33,7 @@ export function Menu({
     noMatchText,
     optionUpdateStrategy,
     selectRef,
-    selected,
+    selectedValue,
     tabIndex,
     onBlur,
     onClose,
@@ -42,12 +41,12 @@ export function Menu({
     onFilterChange,
     onFilterInputKeyDown,
 }) {
-    const [menuWidth, setMenuWidth] = useState('auto')
+    const [menuWidth, setWidth] = useState('auto')
     const dataTestPrefix = `${dataTest}-menu`
 
     useEffect(() => {
         if (selectRef) {
-            const callback = () => setMenuWidth(`${selectRef.offsetWidth}px`)
+            const callback = () => setWidth(`${selectRef.offsetWidth}px`)
             callback() // We want to know the width as soon as the
 
             selectRef.addEventListener('resize', callback)
@@ -75,17 +74,14 @@ export function Menu({
                 placement="bottom-start"
                 observeReferenceResize
             >
-                <div
-                    className={cx('menu', { hidden })}
-                    style={{ width: menuWidth, maxHeight }}
-                >
+                <div className="menu" style={{ width: menuWidth, maxHeight }}>
                     {filterable && (
                         <div className="filter-container">
-                            <MenuFilter
-                                idPrefix={idPrefix}
+                            <Filter
                                 dataTest={`${dataTestPrefix}-filter`}
                                 value={filterValue}
                                 label={filterLabel}
+                                ariaControls={`${name}-listbox`}
                                 placeholder={filterPlaceholder}
                                 tabIndex={tabIndex}
                                 onChange={onFilterChange}
@@ -98,26 +94,21 @@ export function Menu({
 
                     {hasNoFilterMatch && <NoMatch>{noMatchText}</NoMatch>}
 
-                    <div
-                        className={cx('listbox-container', {
-                            'no-options': !options.length,
-                        })}
-                    >
+                    <div className="listbox-container">
                         <div className="listbox-wrapper">
-                            <MenuOptionsList
+                            <OptionsList
                                 ref={listBoxRef}
                                 comboBoxId={comboBoxId}
-                                customOption={customOption}
+                                optionComponent={optionComponent}
                                 dataTest={`${dataTestPrefix}-list`}
                                 disabled={disabled}
-                                expanded={!hidden}
                                 focussedOptionIndex={focussedOptionIndex}
-                                idPrefix={idPrefix}
                                 labelledBy={labelledBy}
                                 loading={loading}
+                                id={`${name}-listbox`}
                                 optionUpdateStrategy={optionUpdateStrategy}
                                 options={options}
-                                selected={selected}
+                                selectedValue={selectedValue}
                                 onBlur={onBlur}
                                 onChange={onChange}
                                 onEndReached={onEndReached}
@@ -126,7 +117,7 @@ export function Menu({
 
                         {loading && (
                             <div className="menu-loading-container">
-                                <MenuLoading message={loadingText} />
+                                <Loading message={loadingText} />
                             </div>
                         )}
                     </div>
@@ -154,12 +145,6 @@ export function Menu({
                             overflow: hidden;
                         }
 
-                        .no-options {
-                            // @TODO: What should this value be?
-                            // Ask Joe
-                            height: 50px;
-                        }
-
                         .listbox-wrapper {
                             overflow: auto;
                             flex-grow: 1;
@@ -182,13 +167,12 @@ export function Menu({
 Menu.propTypes = {
     comboBoxId: PropTypes.string.isRequired,
     focussedOptionIndex: PropTypes.number.isRequired,
-    idPrefix: PropTypes.string.isRequired,
     listBoxRef: PropTypes.shape({
         current: PropTypes.instanceOf(HTMLElement),
     }).isRequired,
+    name: PropTypes.string.isRequired,
     options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
-    customOption: PropTypes.elementType,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
     empty: PropTypes.node,
@@ -202,9 +186,10 @@ Menu.propTypes = {
     loadingText: PropTypes.string,
     maxHeight: PropTypes.string,
     noMatchText: PropTypes.string,
+    optionComponent: PropTypes.elementType,
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
     selectRef: PropTypes.instanceOf(HTMLElement),
-    selected: PropTypes.string,
+    selectedValue: PropTypes.string,
     tabIndex: PropTypes.string,
     onBlur: PropTypes.func,
     onClose: PropTypes.func,
diff --git a/components/select/src/single-select-a11y/menu/option.js b/components/select/src/single-select-a11y/menu/option.js
index 14b496bc3..041be6d6f 100644
--- a/components/select/src/single-select-a11y/menu/option.js
+++ b/components/select/src/single-select-a11y/menu/option.js
@@ -114,7 +114,7 @@ export function Option({
             aria-label={label}
             onClick={() => {
                 if (!disabled) {
-                    onClick(value)
+                    onClick({ value, label })
                 }
             }}
         >
diff --git a/components/select/src/single-select-a11y/menu/menu-options-list.js b/components/select/src/single-select-a11y/menu/options-list.js
similarity index 81%
rename from components/select/src/single-select-a11y/menu/menu-options-list.js
rename to components/select/src/single-select-a11y/menu/options-list.js
index 3fbf66bc2..df200f08d 100644
--- a/components/select/src/single-select-a11y/menu/menu-options-list.js
+++ b/components/select/src/single-select-a11y/menu/options-list.js
@@ -4,17 +4,16 @@ import { isOptionHidden } from '../is-option-hidden.js'
 import { optionProp } from '../shared-prop-types.js'
 import { Option } from './option.js'
 
-export const MenuOptionsList = forwardRef(function MenuOptionsList(
+export const OptionsList = forwardRef(function OptionsList(
     {
         comboBoxId,
-        customOption,
-        expanded,
+        optionComponent,
         focussedOptionIndex,
-        idPrefix,
+        id,
         labelledBy,
         optionUpdateStrategy,
         options,
-        selected,
+        selectedValue,
         dataTest,
         disabled,
         loading,
@@ -29,9 +28,7 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
     // * the menu opens
     useEffect(() => {
         const { current: listBox } = ref
-        const highlightedOption = expanded
-            ? listBox.childNodes[focussedOptionIndex]
-            : null
+        const highlightedOption = listBox.childNodes[focussedOptionIndex]
 
         if (highlightedOption) {
             const listBoxParent = listBox.parentNode
@@ -44,13 +41,13 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
                 highlightedOption.scrollIntoView()
             }
         }
-    }, [expanded, focussedOptionIndex, ref])
+    }, [focussedOptionIndex, ref])
 
     return (
         <div
             ref={ref}
             role="listbox"
-            id={`${idPrefix}-listbox`}
+            id={id}
             aria-labelledby={labelledBy}
             aria-live={optionUpdateStrategy}
             aria-busy={loading.toString()}
@@ -67,7 +64,7 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
                     },
                     index
                 ) => {
-                    const isSelected = value === selected
+                    const isSelected = value === selectedValue
                     const isLast = index === options.length - 1
 
                     return (
@@ -82,7 +79,7 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
                             comboBoxId={comboBoxId}
                             disabled={disabled || optionDisabled}
                             onClick={isSelected ? () => null : onChange}
-                            component={component || customOption}
+                            component={component || optionComponent}
                             onBecameVisible={isLast ? onEndReached : undefined}
                         />
                     )
@@ -92,20 +89,19 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
     )
 })
 
-MenuOptionsList.propTypes = {
+OptionsList.propTypes = {
     comboBoxId: PropTypes.string.isRequired,
-    expanded: PropTypes.bool.isRequired,
     focussedOptionIndex: PropTypes.number.isRequired,
-    idPrefix: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
     options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
-    customOption: PropTypes.elementType,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
     labelledBy: PropTypes.string,
     loading: PropTypes.bool,
+    optionComponent: PropTypes.elementType,
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
-    selected: PropTypes.string,
+    selectedValue: PropTypes.string,
     onBlur: PropTypes.func,
     onEndReached: PropTypes.func,
 }
diff --git a/components/select/src/single-select-a11y/selected-value/clear-button.js b/components/select/src/single-select-a11y/selected-value/clear-button.js
new file mode 100644
index 000000000..71644f3cf
--- /dev/null
+++ b/components/select/src/single-select-a11y/selected-value/clear-button.js
@@ -0,0 +1,90 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import { Tooltip } from '@dhis2-ui/tooltip'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+
+function ClearButton({ onClear, clearText, dataTest }) {
+    return (
+        <button
+            aria-label={i18n.t('{{clearText}}', { clearText })}
+            data-test={dataTest}
+            onClick={(e) => {
+                e.stopPropagation()
+                onClear()
+            }}
+        >
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z"
+                    fill="none"
+                />
+            </svg>
+            <style jsx>{`
+                button {
+                    background: none;
+                    border: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    height: 24px;
+                    width: 24px;
+                    border-radius: 3px;
+                }
+                button svg path {
+                    fill: ${colors.grey500};
+                }
+                button:hover svg path {
+                    fill: ${colors.grey800};
+                }
+                button:hover {
+                    background: ${colors.grey200};
+                }
+                button:focus {
+                    outline: 2px solid ${theme.focus};
+                }
+            `}</style>
+        </button>
+    )
+}
+
+ClearButton.propTypes = {
+    clearText: PropTypes.string.isRequired,
+    onClear: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+}
+
+function ClearButtonWithTooltip({ onClear, clearText, dataTest }) {
+    const clearButton = (
+        <ClearButton
+            onClear={onClear}
+            dataTest={dataTest}
+            clearText={clearText}
+        />
+    )
+
+    if (!clearText) {
+        return clearButton
+    }
+
+    return (
+        <Tooltip openDelay={500} content={clearText}>
+            {clearButton}
+        </Tooltip>
+    )
+}
+
+ClearButtonWithTooltip.propTypes = {
+    clearText: PropTypes.string.isRequired,
+    onClear: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+}
+
+export { ClearButtonWithTooltip as ClearButton }
diff --git a/components/select/src/single-select-a11y/selected-value/selected-value-container.js b/components/select/src/single-select-a11y/selected-value/container.js
similarity index 94%
rename from components/select/src/single-select-a11y/selected-value/selected-value-container.js
rename to components/select/src/single-select-a11y/selected-value/container.js
index cb7886a46..b0cf4d6d5 100644
--- a/components/select/src/single-select-a11y/selected-value/selected-value-container.js
+++ b/components/select/src/single-select-a11y/selected-value/container.js
@@ -3,11 +3,10 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useCallback, useEffect } from 'react'
 
-export const SelectedValueContainer = forwardRef(function Container(
+export const Container = forwardRef(function Container(
     {
         children,
         comboBoxId,
-        idPrefix,
         autoFocus,
         dataTest,
         dense,
@@ -15,6 +14,7 @@ export const SelectedValueContainer = forwardRef(function Container(
         error,
         expanded,
         labelledBy,
+        name,
         placeholder,
         tabIndex,
         valid,
@@ -53,7 +53,7 @@ export const SelectedValueContainer = forwardRef(function Container(
             className={cx({ error, warning, valid, disabled, dense })}
             data-test={dataTest}
             ref={ref}
-            aria-controls={`${idPrefix}-listbox`}
+            aria-controls={`${name}-listbox`}
             aria-expanded={expanded.toString()}
             aria-haspopup="listbox"
             aria-labelledby={labelledBy}
@@ -124,10 +124,10 @@ export const SelectedValueContainer = forwardRef(function Container(
     )
 })
 
-SelectedValueContainer.propTypes = {
+Container.propTypes = {
     children: PropTypes.any.isRequired,
     comboBoxId: PropTypes.string.isRequired,
-    idPrefix: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     onKeyDown: PropTypes.func.isRequired,
     autoFocus: PropTypes.bool,
     dataTest: PropTypes.string,
diff --git a/components/select/src/single-select-a11y/selected-value/selected-value-placeholder.js b/components/select/src/single-select-a11y/selected-value/placeholder.js
similarity index 73%
rename from components/select/src/single-select-a11y/selected-value/selected-value-placeholder.js
rename to components/select/src/single-select-a11y/selected-value/placeholder.js
index ddd43f7b1..103a70f28 100644
--- a/components/select/src/single-select-a11y/selected-value/selected-value-placeholder.js
+++ b/components/select/src/single-select-a11y/selected-value/placeholder.js
@@ -2,15 +2,7 @@ import { colors } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const SelectedValuePlaceholder = ({
-    placeholder,
-    className,
-    dataTest,
-}) => {
-    if (!placeholder) {
-        return null
-    }
-
+export function Placeholder({ placeholder, className, dataTest }) {
     return (
         <div className={className} data-test={dataTest}>
             {placeholder}
@@ -25,7 +17,7 @@ export const SelectedValuePlaceholder = ({
     )
 }
 
-SelectedValuePlaceholder.propTypes = {
+Placeholder.propTypes = {
     dataTest: PropTypes.string.isRequired,
     className: PropTypes.string,
     placeholder: PropTypes.string,
diff --git a/components/select/src/single-select-a11y/selected-value/selected-value-prefix.js b/components/select/src/single-select-a11y/selected-value/prefix.js
similarity index 85%
rename from components/select/src/single-select-a11y/selected-value/selected-value-prefix.js
rename to components/select/src/single-select-a11y/selected-value/prefix.js
index 332699147..1a71c426a 100644
--- a/components/select/src/single-select-a11y/selected-value/selected-value-prefix.js
+++ b/components/select/src/single-select-a11y/selected-value/prefix.js
@@ -2,7 +2,7 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export function SelectedValuePrefix({ prefix, className, dataTest }) {
+export function Prefix({ prefix, className, dataTest }) {
     return (
         <div className={className} data-test={dataTest}>
             {prefix}
@@ -19,7 +19,7 @@ export function SelectedValuePrefix({ prefix, className, dataTest }) {
     )
 }
 
-SelectedValuePrefix.propTypes = {
+Prefix.propTypes = {
     dataTest: PropTypes.string.isRequired,
     className: PropTypes.string,
     prefix: PropTypes.string,
diff --git a/components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js b/components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
deleted file mode 100644
index 06c17a702..000000000
--- a/components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { colors, theme } from '@dhis2/ui-constants'
-import { Tooltip } from '@dhis2-ui/tooltip'
-import PropTypes from 'prop-types'
-import React from 'react'
-import i18n from '../../locales/index.js'
-
-export const ClearButton = ({ onClear, clearText, dataTest }) => (
-    <button
-        aria-label={i18n.t('{{clearText}}', { clearText })}
-        data-test={dataTest}
-        onClick={(e) => {
-            e.stopPropagation()
-            onClear(e)
-        }}
-    >
-        <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z"
-                fill="none"
-            />
-        </svg>
-        <style jsx>{`
-            button {
-                background: none;
-                border: none;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                height: 24px;
-                width: 24px;
-                border-radius: 3px;
-            }
-            button svg path {
-                fill: ${colors.grey500};
-            }
-            button:hover svg path {
-                fill: ${colors.grey800};
-            }
-            button:hover {
-                background: ${colors.grey200};
-            }
-            button:focus {
-                outline: 2px solid ${theme.focus};
-            }
-        `}</style>
-    </button>
-)
-
-ClearButton.propTypes = {
-    clearText: PropTypes.string.isRequired,
-    onClear: PropTypes.func.isRequired,
-    dataTest: PropTypes.string,
-}
-
-export const SelectedValueClearButton = ({ onClear, clearText, dataTest }) => {
-    const clearButton = (
-        <ClearButton
-            onClear={onClear}
-            dataTest={dataTest}
-            clearText={clearText}
-        />
-    )
-
-    if (!clearText) {
-        return clearButton
-    }
-
-    return (
-        <Tooltip openDelay={500} content={clearText}>
-            {clearButton}
-        </Tooltip>
-    )
-}
-
-SelectedValueClearButton.propTypes = {
-    clearText: PropTypes.string.isRequired,
-    onClear: PropTypes.func.isRequired,
-    dataTest: PropTypes.string,
-}
diff --git a/components/select/src/single-select-a11y/selected-value/selected-value.js b/components/select/src/single-select-a11y/selected-value/selected-value.js
index 19da6c378..19b64bd8a 100644
--- a/components/select/src/single-select-a11y/selected-value/selected-value.js
+++ b/components/select/src/single-select-a11y/selected-value/selected-value.js
@@ -1,16 +1,16 @@
 import { IconChevronDown16 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { SelectedValueClearButton } from './selected-value-clear-button.js'
-import { SelectedValueContainer } from './selected-value-container.js'
-import { SelectedValuePlaceholder } from './selected-value-placeholder.js'
-import { SelectedValuePrefix } from './selected-value-prefix.js'
+import { ClearButton } from './clear-button.js'
+import { Container } from './container.js'
+import { Placeholder } from './placeholder.js'
+import { Prefix } from './prefix.js'
 
 export function SelectedValue({
     clearText,
     comboBoxId,
-    idPrefix,
-    valueLabel,
+    name,
+    selectedLabel,
     onKeyDown,
     autoFocus,
     clearable,
@@ -21,6 +21,7 @@ export function SelectedValue({
     error,
     expanded,
     hasSelection,
+    inputMaxHeight,
     labelledBy,
     placeholder,
     prefix,
@@ -32,22 +33,20 @@ export function SelectedValue({
     onClick,
     onFocus,
 }) {
-    // @TODO
-    const inputMaxHeight = '300px'
     const dataTestPrefix = `${dataTest}-selectedvalue`
 
     return (
-        <SelectedValueContainer
+        <Container
             dataTest={`${dataTestPrefix}-container`}
             ref={comboBoxRef}
             comboBoxId={comboBoxId}
-            idPrefix={idPrefix}
             autoFocus={autoFocus}
             dense={dense}
             disabled={disabled}
             error={error}
             expanded={expanded}
             labelledBy={labelledBy}
+            name={name}
             placeholder={placeholder}
             tabIndex={tabIndex}
             valid={valid}
@@ -58,26 +57,23 @@ export function SelectedValue({
             onKeyDown={onKeyDown}
         >
             {prefix && (
-                <SelectedValuePrefix
-                    dataTest={`${dataTestPrefix}-prefix`}
-                    prefix={prefix}
-                />
+                <Prefix dataTest={`${dataTestPrefix}-prefix`} prefix={prefix} />
             )}
 
             <div className="selected-option-label">
-                {!valueLabel && !prefix && (
-                    <SelectedValuePlaceholder
+                {!selectedLabel && !prefix && placeholder && (
+                    <Placeholder
                         dataTest={`${dataTestPrefix}-placeholder`}
                         placeholder={placeholder}
                     />
                 )}
 
-                {valueLabel}
+                {selectedLabel}
             </div>
 
             {hasSelection && clearable && !disabled && (
                 <div className="clear-button-container">
-                    <SelectedValueClearButton
+                    <ClearButton
                         clearText={clearText}
                         dataTest={`${dataTestPrefix}-clear`}
                         onClear={onClear}
@@ -114,15 +110,15 @@ export function SelectedValue({
                     border: 0;
                 }
             `}</style>
-        </SelectedValueContainer>
+        </Container>
     )
 }
 
 SelectedValue.propTypes = {
     clearText: PropTypes.string.isRequired,
     comboBoxId: PropTypes.string.isRequired,
-    idPrefix: PropTypes.string.isRequired,
-    valueLabel: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    selectedLabel: PropTypes.string.isRequired,
     onKeyDown: PropTypes.func.isRequired,
     autoFocus: PropTypes.bool,
     clearable: PropTypes.bool,
@@ -135,6 +131,7 @@ SelectedValue.propTypes = {
     error: PropTypes.bool,
     expanded: PropTypes.bool,
     hasSelection: PropTypes.bool,
+    inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     labelledBy: PropTypes.string,
     placeholder: PropTypes.string,
     prefix: PropTypes.string,
diff --git a/components/select/src/single-select-a11y/single-select-a11y.e2e.stories.js b/components/select/src/single-select-a11y/single-select-a11y.e2e.stories.js
index 318e68f27..b156bd10f 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.e2e.stories.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.e2e.stories.js
@@ -101,8 +101,11 @@ const fiveOptions = options.slice(0, 5)
 
 export const DefaultPosition = () => (
     <SingleSelectA11y
-        idPrefix="a11y"
-        value="anc_1st_visit"
+        name="a11y"
+        selected={{
+            label: 'ANC 1st visit',
+            value: 'anc_1st_visit',
+        }}
         onChange={() => null}
         options={fiveOptions}
     />
@@ -111,8 +114,11 @@ export const DefaultPosition = () => (
 export const FlippedPosition = () => (
     <>
         <SingleSelectA11y
-            idPrefix="a11y"
-            value="anc_1st_visit"
+            name="a11y"
+            selected={{
+                label: 'ANC 1st visit',
+                value: 'anc_1st_visit',
+            }}
             onChange={() => null}
             options={options}
         />
@@ -135,8 +141,11 @@ export const FlippedPosition = () => (
 export const ShiftedIntoView = () => (
     <>
         <SingleSelectA11y
-            idPrefix="a11y"
-            value="anc_1st_visit"
+            name="a11y"
+            selected={{
+                label: 'ANC 1st visit',
+                value: 'anc_1st_visit',
+            }}
             onChange={() => null}
             options={options}
         />
@@ -157,7 +166,10 @@ export const ShiftedIntoView = () => (
 )
 
 export const HundretOptions = () => {
-    const [value, setValue] = useState('0')
+    const [selected, setSelected] = useState({
+        value: '0',
+        label: `Select option 0`,
+    })
     const [hundretOptions] = useState(
         Array.apply(null, Array(100)).map((x, i) => ({
             value: `${i}`,
@@ -167,16 +179,19 @@ export const HundretOptions = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            onChange={setValue}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={hundretOptions}
         />
     )
 }
 
 export const HundretOptionsWithDisabled = () => {
-    const [value, setValue] = useState('10')
+    const [selected, setSelected] = useState({
+        value: '10',
+        label: `Select option 10`,
+    })
     const [hundretOptions] = useState(
         Array.apply(null, Array(100)).map((x, i) => ({
             value: `${i}`,
@@ -192,43 +207,10 @@ export const HundretOptionsWithDisabled = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            onChange={setValue}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={hundretOptions}
         />
     )
 }
-
-export const NativeSelect = () => {
-    const [value, setValue] = useState('0')
-    const [hundretOptions] = useState(
-        Array.apply(null, Array(100)).map((x, i) => ({
-            value: `${i}`,
-            label: `Select option ${i}`,
-            disabled: i > 19 && i < 30,
-        }))
-    )
-
-    return (
-        <>
-            <select value={value} onChange={(e) => setValue(e.target.value)}>
-                {hundretOptions.map((option) => (
-                    <option
-                        key={option.value}
-                        value={option.value}
-                        disabled={option.disabled}
-                    >
-                        {option.label}
-                    </option>
-                ))}
-            </select>
-
-            <style jsx>{`
-                option:disabled {
-                    color: grey;
-                }
-            `}</style>
-        </>
-    )
-}
diff --git a/components/select/src/single-select-a11y/single-select-a11y.js b/components/select/src/single-select-a11y/single-select-a11y.js
index 1fe43f274..ecef3df29 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.js
@@ -8,7 +8,7 @@ import { Menu } from './menu/index.js'
 import { SelectedValue } from './selected-value/index.js'
 import { optionProp } from './shared-prop-types.js'
 import {
-    useHandleKeyPress,
+    useHandleKeyPressOnCombobox,
     useHandleKeyPressOnFilterInput,
 } from './use-handle-key-press/index.js'
 
@@ -53,14 +53,14 @@ function useFocussedOptionIndex({ filterable, filterValue, options }) {
 }
 
 export function SingleSelectA11y({
+    name,
     options,
-    idPrefix,
     onChange,
     autoFocus = false,
     className = '',
     clearText: _clearText = '',
     clearable = false,
-    customOption = undefined,
+    optionComponent = undefined,
     dataTest = 'dhis2-singleselecta11y',
     dense = false,
     disabled = false,
@@ -71,6 +71,7 @@ export function SingleSelectA11y({
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
     filterable = false,
+    inputMaxHeight = '',
     labelledBy = '',
     loading = false,
     menuLoadingText: _menuLoadingText = '',
@@ -79,12 +80,12 @@ export function SingleSelectA11y({
     optionUpdateStrategy = 'polite',
     placeholder = '',
     prefix = '',
+    selected = { label: '', value: '' },
     tabIndex = '0',
     valid = false,
-    value = '',
     warning = false,
-    valueLabel: _valueLabel = '',
     onBlur = () => undefined,
+    onClear = () => undefined,
     onEndReached = () => undefined,
     onFilterChange = () => undefined,
     onFocus = () => undefined,
@@ -98,23 +99,7 @@ export function SingleSelectA11y({
     const menuLoadingText = _menuLoadingText || i18n.t('Loading options')
     const noMatchText = _noMatchText || i18n.t('No options found')
 
-    const comboBoxId = `${idPrefix}-combo`
-    const valueLabel =
-        _valueLabel ||
-        options.find((option) => option.value === value)?.label ||
-        ''
-
-    if (
-        value &&
-        !valueLabel &&
-        options.length &&
-        !options.find((option) => option.value === '') &&
-        !placeholder
-    ) {
-        throw new Error(
-            'You must either provide a "valueLabel" or include an empty option in the options array'
-        )
-    }
+    const comboBoxId = `${name}-combo`
 
     const comboBoxRef = useRef()
     const listBoxRef = useRef()
@@ -128,16 +113,20 @@ export function SingleSelectA11y({
     const [selectRef, setSelectRef] = useState()
     const [expanded, setExpanded] = useState(false)
     const closeMenu = useCallback(() => setExpanded(false), [])
+
+    const selectedValue = selected?.value || ''
+    const selectedLabel = selected?.label || ''
     const openMenu = useCallback(() => {
         const selectedOptionIndex = options.findIndex(
-            (option) => option.value === value
+            (option) => option.value === selectedValue
         )
         if (selectedOptionIndex !== focussedOptionIndex) {
             setFocussedOptionIndex(selectedOptionIndex)
         }
 
         setExpanded(true)
-    }, [options, value, focussedOptionIndex, setFocussedOptionIndex])
+    }, [options, selectedValue, focussedOptionIndex, setFocussedOptionIndex])
+
     const toggleMenu = useCallback(() => {
         if (expanded) {
             closeMenu()
@@ -150,7 +139,7 @@ export function SingleSelectA11y({
         const option = options[focussedOptionIndex]
 
         if (option) {
-            onChange(option.value)
+            onChange(option)
         }
     }, [focussedOptionIndex, options, onChange])
 
@@ -159,8 +148,8 @@ export function SingleSelectA11y({
         [comboBoxRef]
     )
 
-    const handleKeyDown = useHandleKeyPress({
-        value,
+    const handleKeyDown = useHandleKeyPressOnCombobox({
+        value: selectedValue,
         disabled,
         onChange,
         expanded,
@@ -175,7 +164,7 @@ export function SingleSelectA11y({
     })
 
     const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
-        value,
+        value: selectedValue,
         options,
         loading,
         closeMenu,
@@ -217,19 +206,18 @@ export function SingleSelectA11y({
                 disabled={disabled}
                 error={error}
                 expanded={expanded}
-                hasSelection={!!value}
-                idPrefix={idPrefix}
+                hasSelection={!!selectedValue}
+                inputMaxHeight={inputMaxHeight}
                 labelledBy={labelledBy}
-                options={options}
+                name={name}
                 placeholder={placeholder}
                 prefix={prefix}
                 tabIndex={tabIndex.toString()}
-                value={value}
                 warning={warning}
                 valid={valid}
-                valueLabel={valueLabel}
+                selectedLabel={selectedLabel}
                 onBlur={onBlur}
-                onClear={() => onChange('')}
+                onClear={onClear}
                 onClick={toggleMenu}
                 onFocus={onFocus}
                 onKeyDown={handleKeyDown}
@@ -237,7 +225,7 @@ export function SingleSelectA11y({
 
             <Menu
                 comboBoxId={comboBoxId}
-                customOption={customOption}
+                optionComponent={optionComponent}
                 disabled={disabled}
                 empty={empty}
                 filterHelpText={filterHelpText}
@@ -248,7 +236,7 @@ export function SingleSelectA11y({
                 focussedOptionIndex={focussedOptionIndex}
                 onFilterInputKeyDown={handleKeyDownOnFilterInput}
                 hidden={!expanded}
-                idPrefix={idPrefix}
+                name={name}
                 labelledBy={labelledBy}
                 listBoxRef={listBoxRef}
                 loading={loading}
@@ -258,7 +246,7 @@ export function SingleSelectA11y({
                 optionUpdateStrategy={optionUpdateStrategy}
                 options={options}
                 selectRef={selectRef}
-                selected={value}
+                selectedValue={selectedValue}
                 tabIndex={tabIndex.toString()}
                 onBlur={onBlur}
                 onChange={(nextValue) => {
@@ -275,7 +263,7 @@ export function SingleSelectA11y({
 
 SingleSelectA11y.propTypes = {
     /** necessary for IDs that are required for accessibility **/
-    idPrefix: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
 
     /** An array of options **/
     options: PropTypes.arrayOf(optionProp).isRequired,
@@ -295,10 +283,6 @@ SingleSelectA11y.propTypes = {
     /** Whether a clear button should be displayed or not **/
     clearable: PropTypes.bool,
 
-    /** Allows to override what's rendered inside the `button[role="option"]`.
-     * Can be overriden on an individual option basis **/
-    customOption: PropTypes.elementType,
-
     /** A value for a `data-test` attribute on the root element **/
     dataTest: PropTypes.string,
 
@@ -329,6 +313,9 @@ SingleSelectA11y.propTypes = {
     /** Whether the select should display a filter input **/
     filterable: PropTypes.bool,
 
+    /** Max height of the container displaying the selected value **/
+    inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
     /** Should contain the id of the element that labels the select, if applicable **/
     labelledBy: PropTypes.string,
 
@@ -344,43 +331,39 @@ SingleSelectA11y.propTypes = {
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
     /** For a11y: How aggressively the user should be updated about changes in options **/
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
 
-    /** String to show when there's no value and no valueLabel **/
+    /** String to show when there's no selected option **/
     placeholder: PropTypes.string,
 
     /** String that will be displayed before the label of the selected option **/
     prefix: PropTypes.string,
 
+    selected: PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+    }),
+
     /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
     tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
     valid: sharedPropTypes.statusPropType,
 
-    /** As of now, this component does not support being uncontrolled **/
-    value: PropTypes.string,
-
-    /**
-     * When the option is not in the options list (e.g. not loaded or list is
-     * filtered), but a selected value needs to be displayed, then this prop can
-     * be used to supply the text to be shown.
-     **/
-    valueLabel: requiredIf((props) => {
-        if (props.options.find(({ value }) => props.value === value)) {
-            return false
-        }
-
-        return props.value
-    }, PropTypes.string),
-
     /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
     warning: sharedPropTypes.statusPropType,
 
     /** Will be called when the combobox is loses focus **/
     onBlur: PropTypes.func,
 
+    /** Will be called when the combobox is loses focus **/
+    onClear: PropTypes.func,
+
     /** Will be called when the last option is scrolled into the visible area **/
     onEndReached: PropTypes.func,
 
diff --git a/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js b/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
index 20e3134f2..994cd4593 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
@@ -19,6 +19,7 @@ export { EmptyWithEmptyText } from './__stories__/EmptyWithEmptyText.js'
 export { EmptyWithEmptyNode } from './__stories__/EmptyWithEmptyNode.js'
 export { WithOptionsAndLoading } from './__stories__/WithOptionsAndLoading.js'
 export { WithOptionsAndLoadingText } from './__stories__/WithOptionsAndLoadingText.js'
+export { WithoutOptionsAndLoading } from './__stories__/WithoutOptionsAndLoading.js'
 export { WithManyOptions } from './__stories__/WithManyOptions.js'
 export { WithCustomLowMaxHeight } from './__stories__/WithCustomLowMaxHeight.js'
 export { WithOptionsAndDisabled } from './__stories__/WithOptionsAndDisabled.js'
diff --git a/components/select/src/single-select-a11y/single-select-a11y.test.js b/components/select/src/single-select-a11y/single-select-a11y.test.js
index 253224fae..8cf3ff6af 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.test.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.test.js
@@ -32,8 +32,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 onBlur={onBlur}
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -56,8 +56,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 onFocus={onFocus}
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -83,8 +83,8 @@ describe('<SingleSelectA11y />', () => {
             <SingleSelectA11y
                 autoFocus
                 onFocus={onFocus}
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -97,8 +97,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 loading
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -116,8 +116,8 @@ describe('<SingleSelectA11y />', () => {
             <SingleSelectA11y
                 loading
                 menuLoadingText="Loading text"
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -136,8 +136,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 menuMaxHeight="100px"
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -153,8 +153,8 @@ describe('<SingleSelectA11y />', () => {
     it('should accept a placeholder', () => {
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 placeholder="Placeholder text"
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
@@ -173,8 +173,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 prefix="Prefix text"
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={() => null}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -193,8 +193,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -212,7 +212,7 @@ describe('<SingleSelectA11y />', () => {
         fireEvent.click(option)
 
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('foo')
+        expect(onChange).toHaveBeenCalledWith({ value: 'foo', label: 'Foo' })
     })
 
     it('should allow custom options to be selected', () => {
@@ -225,9 +225,9 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
-                customOption={CustomOption}
+                name="a11y"
+                selected={null}
+                optionComponent={CustomOption}
                 valueLabel=""
                 onChange={onChange}
                 options={[
@@ -239,14 +239,14 @@ describe('<SingleSelectA11y />', () => {
 
         fireEvent.click(screen.getByRole('combobox'))
 
-        const customOption = screen.getByTestId('custom-option-foo')
+        const optionComponent = screen.getByTestId('custom-option-foo')
         const option = screen.getByTestId('custom-option-foo').parentNode
         expect(option.attributes.getNamedItem('role').value).toBe('option')
 
-        fireEvent.click(customOption)
+        fireEvent.click(optionComponent)
 
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('foo')
+        expect(onChange).toHaveBeenCalledWith({ value: 'foo', label: 'Foo' })
     })
 
     it('should allow individual custom options to be selected', () => {
@@ -259,8 +259,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 valueLabel=""
                 onChange={onChange}
                 options={[
@@ -272,27 +272,28 @@ describe('<SingleSelectA11y />', () => {
 
         fireEvent.click(screen.getByRole('combobox'))
 
-        const customOption = screen.getByTestId('custom-option-foo')
+        const optionComponent = screen.getByTestId('custom-option-foo')
         const option = screen.getByTestId('custom-option-foo').parentNode
         expect(option.attributes.getNamedItem('role').value).toBe('option')
 
-        fireEvent.click(customOption)
+        fireEvent.click(optionComponent)
 
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('foo')
+        expect(onChange).toHaveBeenCalledWith({ value: 'foo', label: 'Foo' })
     })
 
     it('should be clearable when there is a selected value', () => {
-        const onChange = jest.fn()
+        const onClear = jest.fn()
 
         render(
             <SingleSelectA11y
                 clearable
                 clearText="Clear a11y select"
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 valueLabel="Foo"
-                onChange={onChange}
+                onChange={() => null}
+                onClear={onClear}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
         )
@@ -302,8 +303,7 @@ describe('<SingleSelectA11y />', () => {
 
         fireEvent.click(clearButton)
 
-        expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('')
+        expect(onClear).toHaveBeenCalledTimes(1)
     })
 
     it('should not be clearable when there is no selected value', () => {
@@ -311,8 +311,8 @@ describe('<SingleSelectA11y />', () => {
             <SingleSelectA11y
                 clearable
                 clearText="Clear a11y select"
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={jest.fn()}
                 options={[
                     { value: '', label: 'None' },
@@ -329,8 +329,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 disabled
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={jest.fn()}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -350,8 +350,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 empty="Empty"
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={jest.fn()}
                 options={[]}
             />
@@ -374,8 +374,8 @@ describe('<SingleSelectA11y />', () => {
                 filterable
                 onFilterChange={onFilterChange}
                 noMatchText="No options found"
-                idPrefix="a11y"
-                value="foo"
+                name="a11y"
+                selected={{ value: 'foo', label: 'Foo' }}
                 onChange={jest.fn()}
                 options={[{ value: 'foo', label: 'Foo' }]}
             />
@@ -404,8 +404,8 @@ describe('<SingleSelectA11y />', () => {
                 filterLabel="Custom filter label"
                 onFilterChange={onFilterChange}
                 noMatchText="No options found"
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 valueLabel=""
                 onChange={jest.fn()}
                 options={[
@@ -425,8 +425,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: 'foo', label: 'Foo' },
@@ -462,8 +462,8 @@ describe('<SingleSelectA11y />', () => {
 
             render(
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value=""
+                    name="a11y"
+                    selected={null}
                     onChange={onChange}
                     options={[
                         { value: '', label: 'None' },
@@ -491,8 +491,8 @@ describe('<SingleSelectA11y />', () => {
             render(
                 <SingleSelectA11y
                     disabled
-                    idPrefix="a11y"
-                    value=""
+                    name="a11y"
+                    selected={null}
                     onChange={onChange}
                     options={[
                         { value: '', label: 'None' },
@@ -519,8 +519,8 @@ describe('<SingleSelectA11y />', () => {
 
             render(
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value=""
+                    name="a11y"
+                    selected={null}
                     onChange={onChange}
                     options={[
                         { value: '', label: 'None' },
@@ -549,8 +549,8 @@ describe('<SingleSelectA11y />', () => {
 
             render(
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value=""
+                    name="a11y"
+                    selected={null}
                     onChange={onChange}
                     options={[
                         { value: '', label: 'None' },
@@ -572,7 +572,10 @@ describe('<SingleSelectA11y />', () => {
 
             expect(screen.queryByRole('listbox')).toBeNull()
             expect(onChange).toHaveBeenCalledTimes(1)
-            expect(onChange).toHaveBeenCalledWith('foo')
+            expect(onChange).toHaveBeenCalledWith({
+                value: 'foo',
+                label: 'Foo',
+            })
         })
     })
 
@@ -581,8 +584,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -598,7 +601,7 @@ describe('<SingleSelectA11y />', () => {
         fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' })
         expect(screen.queryByRole('listbox')).toBeNull()
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('foo')
+        expect(onChange).toHaveBeenCalledWith({ value: 'foo', label: 'Foo' })
     })
 
     it('should not select the next option when closed, disabled and user presses ArrowDown', () => {
@@ -607,8 +610,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 disabled
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -631,8 +634,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -648,7 +651,7 @@ describe('<SingleSelectA11y />', () => {
         fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' })
         expect(screen.queryByRole('listbox')).toBeNull()
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('bar')
+        expect(onChange).toHaveBeenCalledWith({ value: 'bar', label: 'Bar' })
     })
 
     it('should select the previous option when closed and user presses ArrowUp', () => {
@@ -656,8 +659,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -673,7 +676,7 @@ describe('<SingleSelectA11y />', () => {
         fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowUp' })
         expect(screen.queryByRole('listbox')).toBeNull()
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('foo')
+        expect(onChange).toHaveBeenCalledWith({ value: 'foo', label: 'Foo' })
     })
 
     it('should not select the previous option when closed, disabled and user presses ArrowUp', () => {
@@ -682,8 +685,8 @@ describe('<SingleSelectA11y />', () => {
         render(
             <SingleSelectA11y
                 disabled
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -706,8 +709,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -723,7 +726,7 @@ describe('<SingleSelectA11y />', () => {
         fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowUp' })
         expect(screen.queryByRole('listbox')).toBeNull()
         expect(onChange).toHaveBeenCalledTimes(1)
-        expect(onChange).toHaveBeenCalledWith('')
+        expect(onChange).toHaveBeenCalledWith({ value: '', label: 'None' })
     })
 
     it('should highlight the next option', () => {
@@ -731,8 +734,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -771,8 +774,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -811,8 +814,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -851,8 +854,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -891,8 +894,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -931,8 +934,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value="bar"
+                name="a11y"
+                selected={{ value: 'bar', label: 'Bar' }}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None', disabled: true },
@@ -971,8 +974,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
@@ -1011,8 +1014,8 @@ describe('<SingleSelectA11y />', () => {
 
         render(
             <SingleSelectA11y
-                idPrefix="a11y"
-                value=""
+                name="a11y"
+                selected={null}
                 onChange={onChange}
                 options={[
                     { value: '', label: 'None' },
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/index.js b/components/select/src/single-select-a11y/use-handle-key-press/index.js
index 6254c9150..279200546 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press/index.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/index.js
@@ -1,2 +1,2 @@
-export { useHandleKeyPress } from './use-handle-key-press.js'
+export { useHandleKeyPressOnCombobox } from './use-handle-key-press-on-combobox.js'
 export { useHandleKeyPressOnFilterInput } from './use-handle-key-press-on-filter-input.js'
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press-on-combobox.js
similarity index 96%
rename from components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js
rename to components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press-on-combobox.js
index e9e2819da..bded0f781 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press-on-combobox.js
@@ -25,11 +25,15 @@ function useSelectOption(findIndexCallback, { options, onChange, value }) {
             return
         }
 
-        onChange(options[nextSelectedOptionIndex].value)
+        const nextOption = options[nextSelectedOptionIndex]
+        onChange({
+            label: nextOption.label,
+            value: nextOption.value,
+        })
     }, [findIndexCallback, options, onChange, value])
 }
 
-export function useHandleKeyPress({
+export function useHandleKeyPressOnCombobox({
     value,
     disabled,
     expanded,
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
index 564655a55..e2bf08354 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
@@ -50,7 +50,10 @@ export function useHandleTyping({
                     setFocussedOptionIndex(optionIndex)
                 } else {
                     const nextSelectedOption = options[optionIndex]
-                    onChange(nextSelectedOption.value)
+                    onChange({
+                        label: nextSelectedOption.label,
+                        value: nextSelectedOption.value,
+                    })
                 }
             }
         }
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-first-option-on-previous-page.js b/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-first-option-on-previous-page.js
index 494a6ba51..e30f48886 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-first-option-on-previous-page.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-first-option-on-previous-page.js
@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { isOptionHidden } from '../is-option-hidden.js'
 
 export function useHighlightFirstOptionOnPreviousPage({
     options,
@@ -10,9 +9,9 @@ export function useHighlightFirstOptionOnPreviousPage({
     return useCallback(() => {
         const listBoxParent = listBoxRef.current.parentNode
         const optionElements = Array.from(listBoxRef.current.childNodes)
-        const visibleOptionsAmount = optionElements.filter(
-            (optionElement) => !isOptionHidden(optionElement, listBoxParent)
-        ).length
+        const visibleOptionsAmount = Math.floor(
+            listBoxParent.offsetHeight / optionElements[0].offsetHeight
+        )
 
         const nextTopOptionIndex = Math.max(
             0,
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-last-option-on-next-page.js b/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-last-option-on-next-page.js
index 8bc418aff..4b707c784 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-last-option-on-next-page.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-highlight-last-option-on-next-page.js
@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { isOptionHidden } from '../is-option-hidden.js'
 
 export function useHighlightLastOptionOnNextPage({
     options,
@@ -10,9 +9,9 @@ export function useHighlightLastOptionOnNextPage({
     return useCallback(() => {
         const listBoxParent = listBoxRef.current.parentNode
         const optionElements = Array.from(listBoxRef.current.childNodes)
-        const visibleOptionsAmount = options.filter(
-            (_, index) => !isOptionHidden(optionElements[index], listBoxParent)
-        ).length
+        const visibleOptionsAmount = Math.floor(
+            listBoxParent.offsetHeight / optionElements[0].offsetHeight
+        )
 
         const nextHighlightedOptionIndex = Math.min(
             options.length - 1,
diff --git a/docs/docs/recipes/single-select-a11y-server-side-filtering.js b/docs/docs/recipes/single-select-a11y-server-side-filtering.js
index ad6069dee..7610b8416 100644
--- a/docs/docs/recipes/single-select-a11y-server-side-filtering.js
+++ b/docs/docs/recipes/single-select-a11y-server-side-filtering.js
@@ -83,7 +83,7 @@ function useLoadFilteredDataElementsQuery(customOptions) {
                 }, 200)
             })
         },
-        [abortController, engine]
+        [abortController, engine, customOptions]
     )
 
     return { loading, error, refetch }
@@ -94,11 +94,8 @@ function ServerSideFilteringSelect() {
         useState(false)
     const [selectedOption, setSelectedOption] = useState({
         value: 'fbfJHSPpUQD',
-        label: '',
+        label: 'Loading...',
     })
-    const valueLabel = initializedSelectedLabel
-        ? selectedOption.label
-        : 'Loading...'
 
     const [loadedOptions, setLoadedOptions] = useState([])
     const [defaultPager, setDefaultPager] = useState({
@@ -169,17 +166,6 @@ function ServerSideFilteringSelect() {
         loadDataElementsQuery.loading || loadFilteredDataElementsQuery.loading
     const options = searchTerm ? filteredOptions : loadedOptions
 
-    const selectOption = useCallback(
-        (nextValue) => {
-            const nextSelectedOption = options.find(
-                ({ value }) => value === nextValue
-            )
-
-            setSelectedOption(nextSelectedOption)
-        },
-        [options]
-    )
-
     const setSearchTerm = useCallback(
         (nextSearchTerm) => {
             _setSearchTerm(nextSearchTerm)
@@ -233,19 +219,18 @@ function ServerSideFilteringSelect() {
 
     return (
         <SingleSelectA11y
-            idPrefix="demo"
+            name="demo"
             disabled={!initializedSelectedLabel}
             loading={loadingOptions}
             options={options}
-            value={selectedOption?.value}
-            valueLabel={valueLabel}
+            selected={selectedOption}
             filterable
             filterValue={searchTerm}
             filterPlaceholder="search for 'ART' or 'ANC'"
             onFilterChange={setSearchTerm}
             noMatchText="No options were found"
             empty="Please use the search input to find data elements"
-            onChange={selectOption}
+            onChange={setSelectedOption}
             onEndReached={loadNextPage}
         />
     )
diff --git a/docs/docs/recipes/single-select-a11y-server-side-filtering.md b/docs/docs/recipes/single-select-a11y-server-side-filtering.md
index f7d4511e5..75b1e6dad 100644
--- a/docs/docs/recipes/single-select-a11y-server-side-filtering.md
+++ b/docs/docs/recipes/single-select-a11y-server-side-filtering.md
@@ -46,12 +46,13 @@ As this is a demo, we simply define the selected value statically:
 ```js
 const [selectedOption, setSelectedOption] = useState({
     value: 'fbfJHSPpUQD', // This value should come from the props
-    label: '',
+    label: 'Loading...',
 })
 ```
 
 The reason we're storing the object rather than just the selected value is:
-When the user searches for options while having already selected an option,
+The SingleSelectA11y component expects the whole option as selected value, so
+that when the user searches for options while having already selected an option,
 we could lose the label we want to display. This can happen when the user
 searches for an option, then selects an option from the search result,
 and then searches the options again.
@@ -65,15 +66,6 @@ before the initially selected option's label hasn't been fetched yet).
 const [initializedSelectedLabel, setInitializedSelectedLabel] = useState(false)
 ```
 
-This allows us to define the label of the selected option even when we don't
-have a value yet:
-
-```js
-const valueLabel = initializedSelectedLabel
-    ? selectedOption?.label
-    : 'Loading...'
-```
-
 With this, we can create component that returns a select component:
 
 ```jsx
@@ -82,19 +74,15 @@ function OurSelectComponent() {
         useState(false)
     const [selectedOption, setSelectedOption] = useState({
         value: 'fbfJHSPpUQD', // This value should come from the props
-        label: '',
+        label: 'Loading...',
     })
-    const valueLabel = initializedSelectedLabel
-        ? selectedOption.label
-        : 'Loading'
 
     return (
         <SingleSelectA11y
+            name="demo"
             disabled={!initializedSelectedLabel}
-            idPrefix="demo"
-            value={selectedOption.value}
-            valueLabel={valueLabel}
-            onChange={() => null} // @TODO
+            selected={selectedOption}
+            onChange={setSelectedOption}
             options={[]} // @TODO
         />
     )
@@ -182,11 +170,10 @@ const [loadedOptions, setLoadedOptions] = useState([])
 
 return (
     <SingleSelectA11y
-        idPrefix="demo"
+        name="demo"
         disabled={!initializedSelectedLabel}
-        value={selectedOption.value}
-        valueLabel={valueLabel}
-        onChange={() => null} // @TODO
+        selected={selectedOption}
+        onChange={setSelectedOption}
         options={loadedOptions}               // <--
     />
 )}
@@ -261,11 +248,10 @@ With the logic that loads the options, we can set the select's loading state:
 
 ```jsx
 <SingleSelectA11y
-    idPrefix="demo"
+    name="demo"
     disabled={!initializedSelectedLabel}
     loading={loadDataElementQuery.loading} // <--
-    value={selectedOption.value}
-    valueLabel={valueLabel}
+    selected={selectedOption}
     onChange={() => null} // @TODO
     options={loadedOptions}
 />
@@ -392,7 +378,7 @@ function useLoadFilteredDataElementsQuery(customOptions) {
                 }, 200)
             })
         },
-        [abortController, engine]
+        [abortController, engine, customOptions]
     )
 
     return { loading, error, refetch }
@@ -453,21 +439,6 @@ The options we want to render now depend on whether we have a filter value or no
 const options = searchTerm ? filteredOptions : loadedOptions
 ```
 
-With this value, we can finally create the callback passed to `onChange`:
-
-```js
-const selectOption = useCallback(
-    (nextValue) => {
-        const nextSelectedOption = options.find(
-            ({ value }) => value === nextValue
-        )
-
-        setSelectedOption(nextSelectedOption)
-    },
-    [options]
-)
-```
-
 Because there are two different loading states, we can combine them into a single value, which we'll pass to the SingleSelectA11y component, as well as the props required for the search to work:
 
 ```
@@ -514,18 +485,17 @@ const loadNextPage = useCallback(() => {
 
 return (
     <SingleSelectA11y
-        idPrefix="demo"
+        name="demo"
         disabled={!initializedSelectedLabel}
         loading={loadingOptions}
         options={loadedOptions}
-        value={selectedOption.value}
-        valueLabel={valueLabel}
+        selected={selectedOption}
         filterable
         filterValue={searchTerm}
         filterPlaceholder="search for 'ART' or 'ANC'"
         onFilterChange={setSearchTerm}
         noMatchText="No options were found"
-        onChange={selectOption}
+        onChange={setSelectedOption}
         onEndReached={loadNextPage} // <--
     />
 )
@@ -620,7 +590,7 @@ function useLoadFilteredDataElementsQuery(customOptions) {
                 }, 200)
             })
         },
-        [abortController, engine]
+        [abortController, engine, customOptions]
     )
 
     return { loading, error, refetch }
@@ -771,7 +741,7 @@ function OurSelectComponent() {
 
     return (
         <SingleSelectA11y
-            idPrefix="demo"
+            name="demo"
             disabled={!initializedSelectedLabel}
             loading={loadingOptions}
             options={options}
diff --git a/docs/docs/recipes/single-select-a11y-simple-filtering.js b/docs/docs/recipes/single-select-a11y-simple-filtering.js
index a09c56817..d039b7ca9 100644
--- a/docs/docs/recipes/single-select-a11y-simple-filtering.js
+++ b/docs/docs/recipes/single-select-a11y-simple-filtering.js
@@ -2,6 +2,7 @@ import { SingleSelectA11y } from '@dhis2/ui'
 import React, { useMemo, useState } from 'react'
 
 const options = [
+    { label: 'No selection', value: '' },
     { label: 'ANC 1st visit', value: 'anc_1st_visit' },
     { label: 'ANC 2nd visit', value: 'anc_2nd_visit' },
     { label: 'ARI treated follow-up', value: 'ari_treated_follow-up' },
@@ -23,7 +24,10 @@ function filterOptions(options, searchTerm) {
 
 export const SimpleFilterSelect = () => {
     // Handle actual value changes
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState({
+        value: '',
+        label: 'No selection',
+    })
 
     // Handle filtering
     const [searchTerm, setSearchTerm] = useState('')
@@ -32,22 +36,14 @@ export const SimpleFilterSelect = () => {
         [searchTerm]
     )
 
-    // We have to default to an empty string in case there is no selection
-    // and the options array does not include an "empty"-option,
-    // e.g. `{ value: '', label: 'None' }`
-    const valueLabel =
-        options.find((option) => option.value === value)?.label ||
-        'No selection'
-
     return (
         <SingleSelectA11y
             filterable
             filterValue={searchTerm}
             idPrefix="a11y"
             options={filteredOptions}
-            value={value}
-            valueLabel={valueLabel}
-            onChange={setValue}
+            selected={selected}
+            onChange={setSelected}
             onFilterChange={setSearchTerm}
         />
     )
diff --git a/docs/docs/recipes/single-select-a11y-simple-filtering.md b/docs/docs/recipes/single-select-a11y-simple-filtering.md
index ee68de18c..c2602a413 100644
--- a/docs/docs/recipes/single-select-a11y-simple-filtering.md
+++ b/docs/docs/recipes/single-select-a11y-simple-filtering.md
@@ -27,6 +27,7 @@ Consider the following options:
 
 ```js
 const options = [
+    { label: 'No selection', value: '' },
     { label: 'ANC 1st visit', value: 'anc_1st_visit' },
     { label: 'ANC 2nd visit', value: 'anc_2nd_visit' },
     { label: 'ARI treated follow-up', value: 'ari_treated_follow-up' },
@@ -69,19 +70,6 @@ const filteredOptions = useMemo(
 )
 ```
 
-Normally the select component will extract the label of a selected option
-from the options array so it can display the currently selected option.
-When filtering, that option might not be present if the filtered array,
-so we'll have to make sure we can tell the select component what the label is:
-
-```js
-// We have to default to an empty string in case there is no selection
-// and the options array does not include an "empty"-option,
-// e.g. `{ value: '', label: 'None' }`
-const valueLabel =
-    options.find((option) => option.value === value)?.label || 'No selection'
-```
-
 Now all necessary parts are available to create a simple searchable select:
 
 ```jsx
@@ -110,7 +98,10 @@ function filterOptions(options, searchTerm) {
 
 export const SimpleFilterSelect = () => {
     // Handle actual value changes
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState({
+        value: '',
+        label: 'No selection',
+    })
 
     // Handle filtering
     const [searchTerm, setSearchTerm] = useState('')
@@ -119,22 +110,14 @@ export const SimpleFilterSelect = () => {
         [options, searchTerm]
     )
 
-    // We have to default to an empty string in case there is no selection
-    // and the options array does not include an "empty"-option,
-    // e.g. `{ value: '', label: 'None' }`
-    const valueLabel =
-        options.find((option) => option.value === value)?.label ||
-        'No selection'
-
     return (
         <SingleSelectA11y
             filterable
             filterValue={searchTerm}
-            idPrefix="a11y"
+            name="a11y"
             options={filteredOptions}
-            value={value}
-            valueLabel={valueLabel}
-            onChange={setValue}
+            selected={selected}
+            onChange={setSelected}
             onFilterChange={setSearchTerm}
         />
     )