diff --git a/documents/src/pages/elements/select.md b/documents/src/pages/elements/select.md
index e3f0e84e5d..52f0881404 100644
--- a/documents/src/pages/elements/select.md
+++ b/documents/src/pages/elements/select.md
@@ -22,41 +22,26 @@ ef-select {
 ```
 ```html
 <section>
-  <ef-select placeholder="Pick item..." opened>
-    <ef-item type="header">Drinks</ef-item>
-    <ef-item value="1">Cola</ef-item>
-    <ef-item value="2" disabled>Apple Juice</ef-item>
-    <ef-item value="3">Iced Tea</ef-item>
-    <ef-item type="header">Ice Cream</ef-item>
-    <ef-item value="4">Vanilla</ef-item>
-    <ef-item value="5">Chocolate</ef-item>
-    <ef-item value="6">Honey &amp; Walnut</ef-item>
-    <ef-item value="7">Raspberry</ef-item>
-  </ef-select>
-  <ef-select placeholder="Disabled..." disabled></ef-select>
-  <ef-select placeholder="Default selected...">
-    <ef-item type="header">Drinks</ef-item>
-    <ef-item value="1">Cola</ef-item>
-    <ef-item value="2" disabled>Apple Juice</ef-item>
-    <ef-item selected value="3">Iced Tea</ef-item>
-    <ef-item type="header">Ice Cream</ef-item>
-    <ef-item value="4">Vanilla</ef-item>
-    <ef-item value="5">Chocolate</ef-item>
-    <ef-item value="6">Honey &amp; Walnut</ef-item>
-    <ef-item value="7">Raspberry</ef-item>
-  </ef-select>
-  <ef-select disabled>
-    <ef-item selected>Lemonade</ef-item>
-  </ef-select>
+  <label for="desserts">Desserts </label>
+  <ef-select id="desserts" opened>
+    <ef-item role="presentation" type="header">Drinks</ef-item>
+    <ef-item role="option" value="cola">Cola</ef-item>
+    <ef-item role="option" value="apple-juice" disabled>Apple Juice</ef-item>
+    <ef-item role="option" value="iced-tea">Iced Tea</ef-item>
+    <ef-item role="presentation" type="header">Ice Cream</ef-item>
+    <ef-item role="option" value="vanilla-ice-cream">Vanilla Ice Cream</ef-item>
+    <ef-item role="option" value="chocolate-ice-cream">Chocolate Ice Cream</ef-item>
+    <ef-item role="option" value="honey-ice-cream">Honey &amp; Walnut Ice Cream</ef-item>
+    <ef-item role="option" value="raspberry-ice-cream" selected>Raspberry Ice Cream</ef-item>
 </section>
 ```
 ::
 
 ## Usage
 
-`ef-select` expands upon the native `select` element, providing a fully themeable dropdown element.
+`ef-select` expands upon the native `select` element, providing a fully themeable dropdown element. There are 2 ways to create options for `ef-select`.
 
-Choices can be defined using `ef-item`.
+### Using `ef-item`
 
 ::
 ```javascript
@@ -65,84 +50,75 @@ Choices can be defined using `ef-item`.
 ```css
 section {
   height: 155px;
-  padding: 0 3px;
+}
+ef-select {
+  width: 160px;
+  margin-left: 4px;
 }
 ```
 ```html
 <section>
-  <ef-select>
-    <ef-item value="1">Cola</ef-item>
-    <ef-item value="2">Lemonade</ef-item>
-    <ef-item value="3">Orange Juice</ef-item>
-    <ef-item value="4" disabled>Apple Juice</ef-item>
-    <ef-item value="5">Iced Tea</ef-item>
+  <label for="fruits">Favourite fruit: </label>
+  <ef-select id="fruits">
+    <ef-item role="option" value="apple">Apple</ef-item>
+    <ef-item role="option" value="papaya">Papaya</ef-item>
+    <ef-item role="option" value="banana">Banana</ef-item>
+    <ef-item role="option" value="orange">Orange</ef-item>
   </ef-select>
 </section>
 ```
 ::
 
 ```html
-<ef-select>
-  <ef-item value="1">Cola</ef-item>
-  <ef-item value="2">Lemonade</ef-item>
-  <ef-item value="3">Orange Juice</ef-item>
-  <ef-item value="4" disabled>Apple Juice</ef-item>
-  <ef-item value="5">Iced Tea</ef-item>
+<label for="fruits">Favourite fruit: </label>
+<ef-select id="fruits">
+  <ef-item role="option" value="apple">Apple</ef-item>
+  <ef-item role="option" value="papaya">Papaya</ef-item>
+  <ef-item role="option" value="banana">Banana</ef-item>
+  <ef-item role="option" value="orange">Orange</ef-item>
 </ef-select>
 ```
 
-## Data property interface
+### Using `data` property
 
 The `data` property of the `ef-select` uses the [SelectData](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/elements/src/select/helpers/types.ts) type for its data items. Each item is `ItemData` type extended from [DataItem](./custom-components/utils/data-management#data-item).
 
-## Categorize into groups
-
-Groups are also defined using `ef-item`. The only difference is that we add a `type="header"` attribute onto the element.
-
-::
 ```javascript
-::select::
-```
-```css
-section {
-  height: 250px;
-  padding: 0 3px;
-}
-```
-```html
-<section>
-  <ef-select>
-  <ef-item type="header">Drinks</ef-item>
-  <ef-item value="1">Cola</ef-item>
-  <ef-item value="2">Lemonade</ef-item>
-  <ef-item value="3">Water</ef-item>
-  <ef-item type="header">Ice Cream</ef-item>
-  <ef-item value="4">Vanilla</ef-item>
-  <ef-item value="5">Chocolate</ef-item>
-  <ef-item value="6">Strawberry</ef-item>
-  <ef-item value="7">Raspberry</ef-item>
-  </ef-select>
-</section>
-```
-::
-
-``` html
-<ef-select>
-  <ef-item type="header">Drinks</ef-item>
-  <ef-item value="1">Cola</ef-item>
-  <ef-item value="2">Lemonade</ef-item>
-  <ef-item value="3">Water</ef-item>
-  <ef-item type="header">Ice Cream</ef-item>
-  <ef-item value="4">Vanilla</ef-item>
-  <ef-item value="5">Chocolate</ef-item>
-  <ef-item value="6">Strawberry</ef-item>
-  <ef-item value="7">Raspberry</ef-item>
-</ef-select>
+const select = document.querySelector('ef-select');
+const data = [
+  {
+    label: 'Drinks',
+    type: 'header'
+  },
+  {
+    label: 'Tea',
+    value: 'tea'
+  },
+  {
+    label: 'Beer',
+    value: 'beer',
+    selected: true
+  },
+  {
+    label: 'Ice Cream',
+    type: 'header'
+  },
+  {
+    label: 'Vanilla',
+    value: 'vanilla',
+    disabled: true
+  },
+  {
+    label: 'Strawberry',
+    value: 'Strawberry'
+  }
+];
+select.data = data;
 ```
 
-## Adding a placeholder
+## Categorize into groups
 
-Once you have your choices and groups defined, you can then add placeholder text to help users understand what the list contains and what their choice is for.
+Groups are also defined using `ef-item`. The only difference is that we add a `type="header"` attribute onto the element.
 
 ::
 ```javascript
@@ -150,26 +126,37 @@ Once you have your choices and groups defined, you can then add placeholder text
 ```
 ```css
 section {
-  height: 155px;
-  padding: 0 3px;
+  height: 275px;
+}
+ef-select {
+  margin-left: 4px;
 }
 ```
 ```html
 <section>
-  <ef-select placeholder="Choose your refreshment...">
-    <ef-item value="1">Cola</ef-item>
-    <ef-item value="2">Lemonade</ef-item>
-    <ef-item value="3">Orange Juice</ef-item>
-    <ef-item value="4">Apple Juice</ef-item>
-    <ef-item value="5">Iced Tea</ef-item>
+  <label for="countries">Country of residence</label>
+  <ef-select id="countries">
+    <ef-item role="presentation" type="header">Asia</ef-item>
+    <ef-item role="option" value="japan">Japan</ef-item>
+    <ef-item role="option" value="singapore">Singapore</ef-item>
+    <ef-item role="option" value="thailand" selected>Thailand</ef-item>
+    <ef-item role="presentation" type="header">Europe</ef-item>
+    <ef-item role="option" value="london">London</ef-item>
+    <ef-item role="option" value="italy">Italy</ef-item>
+    <ef-item role="presentation" type="header">America</ef-item>
+    <ef-item role="option" value="usa">USA</ef-item>
   </ef-select>
 </section>
 ```
 ::
 
 ``` html
-<ef-select placeholder="Choose your refreshment...">
+<ef-select>
+  <ef-item role="presentation" type="header">Asia</ef-item>
   ...
+  <ef-item role="presentation" type="header">Europe</ef-item>
+  ...
+</ef-select>
 ```
 
 ## Selecting a default option
@@ -184,21 +171,19 @@ Only one option can be selected at a time.
 ```
 ```css
 section {
-  height: 225px;
-  padding: 0 3px;
+  height: 130px;
+}
+ef-select {
+  margin-left: 4px;
 }
 ```
 ```html
 <section>
-  <ef-select placeholder="Choose your refreshment...">
-    <ef-item type="header">Drinks</ef-item>
-    <ef-item value="1">Cola</ef-item>
-    <ef-item value="2">Lemonade</ef-item>
-    <ef-item value="6" selected>Water</ef-item>
-    <ef-item type="header">Ice Cream</ef-item>
-    <ef-item value="7">Vanilla</ef-item>
-    <ef-item value="14">Strawberry</ef-item>
-    <ef-item value="15">Raspberry</ef-item>
+  <label for="color">Color</label>
+  <ef-select id="color">
+    <ef-item role="option" value="black">Black</ef-item>
+    <ef-item role="option" value="blue">Blue</ef-item>
+    <ef-item role="option" value="green" selected>Green</ef-item>
   </ef-select>
 </section>
 ```
@@ -206,7 +191,7 @@ section {
 
 ```html
 ...
-  <ef-item selected>Water</ef-item>
+  <ef-item role="option" value="green" selected>Green</ef-item>
 ...
 ```
 
@@ -220,20 +205,22 @@ Options can be disabled by adding a `disabled` attribute to the options you wish
 ```
 ```css
 section {
-  height: 200px;
-  padding: 0 3px;
+  height: 170px;
+}
+ef-select {
+  margin-left: 4px;
 }
 ```
 ```html
 <section>
-  <ef-select placeholder="Choose your refreshment...">
-    <ef-item type="header">Drinks</ef-item>
-    <ef-item value="4" disabled>Apple Juice</ef-item>
-    <ef-item value="5" disabled>Iced Tea</ef-item>
-    <ef-item value="6" disabled>Water</ef-item>
-    <ef-item type="header">Ice Cream</ef-item>
-    <ef-item value="7">Vanilla</ef-item>
-    <ef-item value="8">Chocolate</ef-item>
+  <label for="size">Size</label>
+  <ef-select id="size" placeholder="Choose your size">
+    <ef-item role="option" value="xs">XS</ef-item>
+    <ef-item role="option" value="s">S</ef-item>
+    <ef-item role="option" value="m" disabled>M (Out of stock)</ef-item>
+    <ef-item role="option" value="l">L</ef-item>
+    <ef-item role="option" value="xl">XL</ef-item>
+    <ef-item role="option" value="xxl">2XL</ef-item>
   </ef-select>
 </section>
 ```
@@ -241,93 +228,10 @@ section {
 
 ```html
 ...
-  <ef-item disabled>Iced Tea</ef-item>
-  <ef-item disabled>Water</ef-item>
+  <ef-item role="option" value="m" disabled>M (Out of stock)</ef-item>
 ...
 ```
 
-## Configuring options using data object
-
-Depending on your usage, you may wish to configure `ef-select` using its `data` object.
-
-::
-```javascript
-::select::
-const el = document.querySelector("ef-select");
-el.data = [
-  {
-    label: 'Drinks',
-    type: 'header'
-  },
-  {
-    label: 'Tea',
-    value: 'tea'
-  },
-  {
-    label: 'Beer',
-    value: 'beer',
-    selected: true
-  },
-  {
-    label: 'Ice Cream',
-    type: 'header'
-  },
-  {
-    label: 'Vanilla',
-    value: 'vanilla',
-    disabled: true
-  },
-  {
-    label: 'Strawberry',
-    value: 'Strawberry'
-  }
-];
-```
-```css
-section {
-  height: 180px;
-  padding: 0 3px;
-}
-```
-```html
-<section>
-  <ef-select></ef-select>
-</section>
-```
-::
-
-```javascript
-const el = document.querySelector("ef-select");
-el.data = [
-  {
-    label: 'Drinks',
-    type: 'header'
-  },
-  {
-    label: 'Tea',
-    value: 'tea'
-  },
-  {
-    label: 'Beer',
-    value: 'beer',
-    selected: true
-  },
-  {
-    label: 'Ice Cream',
-    type: 'header'
-  },
-  {
-    label: 'Vanilla',
-    value: 'vanilla',
-    disabled: true
-  },
-  {
-    label: 'Strawberry',
-    value: 'Strawberry'
-  }
-];
-```
-
 ## Restricting list height
 
 The `max-height` of the list can be restricted using the `--list-max-height` property.
@@ -339,22 +243,23 @@ The `max-height` of the list can be restricted using the `--list-max-height` pro
 ```css
 section {
   height: 130px;
-  padding: 0 3px;
 }
 ef-select {
+  margin-left: 4px;
   --list-max-height: 100px;
 }
 ```
 ```html
 <section>
-  <ef-select placeholder="Choose your refreshment...">
-    <ef-item type="header">Drinks</ef-item>
-    <ef-item value="4" disabled>Apple Juice</ef-item>
-    <ef-item value="5" disabled>Iced Tea</ef-item>
-    <ef-item value="6" disabled>Water</ef-item>
-    <ef-item type="header">Ice Cream</ef-item>
-    <ef-item value="7">Vanilla</ef-item>
-    <ef-item value="8">Chocolate</ef-item>
+  <label for="refreshment">Refreshment </label>
+  <ef-select id="refreshment" placeholder="Choose your refreshment...">
+    <ef-item role="presentation" type="header">Drinks</ef-item>
+    <ef-item role="option" value="4" disabled>Apple Juice</ef-item>
+    <ef-item role="option" value="5" disabled>Iced Tea</ef-item>
+    <ef-item role="option" value="6" disabled>Water</ef-item>
+    <ef-item role="presentation" type="header">Ice Cream</ef-item>
+    <ef-item role="option" value="7">Vanilla</ef-item>
+    <ef-item role="option" value="8">Chocolate</ef-item>
   </ef-select>
 </section>
 ```
@@ -385,13 +290,14 @@ ef-select {
 ## Accessibility
 ::a11y-intro::
 
-`ef-select` is assigned `role="button"` and also attribute `aria-expanded`. Select options are assigned `role="option"` and `aria-selected` which depends on item's selection state.
+`ef-select` is assigned `role="combobox"` and also attribute `aria-expanded`. Select options are assigned `role="option"` and `aria-selected` which depends on item's selection state. You must ensure that the element has associated label by using `aria-label`, `aria-labelledby` or `label[for="<element.id>"]`.
 
 * `ef-select` manages the role and aria attributes automatically if you create `ef-select` using `data` property
-* If you create select declaratively by using `ef-item`, assign `role="option"` to selectable `ef-item`.
+* If you create select declaratively by using `ef-item`, assign `role="option"` to selectable `ef-item` and `role="presentation"` to `ef-item` with `type="header"` and `type="divider"`.
 
 ```html
-<ef-select placeholder="Pick item">
+<label for="currency">Currency: </label>
+<ef-select id="currency">
   <ef-item value="GBP" role="option" selected>GBP (£)</ef-item>
   <ef-item value="EUR" role="option">EUR (€)</ef-item>
   <ef-item value="USD" role="option">USD ($)</ef-item>
@@ -400,17 +306,12 @@ ef-select {
 * If you have header items, assign `role="presentation"` on the items
 
 ```html
-<ef-select placeholder="Pick item...">
+<label for="refreshment">Refreshment: </label>
+<ef-select id="refreshment">
   <ef-item role="presentation" type="header">Drinks</ef-item>
-  <ef-item role="option" value="1">Cola</ef-item>
-  <ef-item role="option" selected value="2">Lemonade</ef-item>
-  <ef-item role="option" value="3">Iced Tea</ef-item>
-  <ef-item role="option" value="4">Water</ef-item>
+  ...
   <ef-item role="presentation" type="header">Ice Cream</ef-item>
-  <ef-item role="option" value="5">Vanilla</ef-item>
-  <ef-item role="option" value="6">Chocolate</ef-item>
-  <ef-item role="option" value="7">Pistachio</ef-item>
-  <ef-item role="option" value="8">Salted Caramel</ef-item>
+  ...
 </ef-select>
 ```
 
diff --git a/packages/elements/src/select/__demo__/index.html b/packages/elements/src/select/__demo__/index.html
index 21f246db53..29987945f8 100644
--- a/packages/elements/src/select/__demo__/index.html
+++ b/packages/elements/src/select/__demo__/index.html
@@ -15,32 +15,49 @@
       import '@refinitiv-ui/demo-block';
     </script>
 
+    <style>
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+
+      section label {
+        margin-bottom: 4px;
+      }
+    </style>
+
     <demo-block header="Grouping" tags="groups,selected">
-      <ef-select placeholder="Pick item..." class="short">
-        <ef-item role="presentation" type="header">Drinks</ef-item>
-        <ef-item role="option" value="1">Cola</ef-item>
-        <ef-item role="option" selected value="2">Lemonade</ef-item>
-        <ef-item role="option" value="3">Orange Juice</ef-item>
-        <ef-item role="option" value="4" disabled>Apple Juice</ef-item>
-        <ef-item role="option" value="5">Iced Tea</ef-item>
-        <ef-item role="option" value="6">Water</ef-item>
-        <ef-item role="presentation" type="header">Ice Cream</ef-item>
-        <ef-item role="option" value="7">Vanilla</ef-item>
-        <ef-item role="option" value="8">Chocolate</ef-item>
-        <ef-item role="option" value="9">Honey &amp; Walnut</ef-item>
-        <ef-item role="option" value="10">Pistachio</ef-item>
-        <ef-item role="option" value="11">Salted Caramel</ef-item>
-        <ef-item role="option" value="12">Mint Choc Chip</ef-item>
-        <ef-item role="option" value="13">Hazelnut</ef-item>
-        <ef-item role="option" value="14">Strawberry</ef-item>
-        <ef-item role="option" value="15">Raspberry</ef-item>
-      </ef-select>
+      <section>
+        <label for="desserts">Desserts:</label>
+        <ef-select id="desserts">
+          <ef-item role="presentation" type="header">Drinks</ef-item>
+          <ef-item role="option" value="1">Cola</ef-item>
+          <ef-item role="option" value="2" selected>Lemonade</ef-item>
+          <ef-item role="option" value="3">Orange Juice</ef-item>
+          <ef-item role="option" value="4" disabled>Apple Juice</ef-item>
+          <ef-item role="option" value="5">Iced Tea</ef-item>
+          <ef-item role="option" value="6">Water</ef-item>
+          <ef-item role="presentation" type="header">Ice Cream</ef-item>
+          <ef-item role="option" value="7">Vanilla</ef-item>
+          <ef-item role="option" value="8">Chocolate</ef-item>
+          <ef-item role="option" value="9">Honey &amp; Walnut</ef-item>
+          <ef-item role="option" value="10">Pistachio</ef-item>
+          <ef-item role="option" value="11">Salted Caramel</ef-item>
+          <ef-item role="option" value="12">Mint Choc Chip</ef-item>
+          <ef-item role="option" value="13">Hazelnut</ef-item>
+          <ef-item role="option" value="14">Strawberry</ef-item>
+          <ef-item role="option" value="15">Raspberry</ef-item>
+        </ef-select>
+      </section>
 
-      <ef-select placeholder="Pick item" class="small">
-        <ef-item value="GBP" role="option" selected>GBP (£)</ef-item>
-        <ef-item value="EUR" role="option">EUR (€)</ef-item>
-        <ef-item value="USD" role="option">USD ($)</ef-item>
-      </ef-select>
+      <section>
+        <label id="currency">Currency:</label>
+        <ef-select aria-labelledby="currency" placeholder="Choose a currency">
+          <ef-item value="GBP" role="option">GBP (£)</ef-item>
+          <ef-item value="EUR" role="option">EUR (€)</ef-item>
+          <ef-item value="USD" role="option">USD ($)</ef-item>
+        </ef-select>
+      </section>
 
       <custom-style>
         <style>
@@ -55,10 +72,10 @@
     </demo-block>
 
     <demo-block header="Country List" tags="250+">
-      <div>
-        <p id="country-label">Choose a country:</p>
-        <ef-select id="country" aria-labelledby="country-label country"> </ef-select>
-      </div>
+      <section>
+        <label id="country-label">Choose a country:</label>
+        <ef-select id="country" aria-labelledby="country-label"> </ef-select>
+      </section>
       <script>
         const el = document.getElementById('country');
         el.data = window.countries;
diff --git a/packages/elements/src/select/__snapshots__/Selection.md b/packages/elements/src/select/__snapshots__/Selection.md
index dfa5420cef..9942dc060c 100644
--- a/packages/elements/src/select/__snapshots__/Selection.md
+++ b/packages/elements/src/select/__snapshots__/Selection.md
@@ -5,13 +5,24 @@
 ####   `Options Selected: Afghanistan`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Afghanistan
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -39,13 +50,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Afghanistan
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -73,13 +95,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -109,13 +142,24 @@
 ####   `Data Selected: Afghanistan`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Afghanistan
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -180,13 +224,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Albania
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -251,13 +306,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Albania
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
diff --git a/packages/elements/src/select/__snapshots__/Template.md b/packages/elements/src/select/__snapshots__/Template.md
index 45f3cda8a4..7d26d15782 100644
--- a/packages/elements/src/select/__snapshots__/Template.md
+++ b/packages/elements/src/select/__snapshots__/Template.md
@@ -5,12 +5,22 @@
 ####   `Empty DOM has all required parts`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -28,13 +38,24 @@
 ####   `Placeholder is rendered`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -50,13 +71,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="New Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       New Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -72,12 +104,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -95,12 +137,22 @@
 ####   `Lazy Render: options`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -116,12 +168,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -149,12 +211,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -180,12 +252,22 @@
 ####   `Lazy Render: data`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -201,12 +283,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -269,12 +361,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -335,12 +437,22 @@
 ####   `Data is reflected to render`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -403,12 +515,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -471,12 +593,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -539,12 +671,22 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
diff --git a/packages/elements/src/select/__snapshots__/Value.md b/packages/elements/src/select/__snapshots__/Value.md
index 965360b387..0991848a7c 100644
--- a/packages/elements/src/select/__snapshots__/Value.md
+++ b/packages/elements/src/select/__snapshots__/Value.md
@@ -5,13 +5,24 @@
 ####   `Options Selected: Afghanistan`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Afghanistan
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -39,13 +50,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -73,13 +95,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Albania
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -107,13 +140,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -143,13 +187,24 @@
 ####   `Data Selected: Afghanistan`
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Afghanistan
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -214,13 +269,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="label">
       Albania
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
@@ -285,13 +351,24 @@
 ```
 
 ```html
-<div id="box">
+<div
+  aria-controls="menu"
+  aria-expanded="true"
+  aria-haspopup="listbox"
+  aria-invalid="false"
+  aria-required="false"
+  id="box"
+  placeholder="Placeholder"
+  role="combobox"
+  tabindex="0"
+>
   <div id="text">
     <div part="placeholder">
       Placeholder
     </div>
   </div>
   <ef-icon
+    aria-hidden="true"
     icon="down"
     part="icon"
   >
diff --git a/packages/elements/src/select/__test__/select.accessibility.test.js b/packages/elements/src/select/__test__/select.accessibility.test.js
new file mode 100644
index 0000000000..9baf1117c9
--- /dev/null
+++ b/packages/elements/src/select/__test__/select.accessibility.test.js
@@ -0,0 +1,41 @@
+import '@refinitiv-ui/elements/select';
+
+import '@refinitiv-ui/elemental-theme/light/ef-select';
+import { expect, fixture } from '@refinitiv-ui/test-helpers';
+
+describe('select/Accessibility', function () {
+  it('Should not be accessible without label', async function () {
+    const el = await fixture('<ef-select></ef-select>');
+    const select = el.shadowRoot.querySelector('[role=combobox]');
+    await expect(select).not.to.be.accessible();
+  });
+  it('Should cascade label down when aria-label is used', async function () {
+    const el = await fixture('<ef-select aria-label="Label"></ef-select>');
+    const select = el.shadowRoot.querySelector('[role=combobox]');
+    await expect(select).to.be.accessible();
+  });
+  it('Should cascade label down when aria-labelledby is used', async function () {
+    const template = await fixture(`
+        <div>
+          <label id="label">Label</label>
+          <ef-select aria-labelledby="label"></ef-select>
+        </div>
+      `);
+    const el = template.querySelector('ef-select');
+    const select = el.shadowRoot.querySelector('[role=combobox]');
+    await expect(select).to.be.accessible();
+  });
+  it('Should capture label with `for` and cascade label down when label[for="id"] is used', async function () {
+    const template = await fixture(`
+        <div>
+          <label for="select">Label</label>
+          <ef-select id="select"></ef-select>
+        </div>
+      `);
+
+    const el = template.querySelector('ef-select');
+    const select = el.shadowRoot.querySelector('[role=combobox]');
+
+    await expect(select).to.be.accessible();
+  });
+});
diff --git a/packages/elements/src/select/index.ts b/packages/elements/src/select/index.ts
index 1969d4a243..c0f695c5a0 100644
--- a/packages/elements/src/select/index.ts
+++ b/packages/elements/src/select/index.ts
@@ -1,13 +1,14 @@
 import {
   CSSResultGroup,
-  ControlElement,
   FocusedPropertyKey,
+  FormFieldElement,
   MultiValue,
   PropertyValues,
   StyleMap,
   TemplateResult,
   css,
-  html
+  html,
+  nothing
 } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
@@ -39,6 +40,13 @@ const observerOptions = {
   attributeFilter: ['label', 'value', 'selected', 'disabled', 'readonly']
 };
 
+// the same event listener options should be used with both addEventListener() & removeEventListener()
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#matching_event_listeners_for_removal
+const eventListenerOptions = {
+  /* need this for IE11, otherwise the event is not removed */ capture: true,
+  passive: true
+};
+
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
 const KEY_SEARCH_DEBOUNCER = 300;
@@ -57,11 +65,20 @@ enum Navigation {
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
  */
 @customElement('ef-select')
-export class Select extends ControlElement implements MultiValue {
+export class Select extends FormFieldElement implements MultiValue {
   /**
    * Element version number
    * @returns version number
@@ -70,8 +87,6 @@ export class Select extends ControlElement implements MultiValue {
     return VERSION;
   }
 
-  protected override readonly defaultRole: string | null = 'combobox';
-
   /**
    * A `CSSResultGroup` that will be used
    * to style the host, slotted children
@@ -104,6 +119,9 @@ export class Select extends ControlElement implements MultiValue {
         display: none;
       }
       #box {
+        outline: none;
+        width: 100%;
+        height: 100%;
         align-items: center;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -126,19 +144,6 @@ export class Select extends ControlElement implements MultiValue {
         left: 0;
         cursor: pointer;
       }
-      #select {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        border: none;
-        padding: 0;
-        margin: 0;
-      }
     `;
   }
 
@@ -178,30 +183,12 @@ export class Select extends ControlElement implements MultiValue {
     return this.selectedSlotItems.map((item) => this.getItemLabel(item));
   }
 
-  /**
-   * Placeholder to display when no value is set
-   */
-  @property({ type: String })
-  public placeholder = '';
-
   /**
    * Toggles the opened state of the list
    */
   @property({ type: Boolean, reflect: true })
   public opened = false;
 
-  /**
-   * Set error state
-   */
-  @property({ type: Boolean, reflect: true })
-  public error = false;
-
-  /**
-   * Set warning state
-   */
-  @property({ type: Boolean, reflect: true })
-  public warning = false;
-
   /**
    * Switch to multiple select input
    * @ignore
@@ -305,17 +292,6 @@ export class Select extends ControlElement implements MultiValue {
    */
   private labelRef: Ref<HTMLDivElement> = createRef();
 
-  /**
-   * Called when connected to DOM
-   * @returns {void}
-   */
-  public override connectedCallback(): void {
-    super.connectedCallback();
-
-    // Indicating that this select has a popup of type listbox
-    this.setAttribute('aria-haspopup', 'listbox');
-  }
-
   /**
    * Updates the element
    * @param changedProperties Properties that has changed
@@ -342,12 +318,6 @@ export class Select extends ControlElement implements MultiValue {
       } else {
         this.closing();
       }
-
-      this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
-    }
-
-    if (changedProperties.has('error')) {
-      this.setAttribute('aria-invalid', this.error ? 'true' : 'false');
     }
 
     super.update(changedProperties);
@@ -563,12 +533,7 @@ export class Select extends ControlElement implements MultiValue {
     this.scrollToSelected();
     this.setItemHighlight(this.getSelectedElements()[0]);
 
-    const eventOptions = {
-      capture: true,
-      passive: true
-    };
-
-    target?.addEventListener('scroll', this.onPopupScroll, eventOptions);
+    target?.addEventListener('scroll', this.onPopupScroll, eventListenerOptions);
   }
 
   /**
@@ -576,12 +541,7 @@ export class Select extends ControlElement implements MultiValue {
    * @returns {void}
    */
   private onPopupClosed({ target }: CustomEvent): void {
-    const eventOptions = {
-      /* need this for IE11, otherwise the event is not removed */ capture: true,
-      passive: true
-    };
-
-    target?.removeEventListener('scroll', this.onPopupScroll, eventOptions);
+    target?.removeEventListener('scroll', this.onPopupScroll, eventListenerOptions);
     this.setItemHighlight();
     this.popupScrollTop = 0;
   }
@@ -1016,18 +976,6 @@ export class Select extends ControlElement implements MultiValue {
     return html`<div part="label" ${ref(this.labelRef)}>${this.labelText}</div>`;
   }
 
-  /**
-   * Edit template when select is not readonly or disabled
-   */
-  private get editTemplate(): TemplateResult | undefined {
-    if (!this.readonly && !this.disabled) {
-      return html`
-        <div id="trigger" @tapstart="${this.toggleOpened}"></div>
-        ${this.popupTemplate}
-      `;
-    }
-  }
-
   /**
    * Get default slot template
    */
@@ -1043,36 +991,48 @@ export class Select extends ControlElement implements MultiValue {
   }
 
   /**
-   * Edit template when select is not readonly or disabled
+   * `ef-items` template generated from slot or `data`
    */
-  private get popupTemplate(): TemplateResult | undefined {
-    if (this.lazyRendered) {
-      return html`<ef-overlay
-        ${ref(this.menuRef)}
-        tabindex="-1"
-        id="menu"
-        part="list"
-        role="listbox"
-        style=${styleMap(this.popupDynamicStyles)}
-        with-shadow
-        lock-position-target
-        .positionTarget=${this}
-        .position=${POPUP_POSITION}
-        ?opened=${this.opened}
-        @tap=${this.onPopupTap}
-        @mousemove=${this.onPopupMouseMove}
-        @keydown=${this.onPopupKeyDown}
-        @opened-changed="${this.onPopupOpenedChanged}"
-        @opened="${this.onPopupOpened}"
-        @refit=${this.onPopupRefit}
-        @closed="${this.onPopupClosed}"
-        >${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay
-      >`;
-    } else {
-      // This code is required because IE11 polyfill need items to be within a slot
-      // to make MutationObserver to observe items correctly
-      return html`<div style="display: none !important;"><slot></slot></div>`;
-    }
+  private get itemsTemplate(): TemplateResult {
+    return this.hasDataItems() ? this.dataContent : this.slottedContent;
+  }
+
+  /**
+   * Template of a listbox containing ef-item(s)
+   */
+  private get listboxTemplate(): TemplateResult {
+    return this.lazyRendered
+      ? html`<ef-overlay
+          ${ref(this.menuRef)}
+          tabindex="-1"
+          id="menu"
+          part="list"
+          role="listbox"
+          style=${styleMap(this.popupDynamicStyles)}
+          with-shadow
+          lock-position-target
+          .positionTarget=${this}
+          .position=${POPUP_POSITION}
+          ?opened=${this.opened}
+          @tap=${this.onPopupTap}
+          @mousemove=${this.onPopupMouseMove}
+          @keydown=${this.onPopupKeyDown}
+          @opened-changed="${this.onPopupOpenedChanged}"
+          @opened="${this.onPopupOpened}"
+          @refit=${this.onPopupRefit}
+          @closed="${this.onPopupClosed}"
+          >${this.itemsTemplate}</ef-overlay
+        >`
+      : // This code is required because IE11 polyfill need items to be within a slot
+        // to make MutationObserver to observe items correctly
+        html`<div style="display: none !important;"><slot></slot></div>`;
+  }
+
+  /**
+   * Area that allows select to be clickable and toggle between open and close
+   */
+  private get triggerTemplate(): TemplateResult {
+    return html` <div id="trigger" @tapstart="${this.toggleOpened}"></div>`;
   }
 
   /**
@@ -1081,11 +1041,25 @@ export class Select extends ControlElement implements MultiValue {
    * @return Render template
    */
   protected override render(): TemplateResult {
-    return html` <div id="box">
+    return html`<div
+        id="box"
+        tabindex="0"
+        role="combobox"
+        placeholder=${this.placeholder || nothing}
+        aria-haspopup="listbox"
+        aria-controls="menu"
+        aria-invalid=${this.error ? 'true' : 'false'}
+        aria-expanded=${this.opened ? 'true' : 'false'}
+        aria-required=${this.inputAriaRequired}
+        aria-label=${this.inputAriaLabel ?? nothing}
+        aria-description=${this.inputAriaDescription ?? nothing}
+      >
         <div id="text">${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}</div>
-        <ef-icon icon="down" part="icon"></ef-icon>
+        <ef-icon aria-hidden="true" icon="down" part="icon"></ef-icon>
       </div>
-      ${this.editTemplate}`;
+      ${!this.readonly && !this.disabled
+        ? html` ${this.triggerTemplate} ${this.listboxTemplate} `
+        : nothing}`;
   }
 }