From 5b6d970d8825867cc5e74b618aae3bf1865b567c Mon Sep 17 00:00:00 2001
From: BABAK0T0 <nrandrianarivo@scaleway.com>
Date: Mon, 23 Jan 2023 15:58:12 +0100
Subject: [PATCH] =?UTF-8?q?refactor(RichSelect):=20renamed=20RichSelect=20?=
 =?UTF-8?q?and=20RichSelectField=20to=20Selec=E2=80=A6=20(#2216)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(RichSelect): renamed RichSelect and RichSelectField to SelectInput and SelectInputField
---
 .../Form/__stories__/Playground.stories.tsx   |  10 +-
 .../__stories__/Template.stories.tsx          |  10 -
 .../__stories__/Groups.stories.tsx            |   8 +-
 .../__stories__/Playground.stories.tsx        |   0
 .../__stories__/Template.stories.tsx          |  10 +
 .../__stories__/index.stories.tsx             |   6 +-
 .../__snapshots__/index.spec.tsx.snap         |  72 ++---
 .../__tests__/index.spec.tsx                  |  38 +--
 .../index.tsx                                 |  87 ++---
 .../__snapshots__/index.spec.tsx.snap         |  48 +--
 packages/form/src/components/index.ts         |   4 +-
 packages/form/src/index.ts                    |   2 +-
 .../DateInput/__stories__/I18n.stories.tsx    |  12 +-
 .../List/__stories__/Animated.stories.tsx     |   6 +-
 .../__stories__/KnownIssues.stories.tsx       |  16 -
 .../RichSelect/__stories__/Multi.stories.tsx  |  21 --
 .../__stories__/NoLabel.stories.tsx           |  17 -
 .../__stories__/OptionDisabled.stories.tsx    |  18 --
 .../__stories__/Required.stories.tsx          |  17 -
 .../__stories__/Searchable.stories.tsx        |  17 -
 .../__stories__/Template.stories.tsx          |   6 -
 .../RichSelect/__stories__/Time.stories.tsx   |  17 -
 .../__stories__/Animated.stories.tsx          |  12 +-
 .../__stories__/Controlled.stories.tsx        |  18 +-
 .../__stories__/CustomOptions.stories.tsx     |  10 +-
 .../__stories__/Description.stories.tsx       |  16 +-
 .../__stories__/Disabled.stories.tsx          |   8 +-
 .../__stories__/EmptyState.stories.tsx        |   2 +-
 .../__stories__/IsClearable.stories.tsx       |   8 +-
 .../__stories__/KnownIssues.stories.tsx       |  16 +
 .../__stories__/LoadingDemo.stories.tsx       |   8 +-
 .../__stories__/LoadingExample.stories.tsx    |  12 +-
 .../SelectInput/__stories__/Multi.stories.tsx |  21 ++
 .../__stories__/MultiDisabled.stories.tsx     |   8 +-
 .../__stories__/NoLabel.stories.tsx           |  17 +
 .../__stories__/OptionDisabled.stories.tsx    |  18 ++
 .../__stories__/Playground.stories.tsx        |   6 +-
 .../__stories__/Required.stories.tsx          |  17 +
 .../__stories__/Searchable.stories.tsx        |  17 +
 .../__stories__/Template.stories.tsx          |   6 +
 .../SelectInput/__stories__/Time.stories.tsx  |  17 +
 .../__stories__/TimeError.stories.tsx         |   8 +-
 .../__stories__/Uncontrolled.stories.tsx      |   8 +-
 .../__stories__/index.stories.tsx             |  10 +-
 .../__tests__/__snapshots__/index.tsx.snap    | 304 +++++++++---------
 .../__tests__/index.tsx                       | 216 ++++++-------
 .../{RichSelect => SelectInput}/index.tsx     |  24 +-
 .../__stories__/Children.stories.tsx          |  16 +-
 .../__stories__/Controlled.stories.tsx        |   2 +-
 .../__tests__/__snapshots__/index.tsx.snap    |  12 +-
 .../ui/src/components/TimeInput/index.tsx     |   6 +-
 .../UnitInput/__stories__/index.stories.tsx   |   2 +-
 .../__tests__/__snapshots__/index.tsx.snap    | 202 ++++++------
 .../components/UnitInput/__tests__/index.tsx  |  14 +-
 .../ui/src/components/UnitInput/index.tsx     |  20 +-
 packages/ui/src/components/index.ts           |   2 +-
 packages/ui/src/index.ts                      |   2 +-
 website/src/pages/home/AdvancedUseCases.tsx   |  12 +-
 58 files changed, 773 insertions(+), 766 deletions(-)
 delete mode 100644 packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx
 rename packages/form/src/components/{RichSelectField => SelectInputField}/__stories__/Groups.stories.tsx (80%)
 rename packages/form/src/components/{RichSelectField => SelectInputField}/__stories__/Playground.stories.tsx (100%)
 create mode 100644 packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
 rename packages/form/src/components/{RichSelectField => SelectInputField}/__stories__/index.stories.tsx (81%)
 rename packages/form/src/components/{RichSelectField => SelectInputField}/__tests__/__snapshots__/index.spec.tsx.snap (96%)
 rename packages/form/src/components/{RichSelectField => SelectInputField}/__tests__/index.spec.tsx (74%)
 rename packages/form/src/components/{RichSelectField => SelectInputField}/index.tsx (72%)
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/KnownIssues.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/Multi.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/NoLabel.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/OptionDisabled.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/Required.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/Searchable.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/Template.stories.tsx
 delete mode 100644 packages/ui/src/components/RichSelect/__stories__/Time.stories.tsx
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Animated.stories.tsx (81%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Controlled.stories.tsx (52%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/CustomOptions.stories.tsx (75%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Description.stories.tsx (85%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Disabled.stories.tsx (51%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/EmptyState.stories.tsx (90%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/IsClearable.stories.tsx (52%)
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/KnownIssues.stories.tsx
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/LoadingDemo.stories.tsx (53%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/LoadingExample.stories.tsx (77%)
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/Multi.stories.tsx
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/MultiDisabled.stories.tsx (57%)
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/NoLabel.stories.tsx
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/OptionDisabled.stories.tsx
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Playground.stories.tsx (74%)
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/Required.stories.tsx
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/Searchable.stories.tsx
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/Template.stories.tsx
 create mode 100644 packages/ui/src/components/SelectInput/__stories__/Time.stories.tsx
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/TimeError.stories.tsx (50%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/Uncontrolled.stories.tsx (51%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__stories__/index.stories.tsx (84%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__tests__/__snapshots__/index.tsx.snap (97%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/__tests__/index.tsx (52%)
 rename packages/ui/src/components/{RichSelect => SelectInput}/index.tsx (96%)

diff --git a/packages/form/src/components/Form/__stories__/Playground.stories.tsx b/packages/form/src/components/Form/__stories__/Playground.stories.tsx
index 6192223f09..348bfc354c 100644
--- a/packages/form/src/components/Form/__stories__/Playground.stories.tsx
+++ b/packages/form/src/components/Form/__stories__/Playground.stories.tsx
@@ -7,7 +7,7 @@ import {
   DateField,
   Form,
   RadioField,
-  RichSelectField,
+  SelectInputField,
   SelectableCardField,
   Submit,
   SubmitErrorAlert,
@@ -78,10 +78,10 @@ export const Playground: ComponentStory<typeof Form> = args => {
           regex={[emailRegex]}
         />
 
-        <RichSelectField name="select" required>
-          <RichSelectField.Option value="1">1</RichSelectField.Option>
-          <RichSelectField.Option value="2">2</RichSelectField.Option>
-        </RichSelectField>
+        <SelectInputField name="select" required>
+          <SelectInputField.Option value="1">1</SelectInputField.Option>
+          <SelectInputField.Option value="2">2</SelectInputField.Option>
+        </SelectInputField>
 
         <TagsField name="tags" placeholder="Tags..." />
 
diff --git a/packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx b/packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx
deleted file mode 100644
index 65b52c9f8a..0000000000
--- a/packages/form/src/components/RichSelectField/__stories__/Template.stories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Story } from '@storybook/react'
-import type { RichSelectFieldProps } from '..'
-import { RichSelectField } from '..'
-
-export const Template: Story<RichSelectFieldProps> = args => (
-  <RichSelectField {...args}>
-    <RichSelectField.Option value="value">Label</RichSelectField.Option>
-    <RichSelectField.Option value="value2">Label 2</RichSelectField.Option>
-  </RichSelectField>
-)
diff --git a/packages/form/src/components/RichSelectField/__stories__/Groups.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Groups.stories.tsx
similarity index 80%
rename from packages/form/src/components/RichSelectField/__stories__/Groups.stories.tsx
rename to packages/form/src/components/SelectInputField/__stories__/Groups.stories.tsx
index a3f5fbafdc..fe429e1d5f 100644
--- a/packages/form/src/components/RichSelectField/__stories__/Groups.stories.tsx
+++ b/packages/form/src/components/SelectInputField/__stories__/Groups.stories.tsx
@@ -1,9 +1,9 @@
 import type { Story } from '@storybook/react'
-import type { RichSelectFieldProps } from '..'
-import { RichSelectField } from '..'
+import type { SelectInputFieldProps } from '..'
+import { SelectInputField } from '..'
 
-export const Groups: Story<RichSelectFieldProps> = () => (
-  <RichSelectField
+export const Groups: Story<SelectInputFieldProps> = () => (
+  <SelectInputField
     name="options"
     options={[
       {
diff --git a/packages/form/src/components/RichSelectField/__stories__/Playground.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Playground.stories.tsx
similarity index 100%
rename from packages/form/src/components/RichSelectField/__stories__/Playground.stories.tsx
rename to packages/form/src/components/SelectInputField/__stories__/Playground.stories.tsx
diff --git a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..bdddb25e4c
--- /dev/null
+++ b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
@@ -0,0 +1,10 @@
+import type { Story } from '@storybook/react'
+import type { SelectInputFieldProps } from '..'
+import { SelectInputField } from '..'
+
+export const Template: Story<SelectInputFieldProps> = args => (
+  <SelectInputField {...args}>
+    <SelectInputField.Option value="value">Label</SelectInputField.Option>
+    <SelectInputField.Option value="value2">Label 2</SelectInputField.Option>
+  </SelectInputField>
+)
diff --git a/packages/form/src/components/RichSelectField/__stories__/index.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/index.stories.tsx
similarity index 81%
rename from packages/form/src/components/RichSelectField/__stories__/index.stories.tsx
rename to packages/form/src/components/SelectInputField/__stories__/index.stories.tsx
index 7c6124ed52..75f39b6359 100644
--- a/packages/form/src/components/RichSelectField/__stories__/index.stories.tsx
+++ b/packages/form/src/components/SelectInputField/__stories__/index.stories.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import type { Meta } from '@storybook/react'
-import { Form, RichSelectField } from '../..'
+import { Form, SelectInputField } from '../..'
 import { mockErrors } from '../../../mocks'
 
 const Container = styled.div`
@@ -8,7 +8,7 @@ const Container = styled.div`
 `
 
 export default {
-  component: RichSelectField,
+  component: SelectInputField,
   decorators: [
     ChildStory => (
       <Form onRawSubmit={() => {}} errors={mockErrors}>
@@ -23,7 +23,7 @@ export default {
       },
     },
   },
-  title: 'Form/Components/Fields/RichSelectField',
+  title: 'Form/Components/Fields/SelectInputField',
 } as Meta
 
 export { Playground } from './Playground.stories'
diff --git a/packages/form/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
similarity index 96%
rename from packages/form/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap
rename to packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
index dea88507de..00a14484cd 100644
--- a/packages/form/src/components/RichSelectField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RichSelectField should display right value on grouped options 1`] = `
+exports[`SelectInputField should display right value on grouped options 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -277,8 +277,8 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -299,7 +299,7 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r4:"
           >
             Select...
@@ -362,10 +362,10 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
         value="Group Value"
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -373,7 +373,7 @@ exports[`RichSelectField should display right value on grouped options 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly 1`] = `
+exports[`SelectInputField should render correctly 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -635,8 +635,8 @@ exports[`RichSelectField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -657,7 +657,7 @@ exports[`RichSelectField should render correctly 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r0:"
           >
             Select...
@@ -722,10 +722,10 @@ exports[`RichSelectField should render correctly 1`] = `
         value=""
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -733,7 +733,7 @@ exports[`RichSelectField should render correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly disabled 1`] = `
+exports[`SelectInputField should render correctly disabled 1`] = `
 <DocumentFragment>
   .cache-iwdjsb-container-StyledContainer {
   width: 100%;
@@ -981,8 +981,8 @@ exports[`RichSelectField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-iwdjsb-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-iwdjsb-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1003,7 +1003,7 @@ exports[`RichSelectField should render correctly disabled 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r1:"
           >
             Select...
@@ -1064,10 +1064,10 @@ exports[`RichSelectField should render correctly disabled 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -1075,7 +1075,7 @@ exports[`RichSelectField should render correctly disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly multiple 1`] = `
+exports[`SelectInputField should render correctly multiple 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -1336,8 +1336,8 @@ exports[`RichSelectField should render correctly multiple 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1358,7 +1358,7 @@ exports[`RichSelectField should render correctly multiple 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r2:"
           >
             Select...
@@ -1425,10 +1425,10 @@ exports[`RichSelectField should render correctly multiple 1`] = `
         />
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -1436,7 +1436,7 @@ exports[`RichSelectField should render correctly multiple 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should render correctly with a disabled option 1`] = `
+exports[`SelectInputField should render correctly with a disabled option 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -1698,8 +1698,8 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1720,7 +1720,7 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-xrmeok e1lzna4r2"
+            class="cache-xrmeok e1o1qsrh2"
             for=":r3:"
           >
             Select...
@@ -1785,10 +1785,10 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
         value=""
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -1796,7 +1796,7 @@ exports[`RichSelectField should render correctly with a disabled option 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelectField should trigger events 1`] = `
+exports[`SelectInputField should trigger events 1`] = `
 <DocumentFragment>
   .cache-1gb28ew-container-StyledContainer {
   width: 100%;
@@ -2073,8 +2073,8 @@ exports[`RichSelectField should trigger events 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-test"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-test"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -2095,7 +2095,7 @@ exports[`RichSelectField should trigger events 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r5:"
           >
             Select...
@@ -2158,10 +2158,10 @@ exports[`RichSelectField should trigger events 1`] = `
         value="value"
       />
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
diff --git a/packages/form/src/components/RichSelectField/__tests__/index.spec.tsx b/packages/form/src/components/SelectInputField/__tests__/index.spec.tsx
similarity index 74%
rename from packages/form/src/components/RichSelectField/__tests__/index.spec.tsx
rename to packages/form/src/components/SelectInputField/__tests__/index.spec.tsx
index 7481f50849..915454603e 100644
--- a/packages/form/src/components/RichSelectField/__tests__/index.spec.tsx
+++ b/packages/form/src/components/SelectInputField/__tests__/index.spec.tsx
@@ -1,46 +1,46 @@
 import { fireEvent } from '@testing-library/dom'
 import { act } from '@testing-library/react'
-import { RichSelectField } from '..'
+import { SelectInputField } from '..'
 import {
   mockRandom,
   restoreRandom,
   shouldMatchEmotionSnapshotFormWrapper,
 } from '../../../../.jest/helpers'
 
-describe('RichSelectField', () => {
+describe('SelectInputField', () => {
   beforeAll(mockRandom)
 
   afterAll(restoreRandom)
 
   test('should render correctly', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField name="test">
-        <RichSelectField.Option value="value" label="Label" />
-      </RichSelectField>,
+      <SelectInputField name="test">
+        <SelectInputField.Option value="value" label="Label" />
+      </SelectInputField>,
     ))
 
   test('should render correctly disabled', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField name="test" disabled>
-        <RichSelectField.Option value="value" label="Label" />
-        <RichSelectField.Option value="value2" label="Label 2" />
-      </RichSelectField>,
+      <SelectInputField name="test" disabled>
+        <SelectInputField.Option value="value" label="Label" />
+        <SelectInputField.Option value="value2" label="Label 2" />
+      </SelectInputField>,
     ))
 
   test('should render correctly multiple', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField name="test" multiple>
-        <RichSelectField.Option value="value" label="Label" />
-        <RichSelectField.Option value="value2" label="Label 2" />
-      </RichSelectField>,
+      <SelectInputField name="test" multiple>
+        <SelectInputField.Option value="value" label="Label" />
+        <SelectInputField.Option value="value2" label="Label 2" />
+      </SelectInputField>,
     ))
 
   test('should render correctly with a disabled option', () =>
     shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField name="test">
-        <RichSelectField.Option value="value" label="Label" />
-        <RichSelectField.Option value="value2" label="Label 2" disabled />
-      </RichSelectField>,
+      <SelectInputField name="test">
+        <SelectInputField.Option value="value" label="Label" />
+        <SelectInputField.Option value="value2" label="Label 2" disabled />
+      </SelectInputField>,
     ))
 
   test('should display right value on grouped options', () => {
@@ -56,7 +56,7 @@ describe('RichSelectField', () => {
     ]
 
     return shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField name="test" options={options} />,
+      <SelectInputField name="test" options={options} />,
       {
         transform: async ({ getByRole, getByTestId, container }) => {
           const select = getByRole('combobox') as HTMLInputElement
@@ -85,7 +85,7 @@ describe('RichSelectField', () => {
     const onChange = jest.fn()
 
     return shouldMatchEmotionSnapshotFormWrapper(
-      <RichSelectField
+      <SelectInputField
         name="test"
         options={[
           { label: 'Label', value: 'value' },
diff --git a/packages/form/src/components/RichSelectField/index.tsx b/packages/form/src/components/SelectInputField/index.tsx
similarity index 72%
rename from packages/form/src/components/RichSelectField/index.tsx
rename to packages/form/src/components/SelectInputField/index.tsx
index 1190d83e4b..7f9c7c2b6e 100644
--- a/packages/form/src/components/RichSelectField/index.tsx
+++ b/packages/form/src/components/SelectInputField/index.tsx
@@ -1,5 +1,5 @@
 import type { CSSObject, Theme, css } from '@emotion/react'
-import { RichSelect } from '@scaleway/ui'
+import { SelectInput } from '@scaleway/ui'
 import type { FieldState } from 'final-form'
 import type {
   ComponentProps,
@@ -14,7 +14,7 @@ import { useFormField } from '../../hooks'
 import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
-// Here we duplicate RichSelect types as they are using interfaces which are not portable
+// Here we duplicate SelectInput types as they are using interfaces which are not portable
 type SelectOption = {
   value: string
   label: ReactNode
@@ -30,7 +30,7 @@ type WithSelectProps = {
 type SelectStyleProps = {
   error?: string
   /**
-   * Custom styles of the RichSelect. See [React select documentation](https://react-select.com/styles)
+   * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
    */
   customStyle: (
     state: SelectProps & WithSelectProps,
@@ -65,7 +65,7 @@ type SelectProps = StyledContainerProps &
 
 type StateManagedSelect = typeof Select
 
-type RichSelectProps = Partial<
+type SelectInputProps = Partial<
   SelectProps &
     SelectStyleProps & {
       /**
@@ -80,7 +80,7 @@ type RichSelectProps = Partial<
       readOnly?: boolean
       innerRef?: ForwardedRef<StateManagedSelect>
       /**
-       * Custom components of the RichSelect. See [React select documentation](https://react-select.com/components)
+       * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
        */
       customComponents?: SelectProps['components']
       children: ReactNode
@@ -88,17 +88,17 @@ type RichSelectProps = Partial<
     }
 >
 
-type RichSelectOptionProps = OptionProps
-type RichSelectOptionElement = ReactElement<RichSelectOptionProps>
-type RichSelectOptions = SelectProps['options']
-type RichSelectOptionOrGroup = NonNullable<RichSelectOptions>[number]
-type RichSelectOption = { value: string; label: string }
+type SelectInputOptionProps = OptionProps
+type SelectInputOptionElement = ReactElement<SelectInputOptionProps>
+type SelectInputOptions = SelectProps['options']
+type SelectInputOptionOrGroup = NonNullable<SelectInputOptions>[number]
+type SelectInputOption = { value: string; label: string }
 
-export type RichSelectFieldProps<
-  T extends RichSelectOptionOrGroup = RichSelectOptionOrGroup,
+export type SelectInputFieldProps<
+  T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup,
 > = BaseFieldProps<T> &
   Pick<
-    RichSelectProps,
+    SelectInputProps,
     | 'animation'
     | 'animationDuration'
     | 'animationOnChange'
@@ -132,8 +132,8 @@ export type RichSelectFieldProps<
 
 const identity = <T,>(x: T) => x
 
-export const RichSelectField = <
-  T extends RichSelectOptionOrGroup = RichSelectOptionOrGroup,
+export const SelectInputField = <
+  T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup,
 >({
   animation,
   animationDuration,
@@ -167,7 +167,7 @@ export const RichSelectField = <
   noTopLabel,
   noOptionsMessage,
   customStyle,
-}: RichSelectFieldProps<T>) => {
+}: SelectInputFieldProps<T>) => {
   const { getError } = useErrors()
 
   const options = useMemo(
@@ -176,11 +176,11 @@ export const RichSelectField = <
       ((
         Children.toArray(children)
           .flat()
-          .filter(Boolean) as RichSelectOptionElement[]
+          .filter(Boolean) as SelectInputOptionElement[]
       ).map(({ props: { children: labelChild, ...option } }) => ({
         ...option,
         label: labelChild,
-      })) as RichSelectOptions),
+      })) as SelectInputOptions),
     [optionsProp, children],
   )
 
@@ -189,27 +189,29 @@ export const RichSelectField = <
       multiple
         ? parseProp
         : (option: unknown) =>
-            parseProp((option as RichSelectOption)?.value ?? null, name),
+            parseProp((option as SelectInputOption)?.value ?? null, name),
     [multiple, parseProp, name],
   )
 
   const format = useCallback(
     (val: T) => {
-      if (multiple) return formatProp(val, name) as RichSelectOption
+      if (multiple) return formatProp(val, name) as SelectInputOption
 
-      const find = (opts: RichSelectOptionOrGroup[], valueToFind: string) =>
-        opts?.find(option => (option as RichSelectOption).value === valueToFind)
+      const find = (opts: SelectInputOptionOrGroup[], valueToFind: string) =>
+        opts?.find(
+          option => (option as SelectInputOption).value === valueToFind,
+        )
 
       let selected:
-        | RichSelectOptionOrGroup
-        | (RichSelectOptionOrGroup | undefined)[]
+        | SelectInputOptionOrGroup
+        | (SelectInputOptionOrGroup | undefined)[]
         | string
         | undefined = ''
 
       if (val && options) {
         // TODO: find a proper way to simplify format with recursive options
         selected = find(
-          options as unknown as RichSelectOptionOrGroup[],
+          options as unknown as SelectInputOptionOrGroup[],
           val as unknown as string,
         )
 
@@ -217,7 +219,7 @@ export const RichSelectField = <
           selected = options
             .map(curr =>
               find(
-                (curr as unknown as { options: RichSelectOptionOrGroup[] })
+                (curr as unknown as { options: SelectInputOptionOrGroup[] })
                   .options,
                 val as unknown as string,
               ),
@@ -229,22 +231,25 @@ export const RichSelectField = <
         }
       }
 
-      return formatProp(selected as T, name) as RichSelectOption
+      return formatProp(selected as T, name) as SelectInputOption
     },
     [formatProp, multiple, name, options],
   )
 
-  const { input, meta } = useFormField<T, HTMLElement, RichSelectOption>(name, {
-    disabled,
-    format,
-    formatOnBlur,
-    maxLength,
-    minLength: minLength || required ? 1 : undefined,
-    multiple,
-    parse,
-    required,
-    value,
-  })
+  const { input, meta } = useFormField<T, HTMLElement, SelectInputOption>(
+    name,
+    {
+      disabled,
+      format,
+      formatOnBlur,
+      maxLength,
+      minLength: minLength || required ? 1 : undefined,
+      multiple,
+      parse,
+      required,
+      value,
+    },
+  )
 
   const error = getError({
     errorProp,
@@ -255,7 +260,7 @@ export const RichSelectField = <
   })
 
   return (
-    <RichSelect
+    <SelectInput
       animation={animation}
       animationDuration={animationDuration}
       animationOnChange={animationOnChange}
@@ -292,8 +297,8 @@ export const RichSelectField = <
       noOptionsMessage={noOptionsMessage}
     >
       {children}
-    </RichSelect>
+    </SelectInput>
   )
 }
 
-RichSelectField.Option = RichSelect.Option
+SelectInputField.Option = SelectInput.Option
diff --git a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
index 8b08ab09d5..83fdea771a 100644
--- a/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/form/src/components/TimeField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -290,8 +290,8 @@ exports[`TimeField should render correctly 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -312,7 +312,7 @@ exports[`TimeField should render correctly 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r0:"
           >
             Select...
@@ -357,7 +357,7 @@ exports[`TimeField should render correctly 1`] = `
             >
               <hr
                 aria-orientation="vertical"
-                class="e1lzna4r6 cache-7nbpor eoti1h20"
+                class="e1o1qsrh6 cache-7nbpor eoti1h20"
                 role="separator"
               />
               <svg
@@ -373,10 +373,10 @@ exports[`TimeField should render correctly 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -674,8 +674,8 @@ exports[`TimeField should render correctly checked without value 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -696,7 +696,7 @@ exports[`TimeField should render correctly checked without value 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r2:"
           >
             Select...
@@ -741,7 +741,7 @@ exports[`TimeField should render correctly checked without value 1`] = `
             >
               <hr
                 aria-orientation="vertical"
-                class="e1lzna4r6 cache-7nbpor eoti1h20"
+                class="e1o1qsrh6 cache-7nbpor eoti1h20"
                 role="separator"
               />
               <svg
@@ -757,10 +757,10 @@ exports[`TimeField should render correctly checked without value 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -1045,8 +1045,8 @@ exports[`TimeField should render correctly disabled 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-iwdjsb-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-"
+      class=" cache-iwdjsb-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1067,7 +1067,7 @@ exports[`TimeField should render correctly disabled 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-1c18mpa e1lzna4r2"
+            class="cache-1c18mpa e1o1qsrh2"
             for=":r1:"
           >
             Select...
@@ -1113,7 +1113,7 @@ exports[`TimeField should render correctly disabled 1`] = `
             >
               <hr
                 aria-orientation="vertical"
-                class="e1lzna4r6 cache-7nbpor eoti1h20"
+                class="e1o1qsrh6 cache-7nbpor eoti1h20"
                 role="separator"
               />
               <svg
@@ -1129,10 +1129,10 @@ exports[`TimeField should render correctly disabled 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
@@ -1430,8 +1430,8 @@ exports[`TimeField should trigger events 1`] = `
     novalidate=""
   >
     <div
-      class=" cache-1gb28ew-container-StyledContainer e1lzna4r5"
-      data-testid="rich-select-"
+      class=" cache-1gb28ew-container-StyledContainer e1o1qsrh5"
+      data-testid="select-input-"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1452,7 +1452,7 @@ exports[`TimeField should trigger events 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-isgbik e1lzna4r2"
+            class="cache-isgbik e1o1qsrh2"
             for=":r3:"
           >
             Select...
@@ -1499,7 +1499,7 @@ exports[`TimeField should trigger events 1`] = `
             >
               <hr
                 aria-orientation="vertical"
-                class="e1lzna4r6 cache-7nbpor eoti1h20"
+                class="e1o1qsrh6 cache-7nbpor eoti1h20"
                 role="separator"
               />
               <svg
@@ -1515,10 +1515,10 @@ exports[`TimeField should trigger events 1`] = `
         </div>
       </div>
       <div
-        class="cache-9vn1ol e1lzna4r3"
+        class="cache-9vn1ol e1o1qsrh3"
       >
         <div
-          class="cache-19pioxy e1lzna4r4"
+          class="cache-19pioxy e1o1qsrh4"
         />
       </div>
     </div>
diff --git a/packages/form/src/components/index.ts b/packages/form/src/components/index.ts
index 58366bc8da..20d3521540 100644
--- a/packages/form/src/components/index.ts
+++ b/packages/form/src/components/index.ts
@@ -3,8 +3,8 @@ export { DateField } from './DateField'
 export type { FormProps } from './Form'
 export { Form } from './Form'
 export { RadioField } from './RadioField'
-export type { RichSelectFieldProps } from './RichSelectField'
-export { RichSelectField } from './RichSelectField'
+export type { SelectInputFieldProps } from './SelectInputField'
+export { SelectInputField } from './SelectInputField'
 export { SelectableCardField } from './SelectableCardField'
 export { SelectNumberField } from './SelectNumberField'
 export { SubmitErrorAlert } from './SubmitErrorAlert'
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 04e818e23b..0cf70e0629 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -7,8 +7,8 @@ export {
   DateField,
   Form,
   RadioField,
-  RichSelectField,
   SelectableCardField,
+  SelectInputField,
   SelectNumberField,
   Submit,
   SubmitErrorAlert,
diff --git a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
index 4158bb216a..373bab1863 100644
--- a/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
+++ b/packages/ui/src/components/DateInput/__stories__/I18n.stories.tsx
@@ -2,8 +2,8 @@ import { useI18n } from '@scaleway/use-i18n'
 import type { Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
 import { DateInput } from '..'
-import type { SelectOption } from '../../RichSelect'
-import { RichSelect } from '../../RichSelect'
+import type { SelectOption } from '../../SelectInput'
+import { SelectInput } from '../../SelectInput'
 
 export const I18n: Story<ComponentProps<typeof DateInput>> = () => {
   const { locales, currentLocale, switchLocale, dateFnsLocale } = useI18n()
@@ -14,7 +14,7 @@ export const I18n: Story<ComponentProps<typeof DateInput>> = () => {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-      <RichSelect
+      <SelectInput
         name="locale-switcher"
         isSearchable={false}
         value={{
@@ -27,11 +27,11 @@ export const I18n: Story<ComponentProps<typeof DateInput>> = () => {
         noTopLabel
       >
         {locales.map(locale => (
-          <RichSelect.Option value={locale} key={locale}>
+          <SelectInput.Option value={locale} key={locale}>
             {locale}
-          </RichSelect.Option>
+          </SelectInput.Option>
         ))}
-      </RichSelect>
+      </SelectInput>
       <DateInput onChange={() => {}} label={currentLocale} />
     </div>
   )
diff --git a/packages/ui/src/components/List/__stories__/Animated.stories.tsx b/packages/ui/src/components/List/__stories__/Animated.stories.tsx
index a40d6a8497..bd4659f881 100644
--- a/packages/ui/src/components/List/__stories__/Animated.stories.tsx
+++ b/packages/ui/src/components/List/__stories__/Animated.stories.tsx
@@ -3,8 +3,8 @@ import List from '..'
 import { generateData } from '../../../mocks/list'
 import * as animations from '../../../utils/animations'
 import { Button } from '../../Button'
-import type { SelectOption } from '../../RichSelect'
-import { RichSelect } from '../../RichSelect'
+import type { SelectOption } from '../../SelectInput'
+import { SelectInput } from '../../SelectInput'
 import { Stack } from '../../Stack'
 
 const selectableAnimations = Object.keys(animations).map(animation => ({
@@ -21,7 +21,7 @@ export const Animated = () => {
 
   return (
     <Stack gap={2}>
-      <RichSelect
+      <SelectInput
         name="animated"
         value={currentAnimation}
         onChange={value => setCurrentAnimation(value as SelectOption)}
diff --git a/packages/ui/src/components/RichSelect/__stories__/KnownIssues.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/KnownIssues.stories.tsx
deleted file mode 100644
index 1dcfcdf198..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/KnownIssues.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Template } from './Template.stories'
-
-export const KnownIssues = Template.bind({})
-
-KnownIssues.parameters = {
-  docs: {
-    storyDescription: `#### RichSelect doesn’t keep focus on selected option
-
-RichSelect is based on the \`react-select\` library. To keep the focus on the selected option you need to use \`options\` prop with a memoized value or a memoized \`children\`
-
-#### OnChange signature is broken and will cause typescript type check error
-
-Use @ts-expect-error if needed.
-`,
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Multi.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/Multi.stories.tsx
deleted file mode 100644
index b1ca528556..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/Multi.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { RichSelect } from '..'
-import { Template } from './Template.stories'
-
-export const Multi = Template.bind({})
-Multi.args = {
-  name: 'multi',
-  isMulti: true,
-  children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
-    <RichSelect.Option value="c">Option C</RichSelect.Option>,
-    <RichSelect.Option value="d">Option D</RichSelect.Option>,
-    <RichSelect.Option value="e">Option E</RichSelect.Option>,
-    <RichSelect.Option value="f">Option F</RichSelect.Option>,
-  ],
-}
-Multi.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `isMulti`on RichSelect.',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/NoLabel.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/NoLabel.stories.tsx
deleted file mode 100644
index 6cfd8f580c..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/NoLabel.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { RichSelect } from '..'
-import { Template } from './Template.stories'
-
-export const NoLabel = Template.bind({})
-NoLabel.args = {
-  name: 'no-label',
-  noTopLabel: true,
-  children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
-  ],
-}
-NoLabel.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `noTopLabel` in RichSelect.',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/OptionDisabled.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/OptionDisabled.stories.tsx
deleted file mode 100644
index 91aeee5f0e..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/OptionDisabled.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RichSelect } from '../..'
-import { Template } from './Template.stories'
-
-export const OptionDisabled = Template.bind({})
-OptionDisabled.args = {
-  name: 'option-disabled',
-  children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b" disabled>
-      Option B
-    </RichSelect.Option>,
-  ],
-}
-OptionDisabled.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `disabled` on RichSelect.Option.',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Required.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/Required.stories.tsx
deleted file mode 100644
index 53b2a8a171..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/Required.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { RichSelect } from '..'
-import { Template } from './Template.stories'
-
-export const Required = Template.bind({})
-Required.args = {
-  name: 'required',
-  required: true,
-  children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
-  ],
-}
-Required.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `required` on RichSelect',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Searchable.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/Searchable.stories.tsx
deleted file mode 100644
index 4888c8707d..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/Searchable.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { RichSelect } from '..'
-import { Template } from './Template.stories'
-
-export const Searchable = Template.bind({})
-Searchable.args = {
-  name: 'required',
-  isSearchable: true,
-  children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
-  ],
-}
-Searchable.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `isSearchable` on RichSelect.',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Template.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/Template.stories.tsx
deleted file mode 100644
index f2f83230c7..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/Template.stories.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ComponentStory } from '@storybook/react'
-import { RichSelect } from '..'
-
-export const Template: ComponentStory<typeof RichSelect> = ({ ...props }) => (
-  <RichSelect {...props} />
-)
diff --git a/packages/ui/src/components/RichSelect/__stories__/Time.stories.tsx b/packages/ui/src/components/RichSelect/__stories__/Time.stories.tsx
deleted file mode 100644
index b4876925dc..0000000000
--- a/packages/ui/src/components/RichSelect/__stories__/Time.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { RichSelect } from '..'
-import { Template } from './Template.stories'
-
-export const Time = Template.bind({})
-Time.args = {
-  name: 'time',
-  time: true,
-  children: [
-    <RichSelect.Option value="11">11:00</RichSelect.Option>,
-    <RichSelect.Option value="12">12:00</RichSelect.Option>,
-  ],
-}
-Time.parameters = {
-  docs: {
-    storyDescription: 'This shows how to use `time` on RichSelect',
-  },
-}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Animated.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Animated.stories.tsx
similarity index 81%
rename from packages/ui/src/components/RichSelect/__stories__/Animated.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Animated.stories.tsx
index cbfb1dc747..5486e0b18f 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Animated.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Animated.stories.tsx
@@ -1,13 +1,13 @@
 import type { ComponentStory } from '@storybook/react'
 import { useState } from 'react'
 import type { SingleValue } from 'react-select'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Button } from '../..'
 import * as animations from '../../../utils/animations'
 
 type OptionType = { label: string; value: string }
 
-export const Animated: ComponentStory<typeof RichSelect> = ({ ...props }) => {
+export const Animated: ComponentStory<typeof SelectInput> = ({ ...props }) => {
   const [options] = useState(
     Object.keys(animations).map(animation => ({
       label: animation,
@@ -28,13 +28,13 @@ export const Animated: ComponentStory<typeof RichSelect> = ({ ...props }) => {
       <Button onClick={() => setAnimation(defaultOption)}>
         Select pulse animation
       </Button>
-      <RichSelect
+      <SelectInput
         name="animated"
         animationOnChange
         animation={animation.value}
         animationDuration={1000}
         value={animation}
-        // @ts-expect-error onChange signature error because RichSelect did not properly implement IsMulti
+        // @ts-expect-error onChange signature error because SelectInput did not properly implement IsMulti
         onChange={handleChange}
         isMulti={false}
         options={options}
@@ -46,8 +46,8 @@ export const Animated: ComponentStory<typeof RichSelect> = ({ ...props }) => {
 
 Animated.parameters = {
   docs: {
-    storyDescription: `THis shows how to use \`animationOnChange\`, \`animation\` and \`animationDuration\` on RichSelect.
-The animation will be played when the value changes. Animation start when you select new value but also if you change the value of RichSelect with an external way (check example with button).
+    storyDescription: `THis shows how to use \`animationOnChange\`, \`animation\` and \`animationDuration\` on SelectInput.
+The animation will be played when the value changes. Animation start when you select new value but also if you change the value of SelectInput with an external way (check example with button).
 
 #### Available animations
 
diff --git a/packages/ui/src/components/RichSelect/__stories__/Controlled.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Controlled.stories.tsx
similarity index 52%
rename from packages/ui/src/components/RichSelect/__stories__/Controlled.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Controlled.stories.tsx
index 1668e9b116..811d67fc2c 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Controlled.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Controlled.stories.tsx
@@ -1,11 +1,13 @@
 import type { ComponentStory } from '@storybook/react'
 import { useState } from 'react'
 import type { SingleValue } from 'react-select'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 
 type OptionType = { label: string; value: string }
 
-export const Controlled: ComponentStory<typeof RichSelect> = ({ ...props }) => {
+export const Controlled: ComponentStory<typeof SelectInput> = ({
+  ...props
+}) => {
   const [value, setValue] = useState<OptionType>()
 
   const handleChange = (newValue: SingleValue<OptionType>) => {
@@ -15,21 +17,21 @@ export const Controlled: ComponentStory<typeof RichSelect> = ({ ...props }) => {
   }
 
   return (
-    <RichSelect
+    <SelectInput
       name="controlled"
       value={value}
-      // @ts-expect-error onChange signature error because RichSelect did not properly implement IsMulti
+      // @ts-expect-error onChange signature error because SelectInput did not properly implement IsMulti
       onChange={handleChange}
       {...props}
     >
-      <RichSelect.Option value="a">Option A</RichSelect.Option>
-      <RichSelect.Option value="b">Option B</RichSelect.Option>
-    </RichSelect>
+      <SelectInput.Option value="a">Option A</SelectInput.Option>
+      <SelectInput.Option value="b">Option B</SelectInput.Option>
+    </SelectInput>
   )
 }
 
 Controlled.parameters = {
   docs: {
-    storyDescription: 'This shows how to use Controlled RichSelect.',
+    storyDescription: 'This shows how to use Controlled SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/CustomOptions.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/CustomOptions.stories.tsx
similarity index 75%
rename from packages/ui/src/components/RichSelect/__stories__/CustomOptions.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/CustomOptions.stories.tsx
index 215f7aba15..7a5a228ac5 100644
--- a/packages/ui/src/components/RichSelect/__stories__/CustomOptions.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/CustomOptions.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Badge } from '../../Badge'
 import { Template } from './Template.stories'
 
@@ -6,8 +6,8 @@ export const CustomOptions = Template.bind({})
 CustomOptions.args = {
   name: 'custom-options',
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">
       <div
         style={{
           alignItems: 'center',
@@ -17,11 +17,11 @@ CustomOptions.args = {
       >
         Option B<Badge size="small">Awesome badge</Badge>
       </div>
-    </RichSelect.Option>,
+    </SelectInput.Option>,
   ],
 }
 CustomOptions.parameters = {
   docs: {
-    storyDescription: 'This shows how to customize options in a RichSelect.',
+    storyDescription: 'This shows how to customize options in a SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/Description.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Description.stories.tsx
similarity index 85%
rename from packages/ui/src/components/RichSelect/__stories__/Description.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Description.stories.tsx
index 6ce8d79def..4848a3af34 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Description.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Description.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const Description = Template.bind({})
@@ -7,24 +7,24 @@ Description.args = {
   isClearable: true,
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option
+    <SelectInput.Option
       value="a"
       inlineDescription="This is an average solution"
     >
       Option A
-    </RichSelect.Option>,
-    <RichSelect.Option
+    </SelectInput.Option>,
+    <SelectInput.Option
       value="b"
       description="This is the best solution, friend advice"
     >
       Option B
-    </RichSelect.Option>,
-    <RichSelect.Option
+    </SelectInput.Option>,
+    <SelectInput.Option
       value="long-description"
       description="I am a very long description here to show you what happen after a certain length the description should cut. In fact this description is not long enough yet to be cut it require at least 3 full lines to be able to see this happening. I am tired I'm gonna add lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
     >
       Option with long description
-    </RichSelect.Option>,
+    </SelectInput.Option>,
   ],
 }
 Description.decorators = [
@@ -39,7 +39,7 @@ Description.parameters = {
   docs: {
     description: {
       story:
-        'This shows how to use `description` and `inlineDescription` on RichSelect.Option.',
+        'This shows how to use `description` and `inlineDescription` on SelectInput.Option.',
     },
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/Disabled.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Disabled.stories.tsx
similarity index 51%
rename from packages/ui/src/components/RichSelect/__stories__/Disabled.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Disabled.stories.tsx
index 984a12d4f1..0ed3678fb3 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Disabled.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Disabled.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const Disabled = Template.bind({})
@@ -7,12 +7,12 @@ Disabled.args = {
   disabled: true,
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 Disabled.parameters = {
   docs: {
-    storyDescription: 'This shows how to use `disabled` on RichSelect.',
+    storyDescription: 'This shows how to use `disabled` on SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/EmptyState.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx
similarity index 90%
rename from packages/ui/src/components/RichSelect/__stories__/EmptyState.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx
index 32462493c9..8d47fc05c5 100644
--- a/packages/ui/src/components/RichSelect/__stories__/EmptyState.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx
@@ -24,7 +24,7 @@ EmptyState.args = {
 EmptyState.parameters = {
   docs: {
     description: {
-      story: 'This shows how to use `emptyState` on RichSelect.',
+      story: 'This shows how to use `emptyState` on SelectInput.',
     },
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/IsClearable.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/IsClearable.stories.tsx
similarity index 52%
rename from packages/ui/src/components/RichSelect/__stories__/IsClearable.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/IsClearable.stories.tsx
index d77368cb20..2e8dc2ac6d 100644
--- a/packages/ui/src/components/RichSelect/__stories__/IsClearable.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/IsClearable.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const IsClearable = Template.bind({})
@@ -7,12 +7,12 @@ IsClearable.args = {
   isClearable: true,
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 IsClearable.parameters = {
   docs: {
-    storyDescription: 'This shows how to use `isClearable` on RichSelect.',
+    storyDescription: 'This shows how to use `isClearable` on SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/SelectInput/__stories__/KnownIssues.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/KnownIssues.stories.tsx
new file mode 100644
index 0000000000..aefc4e53a0
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/KnownIssues.stories.tsx
@@ -0,0 +1,16 @@
+import { Template } from './Template.stories'
+
+export const KnownIssues = Template.bind({})
+
+KnownIssues.parameters = {
+  docs: {
+    storyDescription: `#### SelectInput doesn’t keep focus on selected option
+
+SelectInput is based on the \`react-select\` library. To keep the focus on the selected option you need to use \`options\` prop with a memoized value or a memoized \`children\`
+
+#### OnChange signature is broken and will cause typescript type check error
+
+Use @ts-expect-error if needed.
+`,
+  },
+}
diff --git a/packages/ui/src/components/RichSelect/__stories__/LoadingDemo.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/LoadingDemo.stories.tsx
similarity index 53%
rename from packages/ui/src/components/RichSelect/__stories__/LoadingDemo.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/LoadingDemo.stories.tsx
index 0ac91e8ca4..0c4123bceb 100644
--- a/packages/ui/src/components/RichSelect/__stories__/LoadingDemo.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/LoadingDemo.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const LoadingDemo = Template.bind({})
@@ -8,12 +8,12 @@ LoadingDemo.args = {
   disabled: true,
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 LoadingDemo.parameters = {
   docs: {
-    storyDescription: 'This shows how to use `isLoading` on RichSelect',
+    storyDescription: 'This shows how to use `isLoading` on SelectInput',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/LoadingExample.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/LoadingExample.stories.tsx
similarity index 77%
rename from packages/ui/src/components/RichSelect/__stories__/LoadingExample.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/LoadingExample.stories.tsx
index 439aa26693..500fa7925d 100644
--- a/packages/ui/src/components/RichSelect/__stories__/LoadingExample.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/LoadingExample.stories.tsx
@@ -1,9 +1,9 @@
 import type { ComponentStory } from '@storybook/react'
 import { useEffect, useState } from 'react'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Button, Loader } from '../..'
 
-export const LoadingExample: ComponentStory<typeof RichSelect> = ({
+export const LoadingExample: ComponentStory<typeof SelectInput> = ({
   ...props
 }) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -24,7 +24,7 @@ export const LoadingExample: ComponentStory<typeof RichSelect> = ({
       <Button size="small" onClick={() => setIsLoading(true)}>
         Load data
       </Button>
-      <RichSelect
+      <SelectInput
         name="example"
         isLoading={isLoading}
         customComponents={{
@@ -32,11 +32,11 @@ export const LoadingExample: ComponentStory<typeof RichSelect> = ({
         }}
         {...props}
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
         {!isLoading && (
-          <RichSelect.Option value="b">Option B</RichSelect.Option>
+          <SelectInput.Option value="b">Option B</SelectInput.Option>
         )}
-      </RichSelect>
+      </SelectInput>
     </>
   )
 }
diff --git a/packages/ui/src/components/SelectInput/__stories__/Multi.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Multi.stories.tsx
new file mode 100644
index 0000000000..a299f3eff9
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/Multi.stories.tsx
@@ -0,0 +1,21 @@
+import { SelectInput } from '..'
+import { Template } from './Template.stories'
+
+export const Multi = Template.bind({})
+Multi.args = {
+  name: 'multi',
+  isMulti: true,
+  children: [
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
+    <SelectInput.Option value="c">Option C</SelectInput.Option>,
+    <SelectInput.Option value="d">Option D</SelectInput.Option>,
+    <SelectInput.Option value="e">Option E</SelectInput.Option>,
+    <SelectInput.Option value="f">Option F</SelectInput.Option>,
+  ],
+}
+Multi.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `isMulti`on SelectInput.',
+  },
+}
diff --git a/packages/ui/src/components/RichSelect/__stories__/MultiDisabled.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/MultiDisabled.stories.tsx
similarity index 57%
rename from packages/ui/src/components/RichSelect/__stories__/MultiDisabled.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/MultiDisabled.stories.tsx
index 0d53e18e45..a67ef17692 100644
--- a/packages/ui/src/components/RichSelect/__stories__/MultiDisabled.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/MultiDisabled.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const MultiDisabled = Template.bind({})
@@ -8,13 +8,13 @@ MultiDisabled.args = {
   disabled: true,
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 MultiDisabled.parameters = {
   docs: {
     storyDescription:
-      'This shows how to use `disabled` on `isMulti` RichSelect.',
+      'This shows how to use `disabled` on `isMulti` SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/SelectInput/__stories__/NoLabel.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/NoLabel.stories.tsx
new file mode 100644
index 0000000000..28d9aafed3
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/NoLabel.stories.tsx
@@ -0,0 +1,17 @@
+import { SelectInput } from '..'
+import { Template } from './Template.stories'
+
+export const NoLabel = Template.bind({})
+NoLabel.args = {
+  name: 'no-label',
+  noTopLabel: true,
+  children: [
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
+  ],
+}
+NoLabel.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `noTopLabel` in SelectInput.',
+  },
+}
diff --git a/packages/ui/src/components/SelectInput/__stories__/OptionDisabled.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/OptionDisabled.stories.tsx
new file mode 100644
index 0000000000..9d2254d4b8
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/OptionDisabled.stories.tsx
@@ -0,0 +1,18 @@
+import { SelectInput } from '../..'
+import { Template } from './Template.stories'
+
+export const OptionDisabled = Template.bind({})
+OptionDisabled.args = {
+  name: 'option-disabled',
+  children: [
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b" disabled>
+      Option B
+    </SelectInput.Option>,
+  ],
+}
+OptionDisabled.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `disabled` on SelectInput.Option.',
+  },
+}
diff --git a/packages/ui/src/components/RichSelect/__stories__/Playground.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Playground.stories.tsx
similarity index 74%
rename from packages/ui/src/components/RichSelect/__stories__/Playground.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Playground.stories.tsx
index 280ee27540..c67a58e548 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Playground.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Playground.stories.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, screen } from '@storybook/testing-library'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const Playground = Template.bind({})
@@ -9,8 +9,8 @@ Playground.args = {
   name: 'basic',
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 
diff --git a/packages/ui/src/components/SelectInput/__stories__/Required.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Required.stories.tsx
new file mode 100644
index 0000000000..fffc7058fe
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/Required.stories.tsx
@@ -0,0 +1,17 @@
+import { SelectInput } from '..'
+import { Template } from './Template.stories'
+
+export const Required = Template.bind({})
+Required.args = {
+  name: 'required',
+  required: true,
+  children: [
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
+  ],
+}
+Required.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `required` on SelectInput',
+  },
+}
diff --git a/packages/ui/src/components/SelectInput/__stories__/Searchable.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Searchable.stories.tsx
new file mode 100644
index 0000000000..518144c426
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/Searchable.stories.tsx
@@ -0,0 +1,17 @@
+import { SelectInput } from '..'
+import { Template } from './Template.stories'
+
+export const Searchable = Template.bind({})
+Searchable.args = {
+  name: 'required',
+  isSearchable: true,
+  children: [
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
+  ],
+}
+Searchable.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `isSearchable` on SelectInput.',
+  },
+}
diff --git a/packages/ui/src/components/SelectInput/__stories__/Template.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..f03baa5734
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/Template.stories.tsx
@@ -0,0 +1,6 @@
+import type { ComponentStory } from '@storybook/react'
+import { SelectInput } from '..'
+
+export const Template: ComponentStory<typeof SelectInput> = ({ ...props }) => (
+  <SelectInput {...props} />
+)
diff --git a/packages/ui/src/components/SelectInput/__stories__/Time.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Time.stories.tsx
new file mode 100644
index 0000000000..fbe3a2d7ac
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/__stories__/Time.stories.tsx
@@ -0,0 +1,17 @@
+import { SelectInput } from '..'
+import { Template } from './Template.stories'
+
+export const Time = Template.bind({})
+Time.args = {
+  name: 'time',
+  time: true,
+  children: [
+    <SelectInput.Option value="11">11:00</SelectInput.Option>,
+    <SelectInput.Option value="12">12:00</SelectInput.Option>,
+  ],
+}
+Time.parameters = {
+  docs: {
+    storyDescription: 'This shows how to use `time` on SelectInput',
+  },
+}
diff --git a/packages/ui/src/components/RichSelect/__stories__/TimeError.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/TimeError.stories.tsx
similarity index 50%
rename from packages/ui/src/components/RichSelect/__stories__/TimeError.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/TimeError.stories.tsx
index 474649d9e4..9b1e9948e4 100644
--- a/packages/ui/src/components/RichSelect/__stories__/TimeError.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/TimeError.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const TimeError = Template.bind({})
@@ -7,12 +7,12 @@ TimeError.args = {
   time: true,
   error: 'this is an error',
   children: [
-    <RichSelect.Option value="11">11:00</RichSelect.Option>,
-    <RichSelect.Option value="12">12:00</RichSelect.Option>,
+    <SelectInput.Option value="11">11:00</SelectInput.Option>,
+    <SelectInput.Option value="12">12:00</SelectInput.Option>,
   ],
 }
 TimeError.parameters = {
   docs: {
-    storyDescription: 'This shows how to use `time-error` on RichSelect',
+    storyDescription: 'This shows how to use `time-error` on SelectInput',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/Uncontrolled.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/Uncontrolled.stories.tsx
similarity index 51%
rename from packages/ui/src/components/RichSelect/__stories__/Uncontrolled.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/Uncontrolled.stories.tsx
index 15519597ab..4812656925 100644
--- a/packages/ui/src/components/RichSelect/__stories__/Uncontrolled.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/Uncontrolled.stories.tsx
@@ -1,4 +1,4 @@
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import { Template } from './Template.stories'
 
 export const Uncontrolled = Template.bind({})
@@ -6,12 +6,12 @@ Uncontrolled.args = {
   name: 'uncontrolled',
   value: { label: 'Option A', value: 'a' },
   children: [
-    <RichSelect.Option value="a">Option A</RichSelect.Option>,
-    <RichSelect.Option value="b">Option B</RichSelect.Option>,
+    <SelectInput.Option value="a">Option A</SelectInput.Option>,
+    <SelectInput.Option value="b">Option B</SelectInput.Option>,
   ],
 }
 Uncontrolled.parameters = {
   docs: {
-    storyDescription: 'This shows how to use Uncontrolled RichSelect.',
+    storyDescription: 'This shows how to use Uncontrolled SelectInput.',
   },
 }
diff --git a/packages/ui/src/components/RichSelect/__stories__/index.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/index.stories.tsx
similarity index 84%
rename from packages/ui/src/components/RichSelect/__stories__/index.stories.tsx
rename to packages/ui/src/components/SelectInput/__stories__/index.stories.tsx
index 2bfed26efb..a4d6ff01ba 100644
--- a/packages/ui/src/components/RichSelect/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/SelectInput/__stories__/index.stories.tsx
@@ -1,8 +1,8 @@
 import type { ComponentMeta } from '@storybook/react'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 
 export default {
-  component: RichSelect,
+  component: SelectInput,
   decorators: [
     StoryComponent => (
       <div style={{ marginBottom: 150 }}>
@@ -14,12 +14,12 @@ export default {
     docs: {
       description: {
         component:
-          'RichSelect is a component used to select a value between different options.',
+          'SelectInput is a component used to select a value between different options.',
       },
     },
   },
-  title: 'Components/Data Entry/RichSelect',
-} as ComponentMeta<typeof RichSelect>
+  title: 'Components/Data Entry/SelectInput',
+} as ComponentMeta<typeof SelectInput>
 
 export { Playground } from './Playground.stories'
 export { Uncontrolled } from './Uncontrolled.stories'
diff --git a/packages/ui/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
similarity index 97%
rename from packages/ui/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap
rename to packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
index e03d364f5e..4a5fb11eed 100644
--- a/packages/ui/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RichSelect renders correctly animated 1`] = `
+exports[`SelectInput renders correctly animated 1`] = `
 <DocumentFragment>
   @keyframes animation-0 {
   0% {
@@ -285,8 +285,8 @@ exports[`RichSelect renders correctly animated 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-animated"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-animated"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -307,7 +307,7 @@ exports[`RichSelect renders correctly animated 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -372,17 +372,17 @@ exports[`RichSelect renders correctly animated 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly controlled 1`] = `
+exports[`SelectInput renders correctly controlled 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -641,8 +641,8 @@ exports[`RichSelect renders correctly controlled 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-controlled"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-controlled"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -663,7 +663,7 @@ exports[`RichSelect renders correctly controlled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -728,17 +728,17 @@ exports[`RichSelect renders correctly controlled 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly default values with click 1`] = `
+exports[`SelectInput renders correctly default values with click 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -1073,8 +1073,8 @@ exports[`RichSelect renders correctly default values with click 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -1104,7 +1104,7 @@ exports[`RichSelect renders correctly default values with click 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -1203,17 +1203,17 @@ exports[`RichSelect renders correctly default values with click 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly disabled 1`] = `
+exports[`SelectInput renders correctly disabled 1`] = `
 <DocumentFragment>
   .cache-1n7poat-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -1458,8 +1458,8 @@ exports[`RichSelect renders correctly disabled 1`] = `
 }
 
 <div
-    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-disabled"
+    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-disabled"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -1480,7 +1480,7 @@ exports[`RichSelect renders correctly disabled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -1541,17 +1541,17 @@ exports[`RichSelect renders correctly disabled 1`] = `
       </div>
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly disabled with click 1`] = `
+exports[`SelectInput renders correctly disabled with click 1`] = `
 <DocumentFragment>
   .cache-1n7poat-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -1796,8 +1796,8 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
 }
 
 <div
-    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -1818,7 +1818,7 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -1879,17 +1879,17 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
       </div>
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly multi 1`] = `
+exports[`SelectInput renders correctly multi 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -2147,8 +2147,8 @@ exports[`RichSelect renders correctly multi 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-multi"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-multi"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -2169,7 +2169,7 @@ exports[`RichSelect renders correctly multi 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -2236,17 +2236,17 @@ exports[`RichSelect renders correctly multi 1`] = `
       />
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly multi disabled 1`] = `
+exports[`SelectInput renders correctly multi disabled 1`] = `
 <DocumentFragment>
   .cache-1n7poat-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -2568,8 +2568,8 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
 }
 
 <div
-    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-multi-disabled"
+    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-multi-disabled"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -2590,7 +2590,7 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-au1o7r-StyledPlaceholder e1lzna4r2"
+          class="cache-au1o7r-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -2667,17 +2667,17 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
       </div>
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly required 1`] = `
+exports[`SelectInput renders correctly required 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -2955,8 +2955,8 @@ exports[`RichSelect renders correctly required 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-required"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-required"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -2977,7 +2977,7 @@ exports[`RichSelect renders correctly required 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -3053,17 +3053,17 @@ exports[`RichSelect renders correctly required 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly timed 1`] = `
+exports[`SelectInput renders correctly timed 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -3335,8 +3335,8 @@ exports[`RichSelect renders correctly timed 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-time"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-time"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -3357,7 +3357,7 @@ exports[`RichSelect renders correctly timed 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -3406,7 +3406,7 @@ exports[`RichSelect renders correctly timed 1`] = `
           >
             <hr
               aria-orientation="vertical"
-              class="e1lzna4r6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
+              class="e1o1qsrh6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
               role="separator"
             />
             <svg
@@ -3427,17 +3427,17 @@ exports[`RichSelect renders correctly timed 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly timed with error 1`] = `
+exports[`SelectInput renders correctly timed with error 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -3709,8 +3709,8 @@ exports[`RichSelect renders correctly timed with error 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-time-error"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-time-error"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -3731,7 +3731,7 @@ exports[`RichSelect renders correctly timed with error 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -3780,7 +3780,7 @@ exports[`RichSelect renders correctly timed with error 1`] = `
           >
             <hr
               aria-orientation="vertical"
-              class="e1lzna4r6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
+              class="e1o1qsrh6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
               role="separator"
             />
             <svg
@@ -3801,17 +3801,17 @@ exports[`RichSelect renders correctly timed with error 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly uncontrolled 1`] = `
+exports[`SelectInput renders correctly uncontrolled 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -4146,8 +4146,8 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-uncontrolled"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-uncontrolled"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -4177,7 +4177,7 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -4276,17 +4276,17 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly with click 1`] = `
+exports[`SelectInput renders correctly with click 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -4621,8 +4621,8 @@ exports[`RichSelect renders correctly with click 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -4652,7 +4652,7 @@ exports[`RichSelect renders correctly with click 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -4751,17 +4751,17 @@ exports[`RichSelect renders correctly with click 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly with click and option disabled 1`] = `
+exports[`SelectInput renders correctly with click and option disabled 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -5122,8 +5122,8 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -5153,7 +5153,7 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -5264,17 +5264,17 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly with click and options 1`] = `
+exports[`SelectInput renders correctly with click and options 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -5635,8 +5635,8 @@ exports[`RichSelect renders correctly with click and options 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -5666,7 +5666,7 @@ exports[`RichSelect renders correctly with click and options 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -5777,17 +5777,17 @@ exports[`RichSelect renders correctly with click and options 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly with custom styles 1`] = `
+exports[`SelectInput renders correctly with custom styles 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -6046,8 +6046,8 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-uncontrolled"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-uncontrolled"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -6068,7 +6068,7 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -6133,17 +6133,17 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect renders correctly with emptyState 1`] = `
+exports[`SelectInput renders correctly with emptyState 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -6433,8 +6433,8 @@ exports[`RichSelect renders correctly with emptyState 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-emptyState"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-emptyState"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -6464,7 +6464,7 @@ exports[`RichSelect renders correctly with emptyState 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -6544,17 +6544,17 @@ exports[`RichSelect renders correctly with emptyState 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly custom isLoading 1`] = `
+exports[`SelectInput should render correctly custom isLoading 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -6813,8 +6813,8 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test-loading"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -6835,7 +6835,7 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -6903,17 +6903,17 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly description and inlineDescription 1`] = `
+exports[`SelectInput should render correctly description and inlineDescription 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -7172,8 +7172,8 @@ exports[`RichSelect should render correctly description and inlineDescription 1`
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test-loading"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -7194,7 +7194,7 @@ exports[`RichSelect should render correctly description and inlineDescription 1`
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -7259,17 +7259,17 @@ exports[`RichSelect should render correctly description and inlineDescription 1`
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly isLoading 1`] = `
+exports[`SelectInput should render correctly isLoading 1`] = `
 <DocumentFragment>
   @keyframes animation-0 {
   0%, 80%, 100% {
@@ -7613,8 +7613,8 @@ exports[`RichSelect should render correctly isLoading 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-loading"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -7635,7 +7635,7 @@ exports[`RichSelect should render correctly isLoading 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -7714,17 +7714,17 @@ exports[`RichSelect should render correctly isLoading 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly multi isClearable 1`] = `
+exports[`SelectInput should render correctly multi isClearable 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -8007,8 +8007,8 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-loading"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -8029,7 +8029,7 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+          class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -8106,17 +8106,17 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
       value="a"
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
+exports[`SelectInput should render correctly multi isClearable disabled 1`] = `
 <DocumentFragment>
   .cache-1n7poat-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -8377,8 +8377,8 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
 }
 
 <div
-    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-loading"
+    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -8399,7 +8399,7 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-au1o7r-StyledPlaceholder e1lzna4r2"
+          class="cache-au1o7r-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -8458,17 +8458,17 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
       </div>
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly multi isSearchable 1`] = `
+exports[`SelectInput should render correctly multi isSearchable 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -8742,8 +8742,8 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-loading"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -8764,7 +8764,7 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+          class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -8827,17 +8827,17 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
       value="a"
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
+exports[`SelectInput should render correctly multi isSearchable disabled 1`] = `
 <DocumentFragment>
   .cache-1n7poat-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -9098,8 +9098,8 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
 }
 
 <div
-    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-loading"
+    class=" cache-1n7poat-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-loading"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -9120,7 +9120,7 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-au1o7r-StyledPlaceholder e1lzna4r2"
+          class="cache-au1o7r-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -9179,17 +9179,17 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
       </div>
     </div>
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly with portal 1`] = `
+exports[`SelectInput should render correctly with portal 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -9448,8 +9448,8 @@ exports[`RichSelect should render correctly with portal 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -9470,7 +9470,7 @@ exports[`RichSelect should render correctly with portal 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -9535,10 +9535,10 @@ exports[`RichSelect should render correctly with portal 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
@@ -9548,7 +9548,7 @@ exports[`RichSelect should render correctly with portal 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RichSelect should render correctly without children 1`] = `
+exports[`SelectInput should render correctly without children 1`] = `
 <DocumentFragment>
   .cache-w1hmin-StyledContainer-container-StyledContainer {
   width: 100%;
@@ -9807,8 +9807,8 @@ exports[`RichSelect should render correctly without children 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-test"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-test"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -9829,7 +9829,7 @@ exports[`RichSelect should render correctly without children 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-1ulf5oa-StyledPlaceholder e1lzna4r2"
+          class="cache-1ulf5oa-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -9894,10 +9894,10 @@ exports[`RichSelect should render correctly without children 1`] = `
       value=""
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
diff --git a/packages/ui/src/components/RichSelect/__tests__/index.tsx b/packages/ui/src/components/SelectInput/__tests__/index.tsx
similarity index 52%
rename from packages/ui/src/components/RichSelect/__tests__/index.tsx
rename to packages/ui/src/components/SelectInput/__tests__/index.tsx
index 5b1d915436..426ac48bc1 100644
--- a/packages/ui/src/components/RichSelect/__tests__/index.tsx
+++ b/packages/ui/src/components/SelectInput/__tests__/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@emotion/react'
 import userEvent from '@testing-library/user-event'
-import { RichSelect } from '..'
+import { SelectInput } from '..'
 import {
   shouldMatchEmotionSnapshot,
   shouldMatchEmotionSnapshotWithPortal,
@@ -22,13 +22,13 @@ const customStyles: Record<string, CSSObject> = {
   valueContainer: {},
 }
 
-describe('RichSelect', () => {
+describe('SelectInput', () => {
   test('renders correctly uncontrolled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="uncontrolled">
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="uncontrolled">
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
       {
         transform: async node => {
           const input = node.getByRole('combobox')
@@ -39,7 +39,7 @@ describe('RichSelect', () => {
 
   test('renders correctly with emptyState', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="emptyState"
@@ -55,73 +55,73 @@ describe('RichSelect', () => {
 
   test('renders correctly with custom styles', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="uncontrolled"
         customStyle={() => customStyles}
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('renders correctly controlled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="controlled"
         value="test"
         onChange={() => {}}
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('renders correctly disabled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="disabled" disabled>
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="disabled" disabled>
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('renders correctly required', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="required" required>
-        <RichSelect.Option value="11">11:00</RichSelect.Option>
-        <RichSelect.Option value="12">12:00</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="required" required>
+        <SelectInput.Option value="11">11:00</SelectInput.Option>
+        <SelectInput.Option value="12">12:00</SelectInput.Option>
+      </SelectInput>,
     ))
   test('renders correctly timed', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="time" time>
-        <RichSelect.Option value="11">11:00</RichSelect.Option>
-        <RichSelect.Option value="12">12:00</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="time" time>
+        <SelectInput.Option value="11">11:00</SelectInput.Option>
+        <SelectInput.Option value="12">12:00</SelectInput.Option>
+      </SelectInput>,
     ))
   test('renders correctly timed with error', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="time-error"
         time
         error="Test error"
       >
-        <RichSelect.Option value="11">11:00</RichSelect.Option>
-        <RichSelect.Option value="12">12:00</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="11">11:00</SelectInput.Option>
+        <SelectInput.Option value="12">12:00</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('renders correctly with click', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test">
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="test">
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
       {
         transform: async node => {
           const input = node.getByRole('combobox')
@@ -132,13 +132,13 @@ describe('RichSelect', () => {
 
   test('renders correctly with click and option disabled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test">
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-        <RichSelect.Option value="c" disabled>
+      <SelectInput inputId="test" labelId="test-label" name="test">
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+        <SelectInput.Option value="c" disabled>
           Option C
-        </RichSelect.Option>
-      </RichSelect>,
+        </SelectInput.Option>
+      </SelectInput>,
       {
         transform: async node => {
           const input = node.getByRole('combobox')
@@ -149,17 +149,17 @@ describe('RichSelect', () => {
 
   test('renders correctly with click and options', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test">
-        <RichSelect.Option value="a" isFocused>
+      <SelectInput inputId="test" labelId="test-label" name="test">
+        <SelectInput.Option value="a" isFocused>
           Option A
-        </RichSelect.Option>
-        <RichSelect.Option value="b" isSelected>
+        </SelectInput.Option>
+        <SelectInput.Option value="b" isSelected>
           Option B
-        </RichSelect.Option>
-        <RichSelect.Option value="c" disabled>
+        </SelectInput.Option>
+        <SelectInput.Option value="c" disabled>
           Option C
-        </RichSelect.Option>
-      </RichSelect>,
+        </SelectInput.Option>
+      </SelectInput>,
       {
         transform: async node => {
           const input = node.getByRole('combobox')
@@ -169,17 +169,17 @@ describe('RichSelect', () => {
     ))
   test('renders correctly disabled with click', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test" disabled>
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="test" disabled>
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
   test('renders correctly default values with click', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test" value="a">
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="test" value="a">
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
       {
         transform: async node => {
           const input = node.getByRole('combobox')
@@ -190,7 +190,7 @@ describe('RichSelect', () => {
 
   test('renders correctly animated', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="animated"
@@ -200,24 +200,24 @@ describe('RichSelect', () => {
         value="a"
         onChange={() => {}}
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
   test('renders correctly multi', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="multi" isMulti>
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-        <RichSelect.Option value="c">Option C</RichSelect.Option>
-        <RichSelect.Option value="d">Option D</RichSelect.Option>
-        <RichSelect.Option value="e">Option E</RichSelect.Option>
-        <RichSelect.Option value="f">Option F</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="multi" isMulti>
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+        <SelectInput.Option value="c">Option C</SelectInput.Option>
+        <SelectInput.Option value="d">Option D</SelectInput.Option>
+        <SelectInput.Option value="e">Option E</SelectInput.Option>
+        <SelectInput.Option value="f">Option F</SelectInput.Option>
+      </SelectInput>,
     ))
   test('renders correctly multi disabled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="multi-disabled"
@@ -225,28 +225,28 @@ describe('RichSelect', () => {
         isMulti
         disabled
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('should render correctly multi isClearable', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="loading"
         value={{ label: 'Option A', value: 'a' }}
         isClearable
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('should render correctly multi isClearable disabled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="loading"
@@ -254,27 +254,27 @@ describe('RichSelect', () => {
         isClearable
         disabled
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
   test('should render correctly multi isSearchable', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="loading"
         value={{ label: 'Option A', value: 'a' }}
         isSearchable
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('should render correctly multi isSearchable disabled', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="loading"
@@ -282,42 +282,42 @@ describe('RichSelect', () => {
         isSearchable
         disabled
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('should render correctly isLoading', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="loading" isLoading>
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+      <SelectInput inputId="test" labelId="test-label" name="loading" isLoading>
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
 
   test('should render correctly with portal', () =>
     shouldMatchEmotionSnapshotWithPortal(
       <>
-        <RichSelect
+        <SelectInput
           inputId="test"
           labelId="test-label"
           name="test"
           menuPortalTarget={document.getElementById('test-portal')}
         >
-          <RichSelect.Option value="a">Option A</RichSelect.Option>
-          <RichSelect.Option value="b">Option B</RichSelect.Option>
-        </RichSelect>
+          <SelectInput.Option value="a">Option A</SelectInput.Option>
+          <SelectInput.Option value="b">Option B</SelectInput.Option>
+        </SelectInput>
         <div id="test-portal" />
       </>,
     ))
 
   test('should render correctly without children', () =>
     shouldMatchEmotionSnapshotWithPortal(
-      <RichSelect inputId="test" labelId="test-label" name="test" />,
+      <SelectInput inputId="test" labelId="test-label" name="test" />,
     ))
   test('should render correctly custom isLoading', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect
+      <SelectInput
         inputId="test"
         labelId="test-label"
         name="test-loading"
@@ -326,22 +326,22 @@ describe('RichSelect', () => {
           LoadingIndicator: () => <div>Loading...</div>,
         }}
       >
-        <RichSelect.Option value="a">Option A</RichSelect.Option>
-        <RichSelect.Option value="b">Option B</RichSelect.Option>
-      </RichSelect>,
+        <SelectInput.Option value="a">Option A</SelectInput.Option>
+        <SelectInput.Option value="b">Option B</SelectInput.Option>
+      </SelectInput>,
     ))
   test('should render correctly description and inlineDescription', () =>
     shouldMatchEmotionSnapshot(
-      <RichSelect inputId="test" labelId="test-label" name="test-loading">
-        <RichSelect.Option
+      <SelectInput inputId="test" labelId="test-label" name="test-loading">
+        <SelectInput.Option
           value="a"
           inlineDescription="This is an inline description"
         >
           Option A
-        </RichSelect.Option>
-        <RichSelect.Option value="b" description="This is a description">
+        </SelectInput.Option>
+        <SelectInput.Option value="b" description="This is a description">
           Option B
-        </RichSelect.Option>
-      </RichSelect>,
+        </SelectInput.Option>
+      </SelectInput>,
     ))
 })
diff --git a/packages/ui/src/components/RichSelect/index.tsx b/packages/ui/src/components/SelectInput/index.tsx
similarity index 96%
rename from packages/ui/src/components/RichSelect/index.tsx
rename to packages/ui/src/components/SelectInput/index.tsx
index 1e33ae9b3c..271e846b38 100644
--- a/packages/ui/src/components/RichSelect/index.tsx
+++ b/packages/ui/src/components/SelectInput/index.tsx
@@ -94,7 +94,7 @@ type SelectStyleMap = Record<string, SelectStyleFactory>
 type SelectStyleProps = {
   error?: string
   /**
-   * Custom styles of the RichSelect. See [React select documentation](https://react-select.com/styles)
+   * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
    */
   customStyle: (
     state: SelectProps & WithSelectProps,
@@ -347,7 +347,7 @@ const SelectContainer = (
 
   return (
     <StyledContainer
-      data-testid={`rich-select-${name}`}
+      data-testid={`select-input-${name}`}
       additionalStyles={getStyles?.('container', props)}
       isDisabled={isDisabled}
       className={[className, selectPropsClassName].filter(Boolean).join(' ')}
@@ -640,7 +640,7 @@ type SelectComponents = SelectProps['components']
 
 type StateManagedSelect = typeof Select
 
-type RichSelectProps = SelectProps &
+type SelectInputProps = SelectProps &
   SelectStyleProps & {
     /**
      * Name of the animation
@@ -654,7 +654,7 @@ type RichSelectProps = SelectProps &
     readOnly?: boolean
     innerRef?: ForwardedRef<StateManagedSelect>
     /**
-     * Custom components of the RichSelect. See [React select documentation](https://react-select.com/components)
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
      */
     customComponents?: SelectProps['components']
     children: ReactNode
@@ -663,7 +663,7 @@ type RichSelectProps = SelectProps &
 
 const defaultCustomStyle = () => ({})
 
-const FwdRichSelect = ({
+const FwdSelectInput = ({
   animation = 'pulse',
   animationDuration = 1000,
   animationOnChange = false,
@@ -691,7 +691,7 @@ const FwdRichSelect = ({
   isLoading,
   required,
   emptyState,
-}: Partial<RichSelectProps>) => {
+}: Partial<SelectInputProps>) => {
   const id = useId()
   const inputId = inputIdProp ?? id
   const theme = useTheme()
@@ -773,14 +773,14 @@ type OptionComponent = (
   props: Partial<OptionProps<SelectOption> & SelectOption>,
 ) => JSX.Element
 
-export const RichSelect = forwardRef(
-  (props: RichSelectProps, ref: ForwardedRef<StateManagedSelect>) => (
-    <FwdRichSelect innerRef={ref} {...props} />
+export const SelectInput = forwardRef(
+  (props: SelectInputProps, ref: ForwardedRef<StateManagedSelect>) => (
+    <FwdSelectInput innerRef={ref} {...props} />
   ),
-) as ForwardRefExoticComponent<Partial<RichSelectProps>> & {
+) as ForwardRefExoticComponent<Partial<SelectInputProps>> & {
   Option: OptionComponent
 }
 
-RichSelect.displayName = 'RichSelect'
+SelectInput.displayName = 'SelectInput'
 
-RichSelect.Option = Option as OptionComponent
+SelectInput.Option = Option as OptionComponent
diff --git a/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx b/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx
index a9ff0bc8df..b5436e8137 100644
--- a/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx
+++ b/packages/ui/src/components/SelectableCard/__stories__/Children.stories.tsx
@@ -5,21 +5,21 @@ import type { MultiValue, SingleValue } from 'react-select'
 import { SelectableCard } from '..'
 import { Badge } from '../../Badge'
 import { Checkbox } from '../../Checkbox'
-import type { SelectOption } from '../../RichSelect'
-import { RichSelect } from '../../RichSelect'
+import type { SelectOption } from '../../SelectInput'
+import { SelectInput } from '../../SelectInput'
 import { Stack } from '../../Stack'
 
 export const Children: Story = () => {
   const [value, onChange] = useState('label-9')
-  const [richSelectValue, richSelectOnChange] = useState<SelectOption>({
+  const [selectInputValue, selectInputOnChange] = useState<SelectOption>({
     label: 'Option 1',
     value: 'option-1',
   })
 
-  const onRichSelectSelectChange = (
+  const onSelectInputSelectChange = (
     newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
   ) => {
-    richSelectOnChange(newValue as SelectOption)
+    selectInputOnChange(newValue as SelectOption)
   }
 
   return (
@@ -62,9 +62,9 @@ export const Children: Story = () => {
             First element
           </Checkbox>
 
-          <RichSelect
-            value={richSelectValue}
-            onChange={onRichSelectSelectChange}
+          <SelectInput
+            value={selectInputValue}
+            onChange={onSelectInputSelectChange}
             options={[
               { label: 'Option 1', value: 'option-1' },
               { label: 'Option 2', value: 'option-2' },
diff --git a/packages/ui/src/components/TimeInput/__stories__/Controlled.stories.tsx b/packages/ui/src/components/TimeInput/__stories__/Controlled.stories.tsx
index 6c30b3585d..a8943fdc4e 100644
--- a/packages/ui/src/components/TimeInput/__stories__/Controlled.stories.tsx
+++ b/packages/ui/src/components/TimeInput/__stories__/Controlled.stories.tsx
@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import { useState } from 'react'
 import { TimeInput } from '..'
-import type { SelectOption } from '../../RichSelect'
+import type { SelectOption } from '../../SelectInput'
 
 const isSafeValue = (value: unknown): value is SelectOption =>
   value !== null && !Array.isArray(value)
diff --git a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
index 9d0577f4f8..cd72faeefe 100644
--- a/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
@@ -287,8 +287,8 @@ exports[`TimeInput renders correctly with base props 1`] = `
 }
 
 <div
-    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1lzna4r5"
-    data-testid="rich-select-timeinput-test-0"
+    class=" cache-w1hmin-StyledContainer-container-StyledContainer e1o1qsrh5"
+    data-testid="select-input-timeinput-test-0"
   >
     <span
       class="cache-1f43avz-a11yText-A11yText"
@@ -309,7 +309,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
         <label
           aria-live="assertive"
           as="label"
-          class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+          class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
           for="test"
         >
           Select...
@@ -356,7 +356,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
           >
             <hr
               aria-orientation="vertical"
-              class="e1lzna4r6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
+              class="e1o1qsrh6 cache-bi3giz-StyledHr-StyledSeparator eoti1h20"
               role="separator"
             />
             <svg
@@ -377,10 +377,10 @@ exports[`TimeInput renders correctly with base props 1`] = `
       value="00:00"
     />
     <div
-      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+      class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
     >
       <div
-        class="cache-1k8ev0-StyledError e1lzna4r4"
+        class="cache-1k8ev0-StyledError e1o1qsrh4"
       />
     </div>
   </div>
diff --git a/packages/ui/src/components/TimeInput/index.tsx b/packages/ui/src/components/TimeInput/index.tsx
index 4af76cf4b1..7dc6f19828 100644
--- a/packages/ui/src/components/TimeInput/index.tsx
+++ b/packages/ui/src/components/TimeInput/index.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react'
-import { RichSelect } from '../RichSelect'
+import { SelectInput } from '../SelectInput'
 
 const hours = [
   '00:00',
@@ -197,7 +197,7 @@ const defaultValue = {
   value: '00:00',
 }
 
-type TimeInputProps = Partial<ComponentProps<typeof RichSelect>> & {
+type TimeInputProps = Partial<ComponentProps<typeof SelectInput>> & {
   schedule?: ScheduleType
 }
 
@@ -210,7 +210,7 @@ export const TimeInput: TimeInputType = ({
   schedule = 'hours',
   ...props
 }: TimeInputProps = {}) => (
-  <RichSelect {...props} time value={value} options={options(schedule)} />
+  <SelectInput {...props} time value={value} options={options(schedule)} />
 )
 
 TimeInput.options = options
diff --git a/packages/ui/src/components/UnitInput/__stories__/index.stories.tsx b/packages/ui/src/components/UnitInput/__stories__/index.stories.tsx
index 037c46e59b..acbf8b2bed 100644
--- a/packages/ui/src/components/UnitInput/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/UnitInput/__stories__/index.stories.tsx
@@ -7,7 +7,7 @@ export default {
     docs: {
       description: {
         component:
-          'UnitInput is a component made out of 2 components: a **TextInput** and a **RichSelect**.',
+          'UnitInput is a component made out of 2 components: a **TextInput** and a **SelectInput**.',
       },
     },
   },
diff --git a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
index 00ccbc6016..51799ca192 100644
--- a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
@@ -113,7 +113,7 @@ exports[`UnitInput renders with custom options 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -123,16 +123,16 @@ exports[`UnitInput renders with custom options 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -424,8 +424,8 @@ exports[`UnitInput renders with custom options 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -446,7 +446,7 @@ exports[`UnitInput renders with custom options 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r1:"
           >
             Select...
@@ -509,10 +509,10 @@ exports[`UnitInput renders with custom options 1`] = `
         value="kb"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -633,7 +633,7 @@ exports[`UnitInput renders with default props 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -643,16 +643,16 @@ exports[`UnitInput renders with default props 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -944,8 +944,8 @@ exports[`UnitInput renders with default props 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -966,7 +966,7 @@ exports[`UnitInput renders with default props 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r0:"
           >
             Select...
@@ -1029,10 +1029,10 @@ exports[`UnitInput renders with default props 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -1153,7 +1153,7 @@ exports[`UnitInput renders with defaultOption 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -1163,16 +1163,16 @@ exports[`UnitInput renders with defaultOption 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -1464,8 +1464,8 @@ exports[`UnitInput renders with defaultOption 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -1486,7 +1486,7 @@ exports[`UnitInput renders with defaultOption 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r4:"
           >
             Select...
@@ -1549,10 +1549,10 @@ exports[`UnitInput renders with defaultOption 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -1673,7 +1673,7 @@ exports[`UnitInput renders with defaultValue 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -1683,16 +1683,16 @@ exports[`UnitInput renders with defaultValue 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -1984,8 +1984,8 @@ exports[`UnitInput renders with defaultValue 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -2006,7 +2006,7 @@ exports[`UnitInput renders with defaultValue 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r3:"
           >
             Select...
@@ -2069,10 +2069,10 @@ exports[`UnitInput renders with defaultValue 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -2198,7 +2198,7 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
   padding-top: 2px;
 }
 
-.cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   pointer-events: initial;
   pointer-events: none;
@@ -2210,16 +2210,16 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
   height: 40px;
 }
 
-.cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -2497,8 +2497,8 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-x52pnu-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1h7hx7s-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -2519,7 +2519,7 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-au1o7r-StyledPlaceholder e1lzna4r2"
+            class="cache-au1o7r-StyledPlaceholder e1o1qsrh2"
             for=":r9:"
           >
             Select...
@@ -2578,10 +2578,10 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
         </div>
       </div>
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -2702,7 +2702,7 @@ exports[`UnitInput renders with min max 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -2712,16 +2712,16 @@ exports[`UnitInput renders with min max 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -3013,8 +3013,8 @@ exports[`UnitInput renders with min max 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -3035,7 +3035,7 @@ exports[`UnitInput renders with min max 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r2:"
           >
             Select...
@@ -3098,10 +3098,10 @@ exports[`UnitInput renders with min max 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -3222,7 +3222,7 @@ exports[`UnitInput renders with size large 1`] = `
   padding-top: 2px;
 }
 
-.cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -3232,16 +3232,16 @@ exports[`UnitInput renders with size large 1`] = `
   height: 48px;
 }
 
-.cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -3533,8 +3533,8 @@ exports[`UnitInput renders with size large 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-48dgaz-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-default-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-10i11ug-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-default-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -3555,7 +3555,7 @@ exports[`UnitInput renders with size large 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r5:"
           >
             Select...
@@ -3618,10 +3618,10 @@ exports[`UnitInput renders with size large 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -3742,7 +3742,7 @@ exports[`UnitInput renders with size medium 1`] = `
   padding-top: 2px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -3752,16 +3752,16 @@ exports[`UnitInput renders with size medium 1`] = `
   height: 40px;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -4053,8 +4053,8 @@ exports[`UnitInput renders with size medium 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-19pbbcy-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-default-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1hutwle-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-default-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -4075,7 +4075,7 @@ exports[`UnitInput renders with size medium 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r6:"
           >
             Select...
@@ -4138,10 +4138,10 @@ exports[`UnitInput renders with size medium 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -4262,7 +4262,7 @@ exports[`UnitInput renders with size small 1`] = `
   padding-top: 2px;
 }
 
-.cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -4272,16 +4272,16 @@ exports[`UnitInput renders with size small 1`] = `
   height: 32px;
 }
 
-.cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -4573,8 +4573,8 @@ exports[`UnitInput renders with size small 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-1sprnb0-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-default-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-1q2d7vh-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-default-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -4595,7 +4595,7 @@ exports[`UnitInput renders with size small 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r7:"
           >
             Select...
@@ -4658,10 +4658,10 @@ exports[`UnitInput renders with size small 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
@@ -4669,7 +4669,7 @@ exports[`UnitInput renders with size small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
+exports[`UnitInput renders with textBoxWidth and selectInputWidth 1`] = `
 <DocumentFragment>
   .cache-1doeye3-CustomTextInput input {
   border-radius: 4px 0 0 4px;
@@ -4782,7 +4782,7 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
   padding-top: 2px;
 }
 
-.cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect {
+.cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput {
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -4792,16 +4792,16 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
   height: 40px;
 }
 
-.cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
   box-shadow: none;
 }
 
-.cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:hover,
-.cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect:focus {
+.cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:hover,
+.cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-color: #4f0599;
@@ -5093,8 +5093,8 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
       </div>
     </div>
     <div
-      class="e1ixhdo10 e1ixhdo10 cache-11ws1p9-StyledContainer-container-StyledContainer-CustomRichSelect-CustomRichSelect e1lzna4r5"
-      data-testid="rich-select-test-unit"
+      class="e1ixhdo10 e1ixhdo10 cache-qr3lfr-StyledContainer-container-StyledContainer-CustomSelectInput-CustomSelectInput e1o1qsrh5"
+      data-testid="select-input-test-unit"
     >
       <span
         class="cache-1f43avz-a11yText-A11yText"
@@ -5115,7 +5115,7 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
           <label
             aria-live="assertive"
             as="label"
-            class="cache-12w4gz-StyledPlaceholder e1lzna4r2"
+            class="cache-12w4gz-StyledPlaceholder e1o1qsrh2"
             for=":r8:"
           >
             Select...
@@ -5178,10 +5178,10 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
         value="hours"
       />
       <div
-        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1lzna4r3"
+        class="cache-fojapx-Expandable-ExpandableWithHiddenOverflow e1o1qsrh3"
       >
         <div
-          class="cache-1k8ev0-StyledError e1lzna4r4"
+          class="cache-1k8ev0-StyledError e1o1qsrh4"
         />
       </div>
     </div>
diff --git a/packages/ui/src/components/UnitInput/__tests__/index.tsx b/packages/ui/src/components/UnitInput/__tests__/index.tsx
index ac6a5c73d9..0d66d00e9f 100644
--- a/packages/ui/src/components/UnitInput/__tests__/index.tsx
+++ b/packages/ui/src/components/UnitInput/__tests__/index.tsx
@@ -55,9 +55,9 @@ describe('UnitInput', () => {
       shouldMatchEmotionSnapshot(<UnitInput name="default" size={size} />)),
   )
 
-  test(`renders with textBoxWidth and richSelectWidth`, () =>
+  test(`renders with textBoxWidth and selectInputWidth`, () =>
     shouldMatchEmotionSnapshot(
-      <UnitInput name="test" richSelectWidth={100} textBoxWidth={100} />,
+      <UnitInput name="test" selectInputWidth={100} textBoxWidth={100} />,
     ))
 
   test(`renders with disabled and placeHolder`, () =>
@@ -65,7 +65,7 @@ describe('UnitInput', () => {
       <UnitInput name="test" placeholder="100" disabled />,
     ))
 
-  test(`renders with RichSelect update`, async () => {
+  test(`renders with SelectInput update`, async () => {
     const node = renderWithTheme(<UnitInput name="test" />)
 
     // Role textbox is only for the searchable input
@@ -74,12 +74,12 @@ describe('UnitInput', () => {
     await userEvent.type(valueContainer, 'weeks{enter}')
     await waitFor(() => expect(valueContainer.value).toBe(''))
 
-    const richSelect = node.getByTestId('rich-select-test-unit')
-    // Real rich select value is inside a hidden input with the name put in RichSelect props.
-    const richSelectInputHidden = richSelect.querySelector(
+    const selectInput = node.getByTestId('select-input-test-unit')
+    // Real select input value is inside a hidden input with the name put in SelectInput props.
+    const selectInputInputHidden = selectInput.querySelector(
       'input[type="hidden"]',
     ) as HTMLInputElement
-    await waitFor(() => expect(richSelectInputHidden?.value).toBe('weeks'))
+    await waitFor(() => expect(selectInputInputHidden?.value).toBe('weeks'))
   })
 })
 
diff --git a/packages/ui/src/components/UnitInput/index.tsx b/packages/ui/src/components/UnitInput/index.tsx
index 5da22764df..b0252277b8 100644
--- a/packages/ui/src/components/UnitInput/index.tsx
+++ b/packages/ui/src/components/UnitInput/index.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
 import type { ComponentProps } from 'react'
 import { useEffect, useState } from 'react'
-import type { SelectOption } from '../RichSelect'
-import { RichSelect } from '../RichSelect'
+import type { SelectOption } from '../SelectInput'
+import { SelectInput } from '../SelectInput'
 import { TextInput } from '../TextInput'
 
 export const sizesHeight: Record<string, number> = {
@@ -27,7 +27,7 @@ const CustomTextInput = styled(TextInput)`
   }
 `
 
-const CustomRichSelect = styled(RichSelect)<{
+const CustomSelectInput = styled(SelectInput)<{
   width?: number
   height?: number
 }>`
@@ -80,7 +80,7 @@ type UnitInputValue = {
 }
 
 type UnitInputProps = Omit<
-  Partial<ComponentProps<typeof RichSelect>>,
+  Partial<ComponentProps<typeof SelectInput>>,
   'defaultValue'
 > & {
   name?: string
@@ -93,13 +93,13 @@ type UnitInputProps = Omit<
    * @param {{value, unit}} UnitInputValue The value containing the unit select and the value in the TextInput
    */
   onChange?: (value: UnitInputValue) => void
-  /** Possible RichSelect options */
+  /** Possible SelectInput options */
   options?: SelectOption[]
   placeholder?: string
-  richSelectWidth?: number
+  selectInputWidth?: number
   size?: string
   textBoxWidth?: number
-  /** The default selected option in the RichSelect */
+  /** The default selected option in the SelectInput */
   defaultOption?: SelectOption
 }
 
@@ -112,7 +112,7 @@ export const UnitInput = ({
   placeholder = '0',
   onChange,
   textBoxWidth = 100,
-  richSelectWidth = 200,
+  selectInputWidth = 200,
   disabled = false,
   options = defaultOptionValues,
   defaultOption,
@@ -141,8 +141,8 @@ export const UnitInput = ({
         }}
         disabled={disabled}
       />
-      <CustomRichSelect
-        width={richSelectWidth}
+      <CustomSelectInput
+        width={selectInputWidth}
         noTopLabel
         height={sizesHeight[size]}
         id={`${name}-unit`}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index a37ca49436..12b874030b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -35,7 +35,7 @@ export { Placeholder } from './Placeholder'
 export { ProgressBar } from './ProgressBar'
 export { ProgressionButton } from './ProgressionButton'
 export { Radio } from './Radio'
-export { RichSelect } from './RichSelect'
+export { SelectInput } from './SelectInput'
 export { ScrollView } from './ScrollView'
 export { SelectableCard } from './SelectableCard'
 export { SelectNumber } from './SelectNumber'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 193481c6cc..7de9fd6c4b 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -39,9 +39,9 @@ export {
   ProgressBar,
   ProgressionButton,
   Radio,
-  RichSelect,
   ScrollView,
   SelectableCard,
+  SelectInput,
   SelectNumber,
   Separator,
   Sphere,
diff --git a/website/src/pages/home/AdvancedUseCases.tsx b/website/src/pages/home/AdvancedUseCases.tsx
index 6f152d77ab..d31c30d654 100644
--- a/website/src/pages/home/AdvancedUseCases.tsx
+++ b/website/src/pages/home/AdvancedUseCases.tsx
@@ -47,7 +47,7 @@ import {
   Button,
   Checkbox,
   Container,
-  RichSelect,
+  SelectInput,
   TextBox,
   Text,
 } from "@scaleway/ui"
@@ -70,11 +70,11 @@ const App = () => (
         />
       </StyledFieldContainer>
       <StyledFieldContainer>
-        <RichSelect name="language" placeholder="Your favourite language">
-          <RichSelect.Option value="javascript1">Javascript</RichSelect.Option>
-          <RichSelect.Option value="javascript2">Javascript</RichSelect.Option>
-          <RichSelect.Option value="javascript3">Javascript</RichSelect.Option>
-        </RichSelect>
+        <SelectInput name="language" placeholder="Your favourite language">
+          <SelectInput.Option value="javascript1">Javascript</SelectInput.Option>
+          <SelectInput.Option value="javascript2">Javascript</SelectInput.Option>
+          <SelectInput.Option value="javascript3">Javascript</SelectInput.Option>
+        </SelectInput>
       </StyledFieldContainer>
       <StyledFieldContainer>
         <Checkbox name="terms">I agree with this form</Checkbox>