shadcn.io is not affiliated with official shadcn/ui
Row Selection Table Block for Ark UI
A stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
Installation
Overview
Let people pick rows and see what they chose, with this row selection table for React with Ark UI. A framed panel holds a native table of ten plants from a nursery (name, pot size, price and stock) with a Checkbox at the start of every row and one in the head that is ticked, empty or a dash when only some rows are ticked. Click one box, Shift-click another and every row between them takes the state of the box you clicked; Shift+Space does the same from the keyboard. Ticked rows are a solid tint with a bar at their start, and one polite line says how many are ticked and what they cost together ("3 selected, $41.50 in total"). A foot line explains the Shift trick and a Clear button unticks everything. There is no action bar here: choosing is the whole feature, so it pairs with whatever your app does next. It's built from Checkbox, Button and Guides, with a CSS entrance only. For stock lists, carts to build, anything you tick before you act.
FAQ
How does Shift-click range select work?
The block remembers the last box you pressed. When you press another with Shift held, every row from the remembered one to this one is ticked, or cleared if the box you pressed ended up unticked, whichever way round they are in the table. A press without Shift moves the remembered box and changes only that row. The same works from the keyboard: focus a box and press Shift+Space.
What does the head checkbox do?
It ticks every row, or clears them all when every row is ticked. When only some rows are ticked it shows a dash instead of a tick, which is the standard way to say "some of these"; pressing it then ticks the rest. It is named "Select all plants", and each row's box is named "Select" followed by the plant, so a screen reader never hears an unlabelled checkbox.
Where does the total come from?
Prices are typed in cents and the line adds the ticked rows with a small helper, so it always equals what the rows show and never meets a rounding error. The line is the only live region: it is announced each time the selection changes, and a range adds a sentence naming the first and last plant for screen readers.
How does it look on a phone?
The Pot and Stock columns fold into a line under the plant's name, so nothing scrolls sideways at 320 pixels, and every box and the total stay on the first screen. The total line wraps under the heading.
Is it accessible?
It is a real table with a caption, column headers and the plant's name as each row header, and the boxes are real checkboxes with visible focus. Selected rows are marked by a tint, a bar and the count, never by colour alone. The table's region is focusable so a keyboard can scroll it if it is ever wider than its frame.
What stays local, and how do I act on the selection?
The selection is plain state in the demo: nothing is saved or sent. To act on it, read the chosen ids and call your own code, or see the bulk actions table for a version with an action bar, select across pages and Undo. Wire pick to your own selection store if rows come from a server.