RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
Key | Function |
---|---|
tab | Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. |
left arrow up arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
right arrow down arrow | Moves focus to the next radio button, if there is none then first radio button receives the focus. |
space | If the focused radio button is unchecked, changes the state to checked. |