diff --git a/packages/docs/components/Checkbox.md b/packages/docs/components/Checkbox.md
index 7dbe78460..085e98754 100644
--- a/packages/docs/components/Checkbox.md
+++ b/packages/docs/components/Checkbox.md
@@ -33,23 +33,24 @@
 
 ### Props
 
-| Prop name          | Description                                                    | Type                                                                   | Values                                                                          | Default                                                                                                                                                |
-| ------------------ | -------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| autocomplete       | Same as native autocomplete options to use in HTML5 validation | string                                                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
-| customValidity     | Custom HTML 5 validation error to set on the form control      | string \| ((currentValue: boolean, state: ValidityState) =&gt; string) | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                               |
-| disabled           | Same as native disabled                                        | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
-| falseValue         | Overrides the returned value when it's not checked             | string\|number\|boolean\|object                                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
-| indeterminate      | Same as native indeterminate                                   | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
-| label              | Input label, unnecessary when default slot is used             | string                                                                 | -                                                                               |                                                                                                                                                        |
-| v-model            | The input value state                                          | string\|number\|boolean\|object\|array                                 | -                                                                               |                                                                                                                                                        |
-| name               | Same as native name                                            | string                                                                 | -                                                                               |                                                                                                                                                        |
-| nativeValue        | Same as native value                                           | string\|number\|boolean\|object                                        | -                                                                               |                                                                                                                                                        |
-| override           | Override existing theme classes completely                     | boolean                                                                | -                                                                               |                                                                                                                                                        |
-| required           | Same as native required                                        | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
-| size               | Size of the control                                            | string                                                                 | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;size: undefined<br>}</code>     |
-| trueValue          | Overrides the returned value when it's checked                 | string\|number\|boolean\|object                                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                             |
-| useHtml5Validation | Enable HTML 5 native validation                                | boolean                                                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>      |
-| variant            | Color of the control                                           | string                                                                 | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>  |
+| Prop name          | Description                                                                         | Type                                                                   | Values                                                                          | Default                                                                                                                                                |
+| ------------------ | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| autocomplete       | Same as native autocomplete options to use in HTML5 validation                      | string                                                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
+| customValidity     | Custom HTML 5 validation error to set on the form control                           | string \| ((currentValue: boolean, state: ValidityState) =&gt; string) | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                               |
+| disabled           | Same as native disabled                                                             | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
+| falseValue         | Overrides the returned value when it's not checked                                  | string\|number\|boolean\|object                                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
+| id                 | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string                                                                 | -                                                                               | Default function (see source code)                                                                                                                     |
+| indeterminate      | Same as native indeterminate                                                        | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
+| label              | Input label, unnecessary when default slot is used                                  | string                                                                 | -                                                                               |                                                                                                                                                        |
+| v-model            | The input value state                                                               | string\|number\|boolean\|object\|array                                 | -                                                                               |                                                                                                                                                        |
+| name               | Same as native name                                                                 | string                                                                 | -                                                                               |                                                                                                                                                        |
+| nativeValue        | Same as native value                                                                | string\|number\|boolean\|object                                        | -                                                                               |                                                                                                                                                        |
+| override           | Override existing theme classes completely                                          | boolean                                                                | -                                                                               |                                                                                                                                                        |
+| required           | Same as native required                                                             | boolean                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                            |
+| size               | Size of the control                                                                 | string                                                                 | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;size: undefined<br>}</code>     |
+| trueValue          | Overrides the returned value when it's checked                                      | string\|number\|boolean\|object                                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                             |
+| useHtml5Validation | Enable HTML 5 native validation                                                     | boolean                                                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>      |
+| variant            | Color of the control                                                                | string                                                                 | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>  |
 
 ### Events
 
diff --git a/packages/docs/components/Radio.md b/packages/docs/components/Radio.md
index c2ec02114..bdb83b4d1 100644
--- a/packages/docs/components/Radio.md
+++ b/packages/docs/components/Radio.md
@@ -33,19 +33,20 @@
 
 ### Props
 
-| Prop name          | Description                                                    | Type                            | Values                                                                          | Default                                                                                                                                             |
-| ------------------ | -------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| autocomplete       | Same as native autocomplete options to use in HTML5 validation | string                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
-| disabled           | Same as native disabled                                        | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
-| label              | Input label, unnecessary when default slot is used             | string                          | -                                                                               |                                                                                                                                                     |
-| v-model            | The input value state                                          | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                     |
-| name               | Same as native name                                            | string                          | -                                                                               |                                                                                                                                                     |
-| nativeValue        | Same as native value                                           | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                     |
-| override           | Override existing theme classes completely                     | boolean                         | -                                                                               |                                                                                                                                                     |
-| required           | Same as native required                                        | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
-| size               | Size of the control                                            | string                          | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;size: undefined<br>}</code>     |
-| useHtml5Validation | Enable html 5 native validation                                | boolean                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>   |
-| variant            | Color of the control                                           | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>  |
+| Prop name          | Description                                                                         | Type                            | Values                                                                          | Default                                                                                                                                             |
+| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autocomplete       | Same as native autocomplete options to use in HTML5 validation                      | string                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
+| disabled           | Same as native disabled                                                             | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| id                 | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string                          | -                                                                               | Default function (see source code)                                                                                                                  |
+| label              | Input label, unnecessary when default slot is used                                  | string                          | -                                                                               |                                                                                                                                                     |
+| v-model            | The input value state                                                               | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                     |
+| name               | Same as native name                                                                 | string                          | -                                                                               |                                                                                                                                                     |
+| nativeValue        | Same as native value                                                                | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                     |
+| override           | Override existing theme classes completely                                          | boolean                         | -                                                                               |                                                                                                                                                     |
+| required           | Same as native required                                                             | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| size               | Size of the control                                                                 | string                          | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;size: undefined<br>}</code>     |
+| useHtml5Validation | Enable html 5 native validation                                                     | boolean                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>   |
+| variant            | Color of the control                                                                | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>radio: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>  |
 
 ### Events
 
diff --git a/packages/docs/components/Switch.md b/packages/docs/components/Switch.md
index 69f52e906..fac769e84 100644
--- a/packages/docs/components/Switch.md
+++ b/packages/docs/components/Switch.md
@@ -33,24 +33,25 @@
 
 ### Props
 
-| Prop name          | Description                                                    | Type                            | Values                                                                          | Default                                                                                                                                                    |
-| ------------------ | -------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| autocomplete       | Same as native autocomplete options to use in HTML5 validation | string                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
-| disabled           | Same as native disabled                                        | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
-| falseValue         | Overrides the returned value when it's not checked             | string\|number\|boolean\|object | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
-| label              | Input label, unnecessary when default slot is used             | string                          | -                                                                               |                                                                                                                                                            |
-| v-model            | The input value state                                          | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                            |
-| name               | Name attribute on native checkbox                              | string                          | -                                                                               |                                                                                                                                                            |
-| nativeValue        | Same as native value                                           | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                            |
-| override           | Override existing theme classes completely                     | boolean                         | -                                                                               |                                                                                                                                                            |
-| passiveVariant     | Color of the switch when is passive                            | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;passiveVariant: undefined<br>}</code> |
-| position           | Label position                                                 | string                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"right"</code>                                                                                              |
-| required           | Same as native required                                        | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
-| rounded            | Rounded style                                                  | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
-| size               | Size of the control                                            | string                          | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
-| trueValue          | Overrides the returned value when it's checked                 | string\|number\|boolean\|object | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
-| useHtml5Validation | Enable html 5 native validation                                | boolean                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>          |
-| variant            | Color of the control                                           | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
+| Prop name          | Description                                                                         | Type                            | Values                                                                          | Default                                                                                                                                                    |
+| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autocomplete       | Same as native autocomplete options to use in HTML5 validation                      | string                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
+| disabled           | Same as native disabled                                                             | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| falseValue         | Overrides the returned value when it's not checked                                  | string\|number\|boolean\|object | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| id                 | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string                          | -                                                                               | Default function (see source code)                                                                                                                         |
+| label              | Input label, unnecessary when default slot is used                                  | string                          | -                                                                               |                                                                                                                                                            |
+| v-model            | The input value state                                                               | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                            |
+| name               | Name attribute on native checkbox                                                   | string                          | -                                                                               |                                                                                                                                                            |
+| nativeValue        | Same as native value                                                                | string\|number\|boolean\|object | -                                                                               |                                                                                                                                                            |
+| override           | Override existing theme classes completely                                          | boolean                         | -                                                                               |                                                                                                                                                            |
+| passiveVariant     | Color of the switch when is passive                                                 | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;passiveVariant: undefined<br>}</code> |
+| position           | Label position                                                                      | string                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"right"</code>                                                                                              |
+| required           | Same as native required                                                             | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| rounded            | Rounded style                                                                       | boolean                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
+| size               | Size of the control                                                                 | string                          | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
+| trueValue          | Overrides the returned value when it's checked                                      | string\|number\|boolean\|object | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
+| useHtml5Validation | Enable html 5 native validation                                                     | boolean                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>          |
+| variant            | Color of the control                                                                | string                          | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>switch: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
 
 ### Events
 
diff --git a/packages/docs/components/Tabs.md b/packages/docs/components/Tabs.md
index dac27b9b5..737fdba1c 100644
--- a/packages/docs/components/Tabs.md
+++ b/packages/docs/components/Tabs.md
@@ -82,7 +82,6 @@ sidebarDepth: 2
 
 | Prop name | Description                                                                       | Type                   | Values | Default                                                                                                                                            |
 | --------- | --------------------------------------------------------------------------------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaRole  | Role attribute to be passed to the div wrapper for better accessibility.          | string                 | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code>     |
 | disabled  | Item will be disabled                                                             | boolean                | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                        |
 | icon      | Icon on the left                                                                  | string                 | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>     |
 | iconPack  | Icon pack                                                                         | string                 | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
diff --git a/packages/docs/components/TabsExample.md b/packages/docs/components/TabsExample.md
new file mode 100644
index 000000000..c21b2edcd
--- /dev/null
+++ b/packages/docs/components/TabsExample.md
@@ -0,0 +1,48 @@
+# TabsExample
+
+<div class="vp-doc">
+
+</div>
+
+<div class="vp-example">
+
+## Examples
+
+<example-tabsexample />
+
+</div>
+<div class="vp-example">
+
+## Class props
+
+<inspector-tabsexample-viewer />
+
+</div>
+
+<div class="vp-doc">
+
+## TabsExample component
+
+```html
+<o-tabs-example></o-tabs-example>
+```
+
+### Props
+
+| Prop name        | Description | Type    | Values                    | Default                                                        |
+| ---------------- | ----------- | ------- | ------------------------- | -------------------------------------------------------------- |
+| customNavigation |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| hasNavigation    |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| isAnimated       |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| isProfileSuccess |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| isRounded        |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| isStepsClickable |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| isVertical       |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+| labelPosition    |             | string  | `bottom`, `left`, `right` | <code style='white-space: nowrap; padding: 0;'>"bottom"</code> |
+| showSocial       |             | boolean | -                         | <code style='white-space: nowrap; padding: 0;'>false</code>    |
+
+</div>
+
+<div class="vp-doc">
+
+</div>
diff --git a/packages/oruga/src/components/button/examples/icons.vue b/packages/oruga/src/components/button/examples/icons.vue
index d90ab0090..544e49dbc 100644
--- a/packages/oruga/src/components/button/examples/icons.vue
+++ b/packages/oruga/src/components/button/examples/icons.vue
@@ -10,7 +10,7 @@
         <div class="odocs-spaced">
             <o-button label="Delete" variant="danger" icon-left="trash" />
             <o-button label="Delete" variant="danger" icon-right="trash" />
-            <o-button variant="danger" icon-right="trash" />
+            <o-button variant="danger" aria-label="Delete" icon-right="trash" />
         </div>
     </section>
 </template>
diff --git a/packages/oruga/src/components/checkbox/Checkbox.vue b/packages/oruga/src/components/checkbox/Checkbox.vue
index 0e65a1396..94ae97319 100644
--- a/packages/oruga/src/components/checkbox/Checkbox.vue
+++ b/packages/oruga/src/components/checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends string | number | boolean | object">
-import { computed, ref, useAttrs, type PropType } from "vue";
+import { computed, ref, useAttrs, useId, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { defineClasses, useInputHandler } from "@/composables";
@@ -86,6 +86,8 @@ const props = defineProps({
         type: String,
         default: () => getOption("checkbox.autocomplete", "off"),
     },
+    /** Same as native id. Also set the for label for o-field wrapper - default is an uuid. */
+    id: { type: String, default: () => useId() },
     /** Enable HTML 5 native validation */
     useHtml5Validation: {
         type: Boolean,
@@ -198,6 +200,9 @@ const { parentField } = injectField();
 
 const vmodel = defineModel<T | T[]>({ default: undefined });
 
+// if not `label` is given and `id` is given set as `for` property on o-field wrapper
+if (!props.label && props.id) parentField?.value?.setInputId(props.id);
+
 const isIndeterminate = defineModel<boolean>("indeterminate", {
     default: false,
 });
@@ -270,6 +275,7 @@ defineExpose({ focus: setFocus, value: vmodel });
         @keydown.prevent.enter="setFocus">
         <input
             v-bind="inputBind"
+            :id="id"
             ref="inputRef"
             v-model="vmodel"
             type="checkbox"
diff --git a/packages/oruga/src/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap b/packages/oruga/src/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
index 2badd3d82..1bb6489d9 100644
--- a/packages/oruga/src/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
+++ b/packages/oruga/src/components/checkbox/tests/__snapshots__/checkbox.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OCheckbox tests > render correctly 1`] = `
-"<label class="o-chk" data-oruga="checkbox" role="checkbox" aria-checked="false"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input" autocomplete="off" true-value="true" false-value="false">
+"<label class="o-chk" data-oruga="checkbox" role="checkbox" aria-checked="false"><input id="v-0" type="checkbox" data-oruga-input="checkbox" class="o-chk__input" autocomplete="off" true-value="true" false-value="false">
   <!--v-if-->
 </label>"
 `;
diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue
index 0a1e2890b..570a9b087 100644
--- a/packages/oruga/src/components/input/Input.vue
+++ b/packages/oruga/src/components/input/Input.vue
@@ -134,7 +134,7 @@ const { parentField, statusVariant, statusVariantIcon } = injectField();
 // const vmodel = defineModel<ModelValue>({ default: undefined });
 const vmodel = useVModel<ModelValue>();
 
-// if id is given set as `for` property on o-field wrapper
+// if `id` is given set as `for` property on o-field wrapper
 if (props.id) parentField?.value?.setInputId(props.id);
 
 /** Get value length */
diff --git a/packages/oruga/src/components/radio/Radio.vue b/packages/oruga/src/components/radio/Radio.vue
index a31c2d9fe..94b56067b 100644
--- a/packages/oruga/src/components/radio/Radio.vue
+++ b/packages/oruga/src/components/radio/Radio.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends string | number | boolean | object">
-import { computed, ref, useAttrs, type PropType } from "vue";
+import { computed, ref, useAttrs, useId, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { defineClasses, useInputHandler } from "@/composables";
@@ -68,6 +68,8 @@ const props = defineProps({
         type: String,
         default: () => getOption("radio.autocomplete", "off"),
     },
+    /** Same as native id. Also set the for label for o-field wrapper - default is an uuid. */
+    id: { type: String, default: () => useId() },
     /** Enable html 5 native validation */
     useHtml5Validation: {
         type: Boolean,
@@ -159,6 +161,9 @@ const { parentField } = injectField();
 
 const vmodel = defineModel<T>({ default: undefined });
 
+// if not `label` is given and `id` is given set as `for` property on o-field wrapper
+if (!props.label && props.id) parentField?.value?.setInputId(props.id);
+
 const isChecked = computed(() => vmodel.value === props.nativeValue);
 
 function onInput(event: Event): void {
@@ -221,6 +226,7 @@ defineExpose({ focus: setFocus, value: vmodel });
         @keydown.prevent.enter="setFocus">
         <input
             v-bind="inputBind"
+            :id="id"
             ref="inputRef"
             v-model="vmodel"
             type="radio"
diff --git a/packages/oruga/src/components/radio/tests/__snapshots__/radio.test.ts.snap b/packages/oruga/src/components/radio/tests/__snapshots__/radio.test.ts.snap
index d05387e4c..97824fab3 100644
--- a/packages/oruga/src/components/radio/tests/__snapshots__/radio.test.ts.snap
+++ b/packages/oruga/src/components/radio/tests/__snapshots__/radio.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ORadio tests > render correctly 1`] = `
-"<label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" autocomplete="off">
+"<label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input id="v-0" type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" autocomplete="off">
   <!--v-if-->
 </label>"
 `;
diff --git a/packages/oruga/src/components/select/Select.vue b/packages/oruga/src/components/select/Select.vue
index 3e464570c..6121e2d85 100644
--- a/packages/oruga/src/components/select/Select.vue
+++ b/packages/oruga/src/components/select/Select.vue
@@ -108,7 +108,7 @@ const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus, isValid } =
 // inject parent field component if used inside one
 const { parentField, statusVariant, statusVariantIcon } = injectField();
 
-// if id is given set as `for` property on o-field wrapper
+// if `id` is given set as `for` property on o-field wrapper
 if (props.id) parentField?.value?.setInputId(props.id);
 
 const vmodel = defineModel<ModelValue>({
diff --git a/packages/oruga/src/components/switch/Switch.vue b/packages/oruga/src/components/switch/Switch.vue
index b37fc8c26..996607e20 100644
--- a/packages/oruga/src/components/switch/Switch.vue
+++ b/packages/oruga/src/components/switch/Switch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends string | number | boolean | object">
-import { computed, ref, useAttrs, type PropType } from "vue";
+import { computed, ref, useAttrs, useId, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { defineClasses, useInputHandler, useVModel } from "@/composables";
@@ -96,6 +96,8 @@ const props = defineProps({
         type: String,
         default: () => getOption("switch.autocomplete", "off"),
     },
+    /** Same as native id. Also set the for label for o-field wrapper - default is an uuid. */
+    id: { type: String, default: () => useId() },
     /** Enable html 5 native validation */
     useHtml5Validation: {
         type: Boolean,
@@ -212,6 +214,9 @@ const { parentField } = injectField();
 // const vmodel = defineModel<T>({ default: undefined });
 const vmodel = useVModel<T>();
 
+// if not `label` is given and `id` is given set as `for` property on o-field wrapper
+if (!props.label && props.id) parentField?.value?.setInputId(props.id);
+
 const isChecked = computed(
     () =>
         vmodel.value === props.trueValue ||
@@ -301,6 +306,7 @@ defineExpose({ focus: setFocus, value: vmodel });
         @keydown.prevent.enter="setFocus">
         <input
             v-bind="inputBind"
+            :id="id"
             ref="inputRef"
             v-model="vmodel"
             type="checkbox"
diff --git a/packages/oruga/src/components/switch/tests/__snapshots__/switch.test.ts.snap b/packages/oruga/src/components/switch/tests/__snapshots__/switch.test.ts.snap
index a88f68f47..3b50ba437 100644
--- a/packages/oruga/src/components/switch/tests/__snapshots__/switch.test.ts.snap
+++ b/packages/oruga/src/components/switch/tests/__snapshots__/switch.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OSwitch tests > render correctly 1`] = `
-"<label class="o-switch o-switch--right" data-oruga="switch" role="switch" aria-checked="false"><input type="checkbox" role="switch" data-oruga-input="switch" class="o-switch__input" autocomplete="off" true-value="true" false-value="false"><span class="o-switch__check o-switch--rounded"><span class="o-switch__check-switch o-switch--rounded"></span></span>
+"<label class="o-switch o-switch--right" data-oruga="switch" role="switch" aria-checked="false"><input id="v-0" type="checkbox" role="switch" data-oruga-input="switch" class="o-switch__input" autocomplete="off" true-value="true" false-value="false"><span class="o-switch__check o-switch--rounded"><span class="o-switch__check-switch o-switch--rounded"></span></span>
   <!--v-if-->
 </label>"
 `;
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index 6a01981c8..b4f9b0f95 100644
--- a/packages/oruga/src/components/tabs/TabItem.vue
+++ b/packages/oruga/src/components/tabs/TabItem.vue
@@ -50,11 +50,6 @@ const props = defineProps({
         type: [String, Object, Function] as PropType<DynamicComponent>,
         default: () => getOption<DynamicComponent>("tabs.itemTag", "button"),
     },
-    /** Role attribute to be passed to the div wrapper for better accessibility. */
-    ariaRole: {
-        type: String,
-        default: () => getOption("tabs.ariaRole", "tab"),
-    },
     // class props (will not be displayed in the docs)
     /** Class of the tab item */
     tabPanelClass: {
@@ -196,13 +191,14 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
         <template v-if="!parent.destroyOnHide || (isActive && visible)">
             <div
                 v-show="isActive && visible"
-                ref="rootRef"
                 v-bind="$attrs"
+                :id="`tabpanel-${item.identifier}`"
                 :class="panelClasses"
                 :data-id="`tabs-${item.identifier}`"
                 data-oruga="tabs-item"
+                role="tabpanel"
+                :aria-labelledby="`tab-${item.identifier}`"
                 :tabindex="isActive ? 0 : -1"
-                :role="ariaRole"
                 aria-roledescription="item">
                 <!-- 
                     @slot Tab item content
diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
index 6b25c5eb9..de0f457ef 100644
--- a/packages/oruga/src/components/tabs/Tabs.vue
+++ b/packages/oruga/src/components/tabs/Tabs.vue
@@ -374,10 +374,11 @@ const contentClasses = defineClasses(
             <div
                 v-for="childItem in items"
                 v-show="childItem.visible"
+                :id="`tab-${childItem.identifier}`"
                 :key="childItem.identifier"
                 :class="navItemClasses"
                 role="tab"
-                :aria-controls="`${childItem.value}-content`"
+                :aria-controls="`tabpanel-${childItem.identifier}`"
                 :aria-selected="isActive(childItem) ? 'true' : 'false'">
                 <o-slot-component
                     v-if="childItem.$slots.header"
diff --git a/packages/oruga/src/components/tabs/tests/TabsAxeExample.vue b/packages/oruga/src/components/tabs/tests/TabsAxeExample.vue
new file mode 100644
index 000000000..145f2d0f5
--- /dev/null
+++ b/packages/oruga/src/components/tabs/tests/TabsAxeExample.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import OTabs from "@/components/tabs/Tabs.vue";
+import OTabItem from "@/components/tabs/TabItem.vue";
+
+defineProps({
+    isStepsClickable: { type: Boolean, default: false },
+});
+
+const activeTab = ref(1);
+</script>
+
+<template>
+    <!-- Taken from the first example in the documentation -->
+    <o-tabs v-model="activeTab">
+        <o-tab-item
+            value="1"
+            step="1"
+            label="Account"
+            :clickable="isStepsClickable">
+            <h1 class="title has-text-centered">Account</h1>
+            Lorem ipsum dolor sit amet.
+        </o-tab-item>
+
+        <o-tab-item
+            value="2"
+            step="2"
+            label="Profile"
+            :clickable="isStepsClickable">
+            <h1 class="title has-text-centered">Profile</h1>
+            Lorem ipsum dolor sit amet.
+        </o-tab-item>
+
+        <o-tab-item
+            value="3"
+            step="3"
+            label="Social"
+            :clickable="isStepsClickable">
+            <h1 class="title has-text-centered">Social</h1>
+            Lorem ipsum dolor sit amet.
+        </o-tab-item>
+
+        <o-tab-item
+            value="4"
+            label="Finish"
+            :clickable="isStepsClickable"
+            disabled>
+            <h1 class="title has-text-centered">Finish</h1>
+            Lorem ipsum dolor sit amet.
+        </o-tab-item>
+    </o-tabs>
+</template>
diff --git a/packages/oruga/src/components/tabs/tests/tabs.axe.test.ts b/packages/oruga/src/components/tabs/tests/tabs.axe.test.ts
new file mode 100644
index 000000000..33abdfed6
--- /dev/null
+++ b/packages/oruga/src/components/tabs/tests/tabs.axe.test.ts
@@ -0,0 +1,57 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { axe } from "jest-axe";
+
+import TabsExample from "./TabsAxeExample.vue";
+
+describe("Tabs axe tests", () => {
+    enableAutoUnmount(afterEach);
+
+    const a11yCases = [
+        {
+            title: "axe tabs - base case",
+            props: undefined,
+        },
+        {
+            title: "axe tabs - vertical",
+            props: { vertical: true },
+        },
+        {
+            title: "axe tabs - animated",
+            props: { animated: true },
+        },
+        {
+            title: "axe tabs - multiline",
+            props: { multiline: true },
+        },
+        {
+            title: "axe tabs - expanded",
+            props: { expanded: true },
+        },
+        {
+            title: "axe tabs - boxed",
+            props: { type: "boxed" },
+        },
+        {
+            title: "axe tabs - variant",
+            props: { variant: "danger" },
+        },
+        {
+            title: "axe tabs - position",
+            props: { position: "right" },
+        },
+        {
+            title: "axe tabs - size",
+            props: { size: "large" },
+        },
+        {
+            title: "axe tabs - isStepsClickable",
+            props: { isStepsClickable: true },
+        },
+    ];
+
+    test.each(a11yCases)("$title", async ({ props }) => {
+        const wrapper = mount(TabsExample, props);
+        expect(await axe(wrapper.html())).toHaveNoViolations();
+    });
+});
diff --git a/packages/oruga/src/components/tabs/tests/tabs.integration.test.ts b/packages/oruga/src/components/tabs/tests/tabs.integration.test.ts
new file mode 100644
index 000000000..c23e6cdcb
--- /dev/null
+++ b/packages/oruga/src/components/tabs/tests/tabs.integration.test.ts
@@ -0,0 +1,76 @@
+import { describe, test, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+
+import OTabs from "../Tabs.vue";
+import OTabItem from "../TabItem.vue";
+
+const componentWrapper = {
+    components: {
+        OTabs: OTabs,
+        OTabItem: OTabItem,
+    },
+    template: `<OTabs modelValue="1">
+      <OTabItem label="Tab 1" value="1">
+        <p>Tab 1 Content</p>
+      </OTabItem>
+      <OTabItem label="Tab 2" value="2">
+        <p>Tab 2 Content</p>
+      </OTabItem>
+      <OTabItem label="Tab 3" value="3">
+        <p>Tab 3 Content</p>
+      </OTabItem>
+    </OTabs>
+  `,
+};
+
+describe("the use of TabItem with Tabs", () => {
+    test("renders the tab buttons", async () => {
+        const wrapper = mount(componentWrapper);
+        await wrapper.vm.$nextTick();
+
+        const tabButtons = wrapper.findAll(".o-tabs__nav-item");
+
+        expect(tabButtons.length).toBe(3);
+        expect(tabButtons[0].text()).toBe("Tab 1");
+        expect(tabButtons[0].attributes("aria-selected")).toBe("true");
+        expect(tabButtons[1].text()).toBe("Tab 2");
+        expect(tabButtons[1].attributes("aria-selected")).toBe("false");
+        expect(tabButtons[2].text()).toBe("Tab 3");
+        expect(tabButtons[2].attributes("aria-selected")).toBe("false");
+    });
+
+    test("renders the tab panels", async () => {
+        const wrapper = mount(componentWrapper, { attachTo: document.body });
+        await wrapper.vm.$nextTick();
+
+        const tabPanls = wrapper.findAll(`[data-oruga="tabs-item"]`);
+
+        expect(tabPanls.length).toBe(3);
+        expect(tabPanls[0].text()).toBe("Tab 1 Content");
+        expect(tabPanls[0].isVisible()).toBeTruthy();
+        expect(tabPanls[1].text()).toBe("Tab 2 Content");
+        expect(tabPanls[1].isVisible()).toBeFalsy();
+        expect(tabPanls[2].text()).toBe("Tab 3 Content");
+        expect(tabPanls[2].isVisible()).toBeFalsy();
+    });
+
+    test("switches the content based on the tab clicked", async () => {
+        const wrapper = mount(componentWrapper, { attachTo: document.body });
+        await wrapper.vm.$nextTick();
+
+        const tabs = wrapper.findAll(".o-tabs__tab");
+        const tabPanls = wrapper.findAll(`[data-oruga="tabs-item"]`);
+
+        // clicking the second tab reveals the second content
+        // and hides the first content
+        await tabs[1].trigger("click");
+        expect(tabPanls[1].isVisible()).toBeTruthy();
+        expect(tabPanls[0].isVisible()).toBeFalsy();
+
+        // clicking the third tab reveals the third content
+        //  and hides the second content
+        await tabs[2].trigger("click");
+        expect(tabPanls[2].isVisible()).toBeTruthy();
+        expect(tabPanls[1].isVisible()).toBeFalsy();
+    });
+});