CODEWITHSUNDEEP
htmlcss
Ahmad
Ahmad

Reputation: 186

radio button tab sequencing

Default tab indexing is NOT working with radio buttons, working fine with any other HTML component e.g. checkbox, textbox etc.

Below basic code not working for radio button tab index but working fine with checkbox. 

<div class="box">
  <input type="radio" name="rdgroup">H
  <input type="radio" name="rdgroup">E
  <input type="radio" name="rdgroup">L
</div>


<div class="box">
  <input type="checkbox" name="ckgroup">W
  <input type="checkbox" name="ckgroup">O
  <input type="checkbox" name="ckgroup">R
</div>

https://jsfiddle.net/wtyg7cLz/

Thank you :)

Upvotes: 3

Views: 8569

Answers (4)

shubham.k
shubham.k

Reputation: 36

enter code here


<div class="box">
  <input type="radio" name="rdgroup" tabindex="1">H
  <input type="radio" name="rdgroup" tabindex="2">E
  <input type="radio" name="rdgroup" tabindex="3">L
</div>


<div class="box">
  <input type="checkbox" name="ckgroup">W
  <input type="checkbox" name="ckgroup">O
  <input type="checkbox" name="ckgroup">R
</div>

you could use the tabindex attribute to get a workaround after the first radio button element gets focused the user can then use the arrow keys (default) to select the desired option.

kindly check the below link for more details. https://www.w3schools.com/tags/att_global_tabindex.asp

Upvotes: 0

Shahram
Shahram

Reputation: 330

As @Just Code said:

When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.

For radio buttons as a group if they have the same name then changing focus will work or navigate with arrow keys like (right, left, up, down).that is the default behavior of radio buttons, it is better to leave it as default. If you prefer tab control then i guess you have to implement it with javascript, because if you give them different name user can select all different radio buttons

Upvotes: 1

Pavan Nagadiya
Pavan Nagadiya

Reputation: 682

Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group....

Upvotes: 9

Just code
Just code

Reputation: 13801

When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.

Focus can move to a radio group via: The Tab key An Access Key or mnemonic targeting the label Activation of the label (through Assistive Technology mechanism)

The Tab key moves focus between radio button groups and other widgets.

When focus is on the group and when no radio button is selected: Tab key press moves focus to the first radio button in the group, but does not select the radio button. Shift+Tab key press moves focus to the last radio button in the group, but does not select the radio button.

Source: https://www.w3.org/wiki/RadioButton

Upvotes: 3

Related Questions