Edit Bulk Selection

Name

Also known as (comma separated)

Brief definition Selection intended for bulk operations.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Customer orders" }, { "id": "accent", "type": "color", "label": "Toolbar colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "selectedCount", "type": "select", "label": "Rows selected", "default": "2", "options": [ "0", "2", "4" ] }, { "id": "actionLabel", "type": "text", "label": "Bulk action label", "default": "Archive" }, { "id": "compact", "type": "toggle", "label": "Compact rows", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bulk{{#if compact}} bulk--compact{{/if}}\" data-count=\"{{selectedCount}}\" style=\"--accent:{{accent}};\">\n <div class=\"bulk__toolbar\" role=\"toolbar\" aria-label=\"Bulk actions\">\n <span class=\"bulk__count\">{{selectedCount}} selected</span>\n <button type=\"button\" class=\"bulk__btn\">{{actionLabel}}</button>\n <button type=\"button\" class=\"bulk__btn bulk__btn--ghost\">Cancel</button>\n </div>\n <div class=\"bulk__scroll\">\n <table class=\"bulk__table\">\n <caption>{{caption}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"bulk__checkcol\"><label class=\"chk\"><input type=\"checkbox\"><span class=\"sr-only\">Select all rows</span></label></th>\n <th scope=\"col\">Order</th>\n <th scope=\"col\">Customer</th>\n <th scope=\"col\">Status</th>\n <th scope=\"col\">Total</th>\n </tr>\n </thead>\n <tbody>\n <tr><td><label class=\"chk\"><input type=\"checkbox\" checked><span class=\"sr-only\">Select order #1042</span></label></td><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n <tr><td><label class=\"chk\"><input type=\"checkbox\" checked><span class=\"sr-only\">Select order #1041</span></label></td><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n <tr><td><label class=\"chk\"><input type=\"checkbox\"><span class=\"sr-only\">Select order #1040</span></label></td><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n <tr><td><label class=\"chk\"><input type=\"checkbox\"><span class=\"sr-only\">Select order #1039</span></label></td><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}\n.bulk { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.bulk__toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent); color: #FAF7F2; }\n@media (prefers-reduced-motion: no-preference) {\n.bulk__toolbar { transition: background .15s; }\n}\n.bulk[data-count=\"0\"] .bulk__toolbar { display: none; }\n.bulk__count { font-weight: 600; margin-right: auto; }\n.bulk__btn { border: 1px solid #FAF7F2; background: transparent; color: inherit; padding: 6px 12px; border-radius: 6px; font: inherit; cursor: pointer; }\n.bulk__btn:hover { background: #FAF7F226; }\n.bulk__btn:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }\n.bulk__btn--ghost { border-color: #FAF7F260; }\n.bulk__scroll { overflow-x: auto; }\n.bulk__table { border-collapse: collapse; width: 100%; }\n.bulk__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.bulk__table th, .bulk__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.bulk--compact .bulk__table th, .bulk--compact .bulk__table td { padding: 4px 10px; }\n.bulk__table input[type=\"checkbox\"] { accent-color: var(--accent); width: 16px; height: 16px; }\n.bulk[data-count=\"2\"] tbody tr:nth-child(-n+2) { background: #A8E6C155; }\n.bulk[data-count=\"4\"] tbody tr:nth-child(-n+4) { background: #A8E6C155; }\n</style>", "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden{{#if compact}} [&_td]:py-1 [&_th]:py-1{{/if}}\" data-count=\"{{selectedCount}}\" style=\"--accent:{{accent}};\">\n <div class=\"flex items-center gap-2.5 px-3.5 py-2.5 text-[#FAF7F2]\" style=\"background:{{accent}}\" role=\"toolbar\" aria-label=\"Bulk actions\">\n <span class=\"font-semibold mr-auto\">{{selectedCount}} selected</span>\n <button type=\"button\" class=\"border border-[#FAF7F2] bg-transparent text-inherit px-3 py-1.5 rounded-md hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2\">{{actionLabel}}</button>\n <button type=\"button\" class=\"border border-white/40 bg-transparent text-inherit px-3 py-1.5 rounded-md hover:bg-white/15\">Cancel</button>\n </div>\n <div class=\"overflow-x-auto\">\n <table class=\"border-collapse w-full\">\n <caption class=\"text-left font-semibold px-3.5 py-2.5\">{{caption}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020]\"><label class=\"inline-flex\"><input type=\"checkbox\" class=\"[accent-color:var(--accent)] w-4 h-4\"><span class=\"sr-only\">Select all rows</span></label></th>\n <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020] whitespace-nowrap\">Order</th>\n <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020] whitespace-nowrap\">Customer</th>\n <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020] whitespace-nowrap\">Status</th>\n <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020] whitespace-nowrap\">Total</th>\n </tr>\n </thead>\n <tbody>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\"><label class=\"inline-flex\"><input type=\"checkbox\" checked class=\"[accent-color:var(--accent)] w-4 h-4\"><span class=\"sr-only\">Select order #1042</span></label></td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1042</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">A. Whitfield</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£64.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\"><label class=\"inline-flex\"><input type=\"checkbox\" checked class=\"[accent-color:var(--accent)] w-4 h-4\"><span class=\"sr-only\">Select order #1041</span></label></td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">R. Okafor</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Processing</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\"><label class=\"inline-flex\"><input type=\"checkbox\" class=\"[accent-color:var(--accent)] w-4 h-4\"><span class=\"sr-only\">Select order #1040</span></label></td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">M. Iqbal</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\"><label class=\"inline-flex\"><input type=\"checkbox\" class=\"[accent-color:var(--accent)] w-4 h-4\"><span class=\"sr-only\">Select order #1039</span></label></td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1039</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">S. Novak</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Refunded</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£40.00</td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}\n[data-count=\"0\"] [role=\"toolbar\"] { display: none; }\n[data-count=\"2\"] tbody tr:nth-child(-n+2) { background: #A8E6C155; }\n[data-count=\"4\"] tbody tr:nth-child(-n+4) { background: #A8E6C155; }\n</style>", "react": "function BulkSelection({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n selectedCount = \"{{selectedCount}}\",\n actionLabel = \"{{actionLabel}}\",\n compact = {{compact}},\n}) {\n const rows = [\n [\"#1042\", \"A. Whitfield\", \"Shipped\", \"£64.00\"],\n [\"#1041\", \"R. Okafor\", \"Processing\", \"£128.50\"],\n [\"#1040\", \"M. Iqbal\", \"Shipped\", \"£22.00\"],\n [\"#1039\", \"S. Novak\", \"Refunded\", \"£40.00\"],\n ];\n const n = Number(selected);\n const pad = compact ? \"4px 10px\" : \"10px 14px\";\n return (\n <div style={{ maxWidth: 480, borderRadius: 10, border: \"1px solid #24143020\", overflow: \"hidden\", font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\" }}>\n {n > 0 && (\n <div role=\"toolbar\" aria-label=\"Bulk actions\" style={{ display: \"flex\", alignItems: \"center\", gap: 10, padding: \"10px 14px\", background: accent, color: \"#FAF7F2\" }}>\n <span style={{ fontWeight: 600, marginRight: \"auto\" }}>{n} selected</span>\n <button type=\"button\" style={{ border: \"1px solid #FAF7F2\", background: \"transparent\", color: \"inherit\", padding: \"6px 12px\", borderRadius: 6, font: \"inherit\", cursor: \"pointer\" }}>{actionLabel}</button>\n <button type=\"button\" style={{ border: \"1px solid #FAF7F260\", background: \"transparent\", color: \"inherit\", padding: \"6px 12px\", borderRadius: 6, font: \"inherit\", cursor: \"pointer\" }}>Cancel</button>\n </div>\n )}\n <div style={{ overflowX: \"auto\" }}>\n <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n <thead>\n <tr>\n <th scope=\"col\" style={{ padding: pad, borderBottom: \"1px solid #24143020\" }}><input type=\"checkbox\" aria-label=\"Select all rows\" style={{ accentColor: accent }} /></th>\n {[\"Order\", \"Customer\", \"Status\", \"Total\"].map((h) => (\n <th key={h} scope=\"col\" style={{ padding: pad, textAlign: \"left\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" }}>{h}</th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row, i) => (\n <tr key={row[0]} style={{ background: i < n ? \"#A8E6C155\" : \"transparent\" }}>\n <td style={{ padding: pad, borderBottom: \"1px solid #24143020\" }}>\n <input type=\"checkbox\" defaultChecked={i < n} aria-label={`Select order ${row[0]}`} style={{ accentColor: accent }} />\n </td>\n {row.map((cell, j) => <td key={j} style={{ padding: pad, borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" }}>{cell}</td>)}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }