Pill tabs that switch which ONE of several sibling atoms is visible, e.g. "how will you give me the source — a URL, a file, or pasted text" — rather than showing every input area stacked and unlabelled at once. panels maps a tab's value to ANOTHER layout element's id and toggles that element's own wrapper directly; safe regardless of layout order, since the whole surface's markup exists before any atom's script runs. Same direct-engine pattern as lens_grid/domain_picker.
| Surface | Note |
|---|---|
| Renders as plain text tab labels; every sibling panel stays visible (no show/hide, no click affordance). |
| Field | Type | |
|---|---|---|
| target | string. A ValueStore primitive's id, set to the selected tab's value on click. | optional |
| options | array of {value, label, selected?} (required). | required |
| panels | object mapping a tab value to another layout element's id (required) — that element's wrapper is shown when its tab is selected, hidden otherwise. | required |
{
"type": "tab_group",
"options": [
{
"label": "Option A",
"value": "a"
},
{
"label": "Option B",
"value": "b"
},
{
"label": "Option C",
"value": "c"
}
],
"panels": "Panels"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:tab_group",
"displayName": "Tab Group",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/tab_group",
"capabilities": [
"google-apps-script-web",
"mcp-apps"
],
"description": "Pill tabs that switch which ONE of several sibling atoms is visible, e.g. \"how will you give me the source \u2014 a URL, a file, or pasted text\" \u2014 rather than showing every input area stacked and unlabelled at once. panels maps a tab's value to ANOTHER layout element's id and toggles that element's own wrapper directly; safe regardless of layout order, since the whole surface's markup exists before any atom's script runs. Same direct-engine pattern as lens_grid/domain_picker.",
"representativeQueries": [
"show a pill tabs that show/hide sibling layout elements",
"pill tabs that switch which one of several sibling atoms is visible, e.g. \"how will you give me the",
"render a tab group"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy