From 0dc37607135a460146677196057949871bae1711 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}        |  13 +-
 .../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  | 102 +++++-----
 .../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 +-
 61 files changed, 585 insertions(+), 707 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} (84%)
 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..e1483bf3c 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-28T02:02:47.011Z\n"
+"PO-Revision-Date: 2024-11-28T02:02:47.011Z\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 84%
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..1219f446f 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`}
@@ -31,6 +31,9 @@ export function MenuFilter({
                 onKeyDown={(_, e) => onKeyDown(e)}
             />
 
+            {
+                /* @TODO: Put into the PR's description & create Jira ticket (maybe) */ ''
+            }
             <style jsx>{`
                 div {
                     height: 100%;
@@ -46,8 +49,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..55d9172f5 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,40 @@ 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 **/
+    // @TODO: Call `optionComponent`?
+    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,