1. Home
2. Components
3. Drag Selectable

# Drag Selectable

A React component system that enables drag selection over a vertical list of items with toggle-based multi-select behavior.

## Live Example

Try the drag selection below:

- Normal drag: Toggle selection
- Ctrl/Cmd + drag: Replace selection
- Escape: Clear all selections

0 item s selected Clear All Learn React hooks Build a todo app Implement drag selection Style with Tailwind CSS Add dark mode support Write unit tests Deploy to production Add keyboard shortcuts Improve accessibility Add animations ```tsx
import React from 'react';
import { Card, Badge, useDragSelect } from '@vuer-ai/vuer-uikit';

const TODOS = [
  { key: "1", title: "Learn React hooks" },
  { key: "2", title: "Build a todo app" },
  { key: "3", title: "Implement drag selection" },
  // ... more items
];

export default function DragSelectExample() {
  const { selectedItems, getItemProps, clearSelection } = useDragSelect();

  return (
    <div>
      <button onClick={clearSelection}>
        Clear ({selectedItems.size} selected)
      </button>
      
      {TODOS.map(todo => (
        <TodoItem
          key={todo.key}
          title={todo.title}
          checked={selectedItems.has(todo.key)}
          {...getItemProps(todo.key)}
        />
      ))}
    </div>
  );
}
```

## Simple API

The useDragSelect() hook provides everything you need for drag selection:

Returns:

- selectedItems: Set<string> - Currently selected item IDs
- getItemProps(id: string) - Props to spread on selectable items
- clearSelection() - Function to clear all selections
- isSelected(id: string) - Check if item is selected

Usage:
Just import the hook, call it, and spread getItemProps(id) on your items. The hook handles all the complex state management, event handling, and keyboard shortcuts automatically.

## Features

- Automatic Event Handling - Mouse and keyboard events handled internally
- Modifier Key Support - Ctrl/Cmd for replace mode, default toggle mode
- Global Events - Mouse up and Escape key work anywhere on page
- TypeScript Support - Fully typed hook and props
- Zero Dependencies - Pure React implementation

## Selection Modes

- Toggle (default): Items flip their selection state during drag
- Replace (Ctrl/Cmd + drag): Clear existing selection, start new selection range

## Accessibility

- Semantic HTML structure
- Keyboard navigation support
- Screen reader friendly markup
- Clear visual feedback for selection states