Keyboard Navigation

The keyboard navigation of the RadioGroup is always available.

The RadioGroup supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
TabIf any radio button is checked, focus is set on the checked button. If none of the radio buttons are checked, focus is set on the first radio button in the group.
SpaceChecks the focused radio button if it is not already checked.
Right Arrow and Down ArrowMove focus and check the next radio button in the group.
Left Arrow and Up ArrowMove focus and check the previous radio button in the group.
const data = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' },
    { label: 'Other', value: 'other' },
];

class App extends React.Component {
    componentDidMount() {
        this.radiogroup.element.current.focus();
    }

    render() {
        return (
            <div>
                <RadioGroup data={data} ref={ (radiogroup) => this.radiogroup = radiogroup } />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);