I found an even better way based on Sebastian Kaczmarek's idea.Locate the loki.css file (not sure whether the filename stays the same), locate this section:

input[type="radio"] {
  display: none;
}

Change this to:

input[type="radio"] {
  display: inline;
  visibility: visible;
  opacity: 0;
}

Next locate

input[type="radio"] + label:before {

Copy that section to:

input[type="radio"]:focus + label:before {
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 5px;
  background: white center center no-repeat;
  border: 2px solid #108310;  <- UPDATED
  border-radius: 100%;
  box-shadow: 0 0 1px #cccccc;
  vertical-align: text-top;
}

Note the ":focus" in the first line. I update the border to show the user where focus is, so they can easily just tab and arrow keys.

---

I haven't seen any progress in this, though MDB staff is always working, I think this should get a lot of attention, as in many atmospheres this is considered very "bad" in terms of user experience. When one tabs through form components, he must know that he is focused on a checkbox or radio button.

STAFF - can you please handle this? I already put together some css as a direction: This code will make the focused mdb checkbox - have a line under it:

.form-check-input:focus + .form-check-label 
{border: solid 2px #8A8A8A;
 border-top: none;
 border-left: none;
 border-right: none;}

And here, I even created a snippet: https://mdbootstrap.com/snippets/jquery/ramix/1462115

---

Any progress on this ?? I would expect being able to tab to a checkbox as being standard functionality, it's kind of an incomplete component if you can't :(  

---

Hi Brett, This issue occurs because the buttons which you see are actually <label>s. The real <input>s are hidden in CSS. The key thing here is that they have visibility: hidden; rule applied and that's why you cannot tab through your form. The element is not visible in the document so it can't get focus. However, you can override this rule by editing your CSS files, e.x. app.component.scss, just add this lines:

:host /deep/ [type=checkbox],
:host /deep/ [type=radio] {
    visibility: visible !important;
    opacity: 0 !important;
}

Now you will be able to tab through your form. As an add-on, you can add some more styles to see how tabbing work. You can add a slight border to elements which got focused by adding this lines to your CSS file:

:host /deep/ [type=checkbox]:focus + label,
:host /deep/ [type=radio]:focus + label {
    border: 1px solid rgb(207, 232, 255);
}

---