Keyboard Navigation

By default, the keyboard navigation of the ColorPalette is enabled.

The ColorPalette supports the following keyboard shortcuts:

ShortcutDescription
Down ArrowMoves down the selection.
Up ArrowMoves up the selection.
Left ArrowMoves the selection to the left.
Right ArrowMoves the selection to the right.
EnterChanges the color to the selected one.
class App extends React.Component {
    value = 'rgba(237, 126, 50, 1)';
    colorPalette;

    componentDidMount() {
        this.colorPalette.wrapper.focus();
    }

    render() {
        return(
            <div className="example-wrapper">
                <ColorPalette
                    ref={(colorPalette) => { this.colorPalette = colorPalette }}
                    defaultValue={this.value}
                />
                <p>(use <code>←↓↑→</code> to navigate, <code>enter</code> to select the value)</p>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /