Tabulate

Enhance the behavior of the Tab key for a better interaction experience.

Introduction

Radios can be focused through the arrow keys in native HTML, many users don’t know this. In Luda, we enhanced the behavior of the Tab key for focusing radios more easily.

When a radio is focused, the next radio has the same name can be focused when the Tab key pressed and the prev radio has the same name can be focused when the Tab key and the Shift key pressed together. Let’s see the below examples.

Examples

Press the Tab key alone or with the Shift together to focus these radios.

One Two

<div class="fm fm-radio">
  <label><input type="radio" name="tabulate_demo" value="one">One</label>
  <label><input type="radio" name="tabulate_demo" value="two">Two</label>
</div>

HTML Attributes

data-tabulate=”false”

<!-- @example
Add data-tabulate="false" to the <html> tag
to disable the enhancement to the Tab key.
-->
<html data-tabulate="false">...</html>