diff --git a/src/form/checkbox.js b/src/form/checkbox.js
index e3af97b..8c4edc5 100644
--- a/src/form/checkbox.js
+++ b/src/form/checkbox.js
@@ -251,7 +251,7 @@ class CheckboxItem extends Component {
 
   render() {
     return html` <label
-      tabindex=${this.disabled ? 'none' : 0}
+      tabindex=${this.disabled || this.readOnly ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
     >
diff --git a/src/form/radio.js b/src/form/radio.js
index befb5be..e18093d 100644
--- a/src/form/radio.js
+++ b/src/form/radio.js
@@ -247,7 +247,7 @@ class RadioItem extends Component {
 
   render() {
     return html` <label
-      tabindex=${this.disabled ? 'none' : 0}
+      tabindex=${this.disabled || this.readOnly ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
     >
diff --git a/src/form/switch.js b/src/form/switch.js
index 7fbf08b..b140f32 100644
--- a/src/form/switch.js
+++ b/src/form/switch.js
@@ -209,7 +209,7 @@ class Switch extends Component {
   render() {
     let classes = classMap({ dot: true, open: this.value })
     return html` <label
-      tabindex=${this.disabled ? 'none' : 0}
+      tabindex=${this.disabled || this.readOnly ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
     >