I am currently working with 2 radio buttons and I had hoped to utilize tabIndex on each radio input. This way, users could navigate between the inputs and select values using the up and down arrow keys on their keyboards. However, it seems that this functionality isn't working as expected in my code.
<div>
{[
{
id: '1',
name: 'One',
label: '1',
value: false,
defaultChecked: true,
},
{
id: '2',
name: 'Two',
label: '2',
value: true,
},
].map(({ id, name, label, value, defaultChecked }) => (
<div key={id} >
<Radio
key={id}
id={id}
name={name}
value={value.toString()}
defaultChecked={defaultChecked}
onChange={e => console.log(e)}
tabIndex={+id}
>
{label}
</Radio>
</div>
))}
</div>
If you'd like to see a demo of this in action, you can check out the link below: https://stackblitz.com/edit/react-ts-xbcqdf