Keyboard Navigation

The keyboard navigation of the Checkbox is always available.

The Checkbox supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Tab(Accessibility mode) Focuses the Checkbox element.
SpaceToggles the component checked state.
EnterToggles the component checked state.
class App extends React.Component {
    componentDidMount() {
        this.checkbox.element.current.focus();
    }

    render() {
        return (
            <div>
                <Checkbox ref={ (checkbox) => this.checkbox = checkbox } label="Initially focused"/>
                <br />
                <Checkbox label="Secondary focused"/>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /