add introduction

articles/components/grid/selection.adoc

@@ -68,7 +68,18 @@ include::{root}/frontend/demo/component/grid/react/grid-multi-select-mode.tsx[re
 endif::[]
 --
 
-In addition to selecting rows individually, a range of rows can be selected by dragging from one selection checkbox to another, if enabled:
+=== Range Selection
+
+In addition to selecting rows individually, you may want to enable users to select a range of rows by holding kbd:[Shift]. Since there is a variety of possible behaviors for range selection, Grid provides the `item-toggle` event to create your own implemention. Typically, you would use this event to track the first and last selected rows. When kbd:[Shift] is pressed, you can then select or deselect all rows between them based on their selection state.
+
+In the example below, the first toggled row is stored in the `firstItem` variable. When the user holds kbd:[Shift] and selects a row, all rows between the first and current row are selected. Similarly, if the user deselected a row, all rows within the range are also deselected. After that, the `firstItem` variable is updated to the current row for the next selection.
+
+[.example]
+
+
+// TODO: Add example
+
+A range of rows can also be selected by dragging from one selection checkbox to another, if enabled:
 
 [.example]
 --
@@ -100,6 +111,9 @@ selectionModel.setDragSelect(true);
 
 --
 
+
+[.example]
+
 == Selection Modes in Flow
 
 Each selection mode is represented by a [classname]`GridSelectionModel`, accessible through the [methodname]`getSelectionModel()` method, which can be cast that to the specific selection model type, [classname]`SingleSelectionModel` or [classname]`MultiSelectionModel`. These interfaces provide selection mode specific APIs for configuration and selection events.