shadcn.io is not affiliated with official shadcn/ui
Triggers And Actions Grid Integration Block for React Aria
An integration grid section for a form tool working with Zapier: a derived tally and status line, then a split with the three triggers at the start and the three actions at the end, each a checkbox cell in shared hairlines.
Installation
Overview
An integration grid section for React with React Aria, written for Formsill, a fictional intake-form tool for service businesses, and its Zapier connection. A compact header carries the mark pair at its end. Under a band rule, a tally is worked out from the choices ("2 triggers and 1 action on") beside a polite status line that is in the page from load. Then a split behind a divider holds two groups: at the start the three triggers Formsill offers in Zapier, labelled "When this happens", and at the end the three actions, labelled "Do this". Each is a checkbox cell in shared hairlines with a title and one line about what it does, a ticked cell takes a solid muted tint, and each group counts its own ("2 of 3 on"). On a phone the groups stack and the divider turns into a rule. Ticking a cell changes this page only. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides and Checkbox with your theme's tokens for every colour. Zapier is named in text only: no Zapier logo, colour or wordmark ships with the block. The triggers and actions are example data.
FAQ
Are triggers and actions Zapier's terms?
Yes: in Zapier a trigger is the event that starts a Zap and an action is a step the Zap runs afterwards. Which ones Formsill really offers is for your own app to say. Edit TRIGGERS and ACTIONS at the top of the file: an id, a title, a line and whether it starts on.
Where does the tally come from?
From the ticks, with each count run through a singular and plural helper: it never says "1 triggers". Each group's "2 of 3 on" and the status line, which names the cell you changed, come from the same state.
What stays local?
Everything: ticking is page state, and the status line says that nothing is sent to Zapier from load. Wire the ticks to your own settings where the demo changes state.
How do keyboard and screen reader users work it?
Each group is a labelled list ("Triggers", "Actions") of whole-cell labels, so clicking anywhere in a cell toggles it. Each checkbox is named by its title and described by its line, and the focus ring shows on the box. The status line is a polite live region.
Does it differ between the seven targets?
Only in how each library reports a checkbox change; the markup, the copy and the behaviour are the same everywhere.
How does it behave on a phone and in right-to-left layouts?
On a phone the two groups stack, with a rule between them where the divider was. In a right-to-left layout the groups swap sides and the checkboxes sit at the end; the counts sit in their own isolates. The header fades up once on load, and reduced motion turns that off.