Element: #387 Shift range selection (inputs/checkbox)
What it shows: Five checkboxes where Shift+click selects the whole range from the last clicked row, using the forwarded onclick and data-testid.
When to use: Lists and tables with row selection that need Shift range selection.
Spec:
- `onclick={(e) => (shift = e.shiftKey)}` is forwarded to the input and runs just before `onchange`
- `onchange={(on) => toggle(i, on)}` applies the state to every row between the anchor and the clicked row when shift was held
- `data-testid="row-{i}"` lands on the native input
- Footer line counts the selected rows
Tags: checkbox, shift, range selection, table, list, data-testid
Needs: @codeatlasdev/ui@4.4.0
Components: Checkbox
Live demo: https://ui.codeatlas.com.br/docs/inputs/checkbox#shift-range-selection
{#each rows as row, i (row)}
-
(shift = e.shiftKey)}
onchange={(on) => toggle(i, on)}
/>
{/each}
{selected.filter(Boolean).length} selected. Shift+click extends the range.