The Keyboard sensor responds to Keyboard events. This sensor is enabled by default.

The keyboard sensor activates when the source element or handle of a draggable instance is focused and the Space or Enter key is pressed.

​
Usage

The Keyboard sensor can be configured to respond to different keyboard codes:

import {KeyboardSensor} from '@dnd-kit/dom/sensors';

const sensors = [
  KeyboardSensor.configure({
    keyboardCodes: {
      start: ['Space', 'Enter'],
      cancel: ['Escape'],
      end: ['Space', 'Enter'],
      up: ['ArrowUp'],
      down: ['ArrowDown'],
      left: ['ArrowLeft'],
      right: ['ArrowRight'],
    },
  }),
];

​
API Reference

​
Options

The PointerSensor accepts the following options:

keyboardCodes
{[key: string]: string[]}

Use this option to customize the keyboard codes that should trigger different drag operations:

PropertyDescription
startThe keyboard codes that should trigger the start of a drag operation.
cancelThe keyboard codes that should trigger the cancelation of a drag operation.
endThe keyboard codes that should trigger the end of a drag operation.
upThe keyboard codes that should trigger the upward movement of a drag operation.
downThe keyboard codes that should trigger the downward movement of a drag operation.
leftThe keyboard codes that should trigger the leftward movement of a drag operation.
rightThe keyboard codes that should trigger the rightward movement of a drag operation.
PointerModifiers