# Touch Selections

A tutorial showing how to make different selections with the touch functionality in SpreadJS

## Content

This topic describes selection behavior in touch-enabled environments.
In mouse-based interaction, selections use a fill handle in the bottom-right corner of the active cell. In touch-enabled environments, circular selection indicators (also called selection grippers) appear at the corners of the selected range and are used to resize the selection.

### Selection Indicators

Selection indicators appear at the top-left and bottom-right corners of a selected range.
![SpreadJS touch selection displays circular selection indicators at the top-left and bottom-right corners of the active cell range for resizing.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260630.75d8ee.png)
These indicators allow you to adjust the selection by dragging.

### Select a Cell or Cell Range

1. Tap a cell to select it. Selection indicators appear at the corners of the cell.
2. Press and drag a selection indicator.
3. Release to complete the selection.

![SpreadJS demonstrates dragging a touch selection indicator to expand a selected worksheet cell range in the direction of the gesture.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/SelectCells-20260630.2c1607.gif?width=400)
The selected range expands based on the drag direction.

### Select a Row or Column

* Tap a row header to select an entire row.
* Tap a column header to select an entire column.

After selecting a row or column, you can drag a selection indicator to extend the selection across multiple rows or columns.
To select the entire worksheet, tap the corner header.
![SpreadJS demonstrates selecting entire rows, columns, or the worksheet corner, then dragging selection indicators across adjacent ranges.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/SelectRC-20260630.80a59b.gif?width=400)

### Select Multiple Ranges

Multiple range selection follows the standard keyboard interaction model and requires a keyboard.
In environments where a keyboard is available:

1. Select a range.
2. Press and hold the **Ctrl** key.
3. Tap a new cell to start another selection.
4. Release the **Ctrl** key.
5. Drag a selection indicator to adjust the new range if needed.

In touch-only environments without a keyboard, multiple range selection is not available.

### Customize the Selection Indicator

You can customize the size of the touch selection indicator using CSS.
Define the `width` property of the `.sjs-touch-selection-indicator` class:

```javascript
.sjs-touch-selection-indicator {    
  width: 16px;
}
```

* The default size is **16px**.
* The supported range is **8px to 32px**.
* If the class or width property is not defined, the default size is used.

The interactive hit area of the indicator is automatically adjusted to improve touch usability.