Keyboard Navigation

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

The ColorPicker supports the following keyboard shortcuts:

ShortcutDescription
Alt+Down ArrowOpens the popup and moves the focus to the ColorGradient or ColorPalette.
Alt+Up ArrowCloses the popup and moves the focus to the input element.
EnterCloses the popup and moves the focus to the input element.
EscCloses the popup and moves the focus to the input element.
class App extends React.Component {
    value = 'rgba(237, 126, 50, 1)';
    colorPicker;

    componentDidMount() {
        this.colorPicker.element.focus();
    }

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

Navigation Scenarios

When the popup of the ColorPicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the ColorPalette and ColorGradient.

 /