Group

Joins related controls — inputs, buttons, checkboxes, radios, badges — into one connected unit. It uses the children’s own borders: the corners where they meet are flattened and adjacent borders overlap into a single seam, so the group reads as one element with no double border and no frame of its own. Need a real bordered/padded container around the joined children? Opt in with the Panel chrome props (border, padding, background, emphasis, …). For overlapping avatars, use variant="stack".

Basic

The default controls variant joins inputs, buttons, checkboxes, and radios into a single connected element by flattening the inner corners and merging each child’s own border with its neighbour’s.

AstroReactSvelteVue

PreviewCode

---
import Group from "../Group.astro";
import Input from "@pindoba/astro-input";
import Button from "@pindoba/astro-button";
import Checkbox from "@pindoba/astro-checkbox";
import Radio from "@pindoba/astro-radio";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "full" })}>
  <div>
    <h3>Full width — search bar</h3>
    <Group variant="controls" fullWidth>
      <Input fullWidth placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Full width — segmented control</h3>
    <Group variant="controls" fullWidth>
      <Radio
        id="group-fw-env-dev"
        appearance="button"
        name="group-fw-env"
        value="dev"
        fullWidth
        checked>Dev</Radio
      >
      <Radio
        id="group-fw-env-staging"
        appearance="button"
        name="group-fw-env"
        value="staging"
        fullWidth>Staging</Radio
      >
      <Radio
        id="group-fw-env-prod"
        appearance="button"
        name="group-fw-env"
        value="prod"
        fullWidth>Prod</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Input with button</h3>
    <Group variant="controls">
      <Input placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Button on both sides</h3>
    <Group variant="controls">
      <Button emphasis="secondary">-</Button>
      <Input placeholder="Enter value" />
      <Button emphasis="secondary">+</Button>
    </Group>
  </div>

  <div>
    <h3>Multiple inputs</h3>
    <Group variant="controls">
      <Input placeholder="First name" />
      <Input placeholder="Last name" />
    </Group>
  </div>

  <div>
    <h3>Button group</h3>
    <Group variant="controls">
      <Button emphasis="secondary">Cut</Button>
      <Button emphasis="secondary">Copy</Button>
      <Button emphasis="secondary">Paste</Button>
    </Group>
  </div>

  <div>
    <h3>Mixed feedback buttons</h3>
    <Group variant="controls">
      <Button feedback="success">Save</Button>
      <Button feedback="warning" emphasis="secondary">Draft</Button>
      <Button feedback="danger" emphasis="secondary">Delete</Button>
    </Group>
  </div>

  <div>
    <h3>Tab horizontal</h3>
    <Group variant="controls">
      <Radio
        id="group-tab-h-all"
        appearance="tab"
        name="group-tab-h"
        value="all"
        checked>All</Radio
      >
      <Radio
        id="group-tab-h-active"
        appearance="tab"
        name="group-tab-h"
        value="active">Active</Radio
      >
      <Radio
        id="group-tab-h-archived"
        appearance="tab"
        name="group-tab-h"
        value="archived">Archived</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Tab vertical</h3>
    <Group variant="controls" orientation="vertical">
      <Radio
        id="group-tab-v-dashboard"
        appearance="tab"
        orientation="vertical"
        name="group-tab-v"
        value="dashboard"
        checked>Dashboard</Radio
      >
      <Radio
        id="group-tab-v-settings"
        appearance="tab"
        orientation="vertical"
        name="group-tab-v"
        value="settings">Settings</Radio
      >
      <Radio
        id="group-tab-v-profile"
        appearance="tab"
        orientation="vertical"
        name="group-tab-v"
        value="profile">Profile</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Vertical button group</h3>
    <Group variant="controls" orientation="vertical">
      <Button emphasis="secondary">Cut</Button>
      <Button emphasis="secondary">Copy</Button>
      <Button emphasis="secondary">Paste</Button>
    </Group>
  </div>

  <div>
    <h3>Vertical checkbox group</h3>
    <Group variant="controls" orientation="vertical">
      <Checkbox appearance="button" size="md">Bold</Checkbox>
      <Checkbox appearance="button" size="md">Italic</Checkbox>
      <Checkbox appearance="button" size="md">Underline</Checkbox>
    </Group>
  </div>

  <div>
    <h3>Vertical radio button group</h3>
    <Group variant="controls" orientation="vertical">
      <Radio
        id="group-view-v-list"
        appearance="button"
        size="md"
        name="view-v"
        value="list">List</Radio
      >
      <Radio
        id="group-view-v-grid"
        appearance="button"
        size="md"
        name="view-v"
        value="grid">Grid</Radio
      >
      <Radio
        id="group-view-v-table"
        appearance="button"
        size="md"
        name="view-v"
        value="table">Table</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Checkbox button group</h3>
    <Group variant="controls">
      <Checkbox appearance="button" size="md">Bold</Checkbox>
      <Checkbox appearance="button" size="md">Italic</Checkbox>
      <Checkbox appearance="button" size="md">Underline</Checkbox>
    </Group>
  </div>

  <div>
    <h3>Radio button group</h3>
    <Group variant="controls">
      <Radio
        id="group-view-list"
        appearance="button"
        size="md"
        name="view"
        value="list">List</Radio
      >
      <Radio
        id="group-view-grid"
        appearance="button"
        size="md"
        name="view"
        value="grid">Grid</Radio
      >
      <Radio
        id="group-view-table"
        appearance="button"
        size="md"
        name="view"
        value="table">Table</Radio
      >
    </Group>
  </div>
</div>

import { useState } from "react";
import { Group } from "../Group";
import Input from "@pindoba/react-input";
import Button from "@pindoba/react-button";
import Checkbox from "@pindoba/react-checkbox";
import Radio from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function BasicDemo() {
  const [selectedView, setSelectedView] = useState("list");
  const [selectedTab, setSelectedTab] = useState("all");
  const [selectedNav, setSelectedNav] = useState("dashboard");
  const [selectedFwEnv, setSelectedFwEnv] = useState("dev");

  return (
    <div className={stack({ gap: "xl", direction: "column", width: "full" })}>
      <div>
        <h3>Full width — search bar</h3>
        <Group variant="controls" fullWidth>
          <Input fullWidth placeholder="Search..." />
          <Button>Search</Button>
        </Group>
      </div>

      <div>
        <h3>Full width — segmented control</h3>
        <Group variant="controls" fullWidth>
          {[
            ["dev", "Dev"],
            ["staging", "Staging"],
            ["prod", "Prod"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-group-fw-env-${value}`}
              name="react-group-fw-env"
              appearance="button"
              value={value}
              fullWidth
              checked={selectedFwEnv === value}
              onChange={() => setSelectedFwEnv(value)}
            >
              {label}
            </Radio>
          ))}
        </Group>
      </div>

      <div>
        <h3>Input with button</h3>
        <Group variant="controls">
          <Input placeholder="Search..." />
          <Button>Search</Button>
        </Group>
      </div>

      <div>
        <h3>Button on both sides</h3>
        <Group variant="controls">
          <Button emphasis="secondary">-</Button>
          <Input placeholder="Enter value" />
          <Button emphasis="secondary">+</Button>
        </Group>
      </div>

      <div>
        <h3>Multiple inputs</h3>
        <Group variant="controls">
          <Input placeholder="First name" />
          <Input placeholder="Last name" />
        </Group>
      </div>

      <div>
        <h3>Button group</h3>
        <Group variant="controls">
          <Button emphasis="secondary">Cut</Button>
          <Button emphasis="secondary">Copy</Button>
          <Button emphasis="secondary">Paste</Button>
        </Group>
      </div>

      <div>
        <h3>Mixed feedback buttons</h3>
        <Group variant="controls">
          <Button feedback="success">Save</Button>
          <Button feedback="warning" emphasis="secondary">
            Draft
          </Button>
          <Button feedback="danger" emphasis="secondary">
            Delete
          </Button>
        </Group>
      </div>

      <div>
        <h3>Tab horizontal</h3>
        <Group variant="controls">
          {[
            ["all", "All"],
            ["active", "Active"],
            ["archived", "Archived"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-group-tab-h-${value}`}
              name="react-group-tab-h"
              appearance="tab"
              value={value}
              checked={selectedTab === value}
              onChange={() => setSelectedTab(value)}
            >
              {label}
            </Radio>
          ))}
        </Group>
      </div>

      <div>
        <h3>Tab vertical</h3>
        <Group variant="controls" orientation="vertical">
          {[
            ["dashboard", "Dashboard"],
            ["settings", "Settings"],
            ["profile", "Profile"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-group-tab-v-${value}`}
              name="react-group-tab-v"
              appearance="tab"
              orientation="vertical"
              value={value}
              checked={selectedNav === value}
              onChange={() => setSelectedNav(value)}
            >
              {label}
            </Radio>
          ))}
        </Group>
      </div>

      <div>
        <h3>Vertical button group</h3>
        <Group variant="controls" orientation="vertical">
          <Button emphasis="secondary">Cut</Button>
          <Button emphasis="secondary">Copy</Button>
          <Button emphasis="secondary">Paste</Button>
        </Group>
      </div>

      <div>
        <h3>Vertical checkbox group</h3>
        <Group variant="controls" orientation="vertical">
          <Checkbox appearance="button" size="md">
            Bold
          </Checkbox>
          <Checkbox appearance="button" size="md">
            Italic
          </Checkbox>
          <Checkbox appearance="button" size="md">
            Underline
          </Checkbox>
        </Group>
      </div>

      <div>
        <h3>Vertical radio button group</h3>
        <Group variant="controls" orientation="vertical">
          {[
            ["list", "List"],
            ["grid", "Grid"],
            ["table", "Table"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-group-view-v-${value}`}
              name="react-group-view-v"
              appearance="button"
              size="md"
              value={value}
              checked={selectedView === value}
              onChange={() => setSelectedView(value)}
            >
              {label}
            </Radio>
          ))}
        </Group>
      </div>

      <div>
        <h3>Checkbox button group</h3>
        <Group variant="controls">
          <Checkbox appearance="button" size="md">
            Bold
          </Checkbox>
          <Checkbox appearance="button" size="md">
            Italic
          </Checkbox>
          <Checkbox appearance="button" size="md">
            Underline
          </Checkbox>
        </Group>
      </div>

      <div>
        <h3>Radio button group</h3>
        <Group variant="controls">
          {[
            ["list", "List"],
            ["grid", "Grid"],
            ["table", "Table"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-group-view-${value}`}
              name="react-group-view"
              appearance="button"
              size="md"
              value={value}
              checked={selectedView === value}
              onChange={() => setSelectedView(value)}
            >
              {label}
            </Radio>
          ))}
        </Group>
      </div>
    </div>
  );
}

<script lang="ts">
  import Group from "../group.svelte";
  import Input from "@pindoba/svelte-input";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import Radio from "@pindoba/svelte-radio";
  import { stack } from "@pindoba/styled-system/patterns";

  let selectedView = $state("list");
  let selectedTab = $state("all");
  let selectedNav = $state("dashboard");
  let selectedFwEnv = $state("dev");
</script>

<div class={stack({ gap: "xl", direction: "column", width: "full" })}>
  <div>
    <h3>Full width — search bar</h3>
    <Group variant="controls" fullWidth>
      <Input fullWidth placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Full width — segmented control</h3>
    <Group variant="controls" fullWidth>
      <Radio
        appearance="button"
        bind:group={selectedFwEnv}
        value="dev"
        fullWidth>Dev</Radio
      >
      <Radio
        appearance="button"
        bind:group={selectedFwEnv}
        value="staging"
        fullWidth>Staging</Radio
      >
      <Radio
        appearance="button"
        bind:group={selectedFwEnv}
        value="prod"
        fullWidth>Prod</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Input with button</h3>
    <Group variant="controls">
      <Input placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Button on both sides</h3>
    <Group variant="controls">
      <Button emphasis="secondary">-</Button>
      <Input placeholder="Enter value" />
      <Button emphasis="secondary">+</Button>
    </Group>
  </div>

  <div>
    <h3>Multiple inputs</h3>
    <Group variant="controls">
      <Input placeholder="First name" />
      <Input placeholder="Last name" />
    </Group>
  </div>

  <div>
    <h3>Button group</h3>
    <Group variant="controls">
      <Button emphasis="secondary">Cut</Button>
      <Button emphasis="secondary">Copy</Button>
      <Button emphasis="secondary">Paste</Button>
    </Group>
  </div>

  <div>
    <h3>Mixed feedback buttons</h3>
    <Group variant="controls">
      <Button feedback="success">Save</Button>
      <Button feedback="warning" emphasis="secondary">Draft</Button>
      <Button feedback="danger" emphasis="secondary">Delete</Button>
    </Group>
  </div>

  <div>
    <h3>Tab horizontal</h3>
    <Group variant="controls">
      <Radio appearance="tab" bind:group={selectedTab} value="all">All</Radio>
      <Radio appearance="tab" bind:group={selectedTab} value="active"
        >Active</Radio
      >
      <Radio appearance="tab" bind:group={selectedTab} value="archived"
        >Archived</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Tab vertical</h3>
    <Group variant="controls" orientation="vertical">
      <Radio
        appearance="tab"
        orientation="vertical"
        bind:group={selectedNav}
        value="dashboard">Dashboard</Radio
      >
      <Radio
        appearance="tab"
        orientation="vertical"
        bind:group={selectedNav}
        value="settings">Settings</Radio
      >
      <Radio
        appearance="tab"
        orientation="vertical"
        bind:group={selectedNav}
        value="profile">Profile</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Vertical button group</h3>
    <Group variant="controls" orientation="vertical">
      <Button emphasis="secondary">Cut</Button>
      <Button emphasis="secondary">Copy</Button>
      <Button emphasis="secondary">Paste</Button>
    </Group>
  </div>

  <div>
    <h3>Vertical checkbox group</h3>
    <Group variant="controls" orientation="vertical">
      <Checkbox appearance="button" size="md">Bold</Checkbox>
      <Checkbox appearance="button" size="md">Italic</Checkbox>
      <Checkbox appearance="button" size="md">Underline</Checkbox>
    </Group>
  </div>

  <div>
    <h3>Vertical radio button group</h3>
    <Group variant="controls" orientation="vertical">
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="list">List</Radio
      >
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="grid">Grid</Radio
      >
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="table">Table</Radio
      >
    </Group>
  </div>

  <div>
    <h3>Checkbox button group</h3>
    <Group variant="controls">
      <Checkbox appearance="button" size="md">Bold</Checkbox>
      <Checkbox appearance="button" size="md">Italic</Checkbox>
      <Checkbox appearance="button" size="md">Underline</Checkbox>
    </Group>
  </div>

  <div>
    <h3>Radio button group</h3>
    <Group variant="controls">
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="list">List</Radio
      >
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="grid">Grid</Radio
      >
      <Radio
        appearance="button"
        size="md"
        bind:group={selectedView}
        value="table">Table</Radio
      >
    </Group>
  </div>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Group } from "@pindoba/vue-group";
import { Input } from "@pindoba/vue-input";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const col = stack({ gap: "xl", direction: "column", width: "full" });

const selectedView = ref("list");
const selectedTab = ref("all");
const selectedNav = ref("dashboard");
const selectedFwEnv = ref("dev");
</script>

<template>
  <div :class="col">
    <div>
      <h3>Full width — search bar</h3>
      <Group variant="controls" fullWidth>
        <Input fullWidth placeholder="Search..." />
        <Button>Search</Button>
      </Group>
    </div>

    <div>
      <h3>Full width — segmented control</h3>
      <Group variant="controls" fullWidth>
        <Radio
          id="vue-group-fw-env-dev"
          name="vue-group-fw-env"
          appearance="button"
          value="dev"
          fullWidth
          :checked="selectedFwEnv === 'dev'"
          @change="selectedFwEnv = 'dev'"
          >Dev</Radio
        >
        <Radio
          id="vue-group-fw-env-staging"
          name="vue-group-fw-env"
          appearance="button"
          value="staging"
          fullWidth
          :checked="selectedFwEnv === 'staging'"
          @change="selectedFwEnv = 'staging'"
          >Staging</Radio
        >
        <Radio
          id="vue-group-fw-env-prod"
          name="vue-group-fw-env"
          appearance="button"
          value="prod"
          fullWidth
          :checked="selectedFwEnv === 'prod'"
          @change="selectedFwEnv = 'prod'"
          >Prod</Radio
        >
      </Group>
    </div>

    <div>
      <h3>Input with button</h3>
      <Group variant="controls">
        <Input placeholder="Search..." />
        <Button>Search</Button>
      </Group>
    </div>

    <div>
      <h3>Button on both sides</h3>
      <Group variant="controls">
        <Button emphasis="secondary">-</Button>
        <Input placeholder="Enter value" />
        <Button emphasis="secondary">+</Button>
      </Group>
    </div>

    <div>
      <h3>Multiple inputs</h3>
      <Group variant="controls">
        <Input placeholder="First name" />
        <Input placeholder="Last name" />
      </Group>
    </div>

    <div>
      <h3>Button group</h3>
      <Group variant="controls">
        <Button emphasis="secondary">Cut</Button>
        <Button emphasis="secondary">Copy</Button>
        <Button emphasis="secondary">Paste</Button>
      </Group>
    </div>

    <div>
      <h3>Mixed feedback buttons</h3>
      <Group variant="controls">
        <Button feedback="success">Save</Button>
        <Button feedback="warning" emphasis="secondary">Draft</Button>
        <Button feedback="danger" emphasis="secondary">Delete</Button>
      </Group>
    </div>

    <div>
      <h3>Tab horizontal</h3>
      <Group variant="controls">
        <Radio
          id="vue-group-tab-h-all"
          name="vue-group-tab-h"
          appearance="tab"
          value="all"
          :checked="selectedTab === 'all'"
          @change="selectedTab = 'all'"
          >All</Radio
        >
        <Radio
          id="vue-group-tab-h-active"
          name="vue-group-tab-h"
          appearance="tab"
          value="active"
          :checked="selectedTab === 'active'"
          @change="selectedTab = 'active'"
          >Active</Radio
        >
        <Radio
          id="vue-group-tab-h-archived"
          name="vue-group-tab-h"
          appearance="tab"
          value="archived"
          :checked="selectedTab === 'archived'"
          @change="selectedTab = 'archived'"
          >Archived</Radio
        >
      </Group>
    </div>

    <div>
      <h3>Tab vertical</h3>
      <Group variant="controls" orientation="vertical">
        <Radio
          id="vue-group-tab-v-dashboard"
          name="vue-group-tab-v"
          appearance="tab"
          orientation="vertical"
          value="dashboard"
          :checked="selectedNav === 'dashboard'"
          @change="selectedNav = 'dashboard'"
          >Dashboard</Radio
        >
        <Radio
          id="vue-group-tab-v-settings"
          name="vue-group-tab-v"
          appearance="tab"
          orientation="vertical"
          value="settings"
          :checked="selectedNav === 'settings'"
          @change="selectedNav = 'settings'"
          >Settings</Radio
        >
        <Radio
          id="vue-group-tab-v-profile"
          name="vue-group-tab-v"
          appearance="tab"
          orientation="vertical"
          value="profile"
          :checked="selectedNav === 'profile'"
          @change="selectedNav = 'profile'"
          >Profile</Radio
        >
      </Group>
    </div>

    <div>
      <h3>Vertical button group</h3>
      <Group variant="controls" orientation="vertical">
        <Button emphasis="secondary">Cut</Button>
        <Button emphasis="secondary">Copy</Button>
        <Button emphasis="secondary">Paste</Button>
      </Group>
    </div>

    <div>
      <h3>Vertical checkbox group</h3>
      <Group variant="controls" orientation="vertical">
        <Checkbox appearance="button" size="md">Bold</Checkbox>
        <Checkbox appearance="button" size="md">Italic</Checkbox>
        <Checkbox appearance="button" size="md">Underline</Checkbox>
      </Group>
    </div>

    <div>
      <h3>Vertical radio button group</h3>
      <Group variant="controls" orientation="vertical">
        <Radio
          id="vue-group-view-v-list"
          name="vue-group-view-v"
          appearance="button"
          size="md"
          value="list"
          :checked="selectedView === 'list'"
          @change="selectedView = 'list'"
          >List</Radio
        >
        <Radio
          id="vue-group-view-v-grid"
          name="vue-group-view-v"
          appearance="button"
          size="md"
          value="grid"
          :checked="selectedView === 'grid'"
          @change="selectedView = 'grid'"
          >Grid</Radio
        >
        <Radio
          id="vue-group-view-v-table"
          name="vue-group-view-v"
          appearance="button"
          size="md"
          value="table"
          :checked="selectedView === 'table'"
          @change="selectedView = 'table'"
          >Table</Radio
        >
      </Group>
    </div>

    <div>
      <h3>Checkbox button group</h3>
      <Group variant="controls">
        <Checkbox appearance="button" size="md">Bold</Checkbox>
        <Checkbox appearance="button" size="md">Italic</Checkbox>
        <Checkbox appearance="button" size="md">Underline</Checkbox>
      </Group>
    </div>

    <div>
      <h3>Radio button group</h3>
      <Group variant="controls">
        <Radio
          id="vue-group-view-list"
          name="vue-group-view"
          appearance="button"
          size="md"
          value="list"
          :checked="selectedView === 'list'"
          @change="selectedView = 'list'"
          >List</Radio
        >
        <Radio
          id="vue-group-view-grid"
          name="vue-group-view"
          appearance="button"
          size="md"
          value="grid"
          :checked="selectedView === 'grid'"
          @change="selectedView = 'grid'"
          >Grid</Radio
        >
        <Radio
          id="vue-group-view-table"
          name="vue-group-view"
          appearance="button"
          size="md"
          value="table"
          :checked="selectedView === 'table'"
          @change="selectedView = 'table'"
          >Table</Radio
        >
      </Group>
    </div>
  </div>
</template>

Feedback

With variant="controls", apply a semantic color to the merged frame and pass matching feedback to the inner components.

AstroReactSvelteVue

PreviewCode

---
import Group from "../Group.astro";
import Input from "@pindoba/astro-input";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <Group variant="controls" feedback="neutral">
    <Input placeholder="Neutral" />
    <Button>Go</Button>
  </Group>

  <Group variant="controls" feedback="primary">
    <Input feedback="primary" placeholder="Primary" />
    <Button>Go</Button>
  </Group>

  <Group variant="controls" feedback="success">
    <Input feedback="success" placeholder="Success" />
    <Button feedback="success">Go</Button>
  </Group>

  <Group variant="controls" feedback="danger">
    <Input feedback="danger" placeholder="Danger" />
    <Button feedback="danger">Go</Button>
  </Group>

  <Group variant="controls" feedback="warning">
    <Input feedback="warning" placeholder="Warning" />
    <Button feedback="warning">Go</Button>
  </Group>
</div>

import { Group } from "../Group";
import Input from "@pindoba/react-input";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "full" })}>
      <Group variant="controls" feedback="neutral">
        <Input placeholder="Neutral" />
        <Button>Go</Button>
      </Group>

      <Group variant="controls" feedback="primary">
        <Input feedback="primary" placeholder="Primary" />
        <Button>Go</Button>
      </Group>

      <Group variant="controls" feedback="success">
        <Input feedback="success" placeholder="Success" />
        <Button feedback="success">Go</Button>
      </Group>

      <Group variant="controls" feedback="danger">
        <Input feedback="danger" placeholder="Danger" />
        <Button feedback="danger">Go</Button>
      </Group>

      <Group variant="controls" feedback="warning">
        <Input feedback="warning" placeholder="Warning" />
        <Button feedback="warning">Go</Button>
      </Group>
    </div>
  );
}

<script lang="ts">
  import Group from "../group.svelte";
  import Input from "@pindoba/svelte-input";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <Group variant="controls" feedback="neutral">
    <Input placeholder="Neutral" />
    <Button>Go</Button>
  </Group>

  <Group variant="controls" feedback="primary">
    <Input feedback="primary" placeholder="Primary" />
    <Button>Go</Button>
  </Group>

  <Group variant="controls" feedback="success">
    <Input feedback="success" placeholder="Success" />
    <Button feedback="success">Go</Button>
  </Group>

  <Group variant="controls" feedback="danger">
    <Input feedback="danger" placeholder="Danger" />
    <Button feedback="danger">Go</Button>
  </Group>

  <Group variant="controls" feedback="warning">
    <Input feedback="warning" placeholder="Warning" />
    <Button feedback="warning">Go</Button>
  </Group>
</div>

<script setup lang="ts">
import { Group } from "@pindoba/vue-group";
import { Input } from "@pindoba/vue-input";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", width: "full" });
const fb = ["neutral", "primary", "success", "danger", "warning"] as const;
const cap = (s: string) => s[0].toUpperCase() + s.slice(1);
</script>

<template>
  <div :class="col">
    <Group v-for="f in fb" :key="f" variant="controls" :feedback="f">
      <Input
        :feedback="f === 'neutral' ? undefined : f"
        :placeholder="cap(f)"
      />
      <Button :feedback="f === 'neutral' || f === 'primary' ? undefined : f"
        >Go</Button
      >
    </Group>
  </div>
</template>

Size

Use size to control the merged frame’s border radius (controls). Match it to the size of the inner controls so the rounding is proportional.

AstroReactSvelteVue

PreviewCode

---
import Group from "../Group.astro";
import Input from "@pindoba/astro-input";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <Group variant="controls" size="xs">
    <Input size="xs" placeholder="Extra small" />
    <Button size="xs">Go</Button>
  </Group>

  <Group variant="controls" size="sm">
    <Input size="sm" placeholder="Small" />
    <Button size="sm">Go</Button>
  </Group>

  <Group variant="controls" size="md">
    <Input size="md" placeholder="Medium" />
    <Button size="md">Go</Button>
  </Group>

  <Group variant="controls" size="lg">
    <Input size="lg" placeholder="Large" />
    <Button size="lg">Go</Button>
  </Group>
</div>

import { Group } from "../Group";
import Input from "@pindoba/react-input";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "full" })}>
      <Group variant="controls" size="xs">
        <Input size="xs" placeholder="Extra small" />
        <Button size="xs">Go</Button>
      </Group>

      <Group variant="controls" size="sm">
        <Input size="sm" placeholder="Small" />
        <Button size="sm">Go</Button>
      </Group>

      <Group variant="controls" size="md">
        <Input size="md" placeholder="Medium" />
        <Button size="md">Go</Button>
      </Group>

      <Group variant="controls" size="lg">
        <Input size="lg" placeholder="Large" />
        <Button size="lg">Go</Button>
      </Group>
    </div>
  );
}

<script lang="ts">
  import Group from "../group.svelte";
  import Input from "@pindoba/svelte-input";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <Group variant="controls" size="xs">
    <Input size="xs" placeholder="Extra small" />
    <Button size="xs">Go</Button>
  </Group>

  <Group variant="controls" size="sm">
    <Input size="sm" placeholder="Small" />
    <Button size="sm">Go</Button>
  </Group>

  <Group variant="controls" size="md">
    <Input size="md" placeholder="Medium" />
    <Button size="md">Go</Button>
  </Group>

  <Group variant="controls" size="lg">
    <Input size="lg" placeholder="Large" />
    <Button size="lg">Go</Button>
  </Group>
</div>

<script setup lang="ts">
import { Group } from "@pindoba/vue-group";
import { Input } from "@pindoba/vue-input";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", width: "full" });
const sizes = [
  ["xs", "Extra small"],
  ["sm", "Small"],
  ["md", "Medium"],
  ["lg", "Large"],
] as const;
</script>

<template>
  <div :class="col">
    <Group
      v-for="[size, label] in sizes"
      :key="size"
      variant="controls"
      :size="size"
    >
      <Input :size="size" :placeholder="label" />
      <Button :size="size">Go</Button>
    </Group>
  </div>
</template>

Badges and buttons

controls also merges badges — and a trailing button — into a single chip. Mix emphasis (primary / secondary / tertiary) and feedback colors freely; Group suppresses each badge’s own outline and emits a palette-aware divider between siblings. Pair button sizes with the badge size (sm badge → xs button, md badge → sm button) so nothing renders at the default button height.

AstroReactSvelteVue

PreviewCode

React18 issues

v2.1Released

Filter12 results

Pending3 in queue

PR#247merged

CIfailedretry in 30s

Topicdesign-systems

Author@ed

Draft12 files

---
import Badge from "@pindoba/astro-badge";
import Group from "../Group.astro";
import Button from "@pindoba/astro-button";
import { X } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <!-- Two-emphasis chips: mix primary / secondary / tertiary / adaptive so
       the same composition can play every visual role the old label slot did. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls">
      <Badge feedback="primary" emphasis="primary">React</Badge>
      <Badge feedback="primary" emphasis="secondary">18 issues</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="success" emphasis="secondary">v2.1</Badge>
      <Badge feedback="success" emphasis="primary">Released</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="neutral" emphasis="tertiary">Filter</Badge>
      <Badge feedback="primary" emphasis="secondary">12 results</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="warning" emphasis="primary">Pending</Badge>
      <Badge feedback="warning" emphasis="tertiary">3 in queue</Badge>
    </Group>
  </div>

  <!-- Three-section chips: emphasis cascades across the group. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls">
      <Badge feedback="primary" emphasis="primary">PR</Badge>
      <Badge feedback="primary" emphasis="secondary">#247</Badge>
      <Badge feedback="success" emphasis="tertiary">merged</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="danger" emphasis="primary">CI</Badge>
      <Badge feedback="danger" emphasis="secondary">failed</Badge>
      <Badge feedback="neutral" emphasis="tertiary">retry in 30s</Badge>
    </Group>
  </div>

  <!-- Badges + a trailing dismiss button. Button size matches the badge size
       (sm-badge ↔ xs-button, md-badge ↔ sm-button) so nothing renders at the
       default 30 px button height. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls" size="md">
      <Badge feedback="primary" emphasis="primary">Topic</Badge>
      <Badge feedback="primary" emphasis="secondary">design-systems</Badge>
      <Button size="sm" shape="square" emphasis="ghost"><X /></Button>
    </Group>
    <Group variant="controls" size="sm">
      <Badge size="sm" feedback="neutral" emphasis="tertiary">Author</Badge>
      <Badge size="sm" feedback="primary" emphasis="secondary">@ed</Badge>
      <Button size="xs" shape="square" emphasis="secondary"><X /></Button>
    </Group>
    <Group variant="controls" size="md">
      <Badge feedback="warning" emphasis="primary">Draft</Badge>
      <Badge feedback="neutral" emphasis="tertiary">12 files</Badge>
      <Button size="sm" shape="square" emphasis="ghost"><X /></Button>
    </Group>
  </div>
</div>

React18 issues

v2.1Released

Filter12 results

Pending3 in queue

PR#247merged

CIfailedretry in 30s

Topicdesign-systems

Author@ed

Draft12 files

import { Badge } from "@pindoba/react-badge";
import { Group } from "../Group";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const iconClass = css({ w: "1em", h: "1em" });

const XIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </svg>
);

export default function BadgesDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      {/* Two-emphasis chips: mix primary / secondary / tertiary / adaptive so
          the same composition can play every visual role the old label slot did. */}
      <div
        className={stack({
          gap: "md",
          direction: "row",
          align: "center",
          flexWrap: "wrap",
        })}
      >
        <Group variant="controls">
          <Badge feedback="primary" emphasis="primary">
            React
          </Badge>
          <Badge feedback="primary" emphasis="secondary">
            18 issues
          </Badge>
        </Group>
        <Group variant="controls">
          <Badge feedback="success" emphasis="secondary">
            v2.1
          </Badge>
          <Badge feedback="success" emphasis="primary">
            Released
          </Badge>
        </Group>
        <Group variant="controls">
          <Badge feedback="neutral" emphasis="tertiary">
            Filter
          </Badge>
          <Badge feedback="primary" emphasis="secondary">
            12 results
          </Badge>
        </Group>
        <Group variant="controls">
          <Badge feedback="warning" emphasis="primary">
            Pending
          </Badge>
          <Badge feedback="warning" emphasis="tertiary">
            3 in queue
          </Badge>
        </Group>
      </div>

      {/* Three-section chips: emphasis cascades across the group. */}
      <div
        className={stack({
          gap: "md",
          direction: "row",
          align: "center",
          flexWrap: "wrap",
        })}
      >
        <Group variant="controls">
          <Badge feedback="primary" emphasis="primary">
            PR
          </Badge>
          <Badge feedback="primary" emphasis="secondary">
            #247
          </Badge>
          <Badge feedback="success" emphasis="tertiary">
            merged
          </Badge>
        </Group>
        <Group variant="controls">
          <Badge feedback="danger" emphasis="primary">
            CI
          </Badge>
          <Badge feedback="danger" emphasis="secondary">
            failed
          </Badge>
          <Badge feedback="neutral" emphasis="tertiary">
            retry in 30s
          </Badge>
        </Group>
      </div>

      {/* Badges + a trailing dismiss button. Button size matches the badge size
          (sm-badge ↔ xs-button, md-badge ↔ sm-button) so nothing renders at the
          default 30 px button height. */}
      <div
        className={stack({
          gap: "md",
          direction: "row",
          align: "center",
          flexWrap: "wrap",
        })}
      >
        <Group variant="controls" size="md">
          <Badge feedback="primary" emphasis="primary">
            Topic
          </Badge>
          <Badge feedback="primary" emphasis="secondary">
            design-systems
          </Badge>
          <Button size="sm" shape="square" emphasis="ghost">
            <XIcon />
          </Button>
        </Group>
        <Group variant="controls" size="sm">
          <Badge size="sm" feedback="neutral" emphasis="tertiary">
            Author
          </Badge>
          <Badge size="sm" feedback="primary" emphasis="secondary">
            @ed
          </Badge>
          <Button size="xs" shape="square" emphasis="secondary">
            <XIcon />
          </Button>
        </Group>
        <Group variant="controls" size="md">
          <Badge feedback="warning" emphasis="primary">
            Draft
          </Badge>
          <Badge feedback="neutral" emphasis="tertiary">
            12 files
          </Badge>
          <Button size="sm" shape="square" emphasis="ghost">
            <XIcon />
          </Button>
        </Group>
      </div>
    </div>
  );
}

React 18 issues

v2.1 Released

Filter 12 results

Pending 3 in queue

PR #247 merged

CI failed retry in 30s

Topic design-systems

Author @ed

Draft 12 files

<script lang="ts">
  import Badge from "@pindoba/svelte-badge";
  import Group from "../group.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideX from "@lucide/svelte/icons/x";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <!-- Two-emphasis chips: mix primary / secondary / tertiary / adaptive so
       the same composition can play every visual role the old label slot did. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls">
      <Badge feedback="primary" emphasis="primary">React</Badge>
      <Badge feedback="primary" emphasis="secondary">18 issues</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="success" emphasis="secondary">v2.1</Badge>
      <Badge feedback="success" emphasis="primary">Released</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="neutral" emphasis="tertiary">Filter</Badge>
      <Badge feedback="primary" emphasis="secondary">12 results</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="warning" emphasis="primary">Pending</Badge>
      <Badge feedback="warning" emphasis="tertiary">3 in queue</Badge>
    </Group>
  </div>

  <!-- Three-section chips: emphasis cascades across the group. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls">
      <Badge feedback="primary" emphasis="primary">PR</Badge>
      <Badge feedback="primary" emphasis="secondary">#247</Badge>
      <Badge feedback="success" emphasis="tertiary">merged</Badge>
    </Group>
    <Group variant="controls">
      <Badge feedback="danger" emphasis="primary">CI</Badge>
      <Badge feedback="danger" emphasis="secondary">failed</Badge>
      <Badge feedback="neutral" emphasis="tertiary">retry in 30s</Badge>
    </Group>
  </div>

  <!-- Badges + a trailing dismiss button. Button size matches the badge size
       (sm-badge ↔ xs-button, md-badge ↔ sm-button) so nothing renders at the
       default 30 px button height. -->
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Group variant="controls" size="md">
      <Badge feedback="primary" emphasis="primary">Topic</Badge>
      <Badge feedback="primary" emphasis="secondary">design-systems</Badge>
      <Button size="sm" shape="square" emphasis="ghost"><LucideX /></Button>
    </Group>
    <Group variant="controls" size="sm">
      <Badge size="sm" feedback="neutral" emphasis="tertiary">Author</Badge>
      <Badge size="sm" feedback="primary" emphasis="secondary">@ed</Badge>
      <Button size="xs" shape="square" emphasis="secondary"><LucideX /></Button>
    </Group>
    <Group variant="controls" size="md">
      <Badge feedback="warning" emphasis="primary">Draft</Badge>
      <Badge feedback="neutral" emphasis="tertiary">12 files</Badge>
      <Button size="sm" shape="square" emphasis="ghost"><LucideX /></Button>
    </Group>
  </div>
</div>

React18 issues

v2.1Released

Filter12 results

Pending3 in queue

PR#247merged

CIfailedretry in 30s

Topicdesign-systems

Author@ed

Draft12 files

<script setup lang="ts">
import { Group } from "@pindoba/vue-group";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { X } from "./_x";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({
  gap: "md",
  direction: "row",
  align: "center",
  flexWrap: "wrap",
});
</script>

<template>
  <div :class="col">
    <div :class="row">
      <Group variant="controls">
        <Badge feedback="primary" emphasis="primary">React</Badge>
        <Badge feedback="primary" emphasis="secondary">18 issues</Badge>
      </Group>
      <Group variant="controls">
        <Badge feedback="success" emphasis="secondary">v2.1</Badge>
        <Badge feedback="success" emphasis="primary">Released</Badge>
      </Group>
      <Group variant="controls">
        <Badge feedback="neutral" emphasis="tertiary">Filter</Badge>
        <Badge feedback="primary" emphasis="secondary">12 results</Badge>
      </Group>
      <Group variant="controls">
        <Badge feedback="warning" emphasis="primary">Pending</Badge>
        <Badge feedback="warning" emphasis="tertiary">3 in queue</Badge>
      </Group>
    </div>
    <div :class="row">
      <Group variant="controls">
        <Badge feedback="primary" emphasis="primary">PR</Badge>
        <Badge feedback="primary" emphasis="secondary">#247</Badge>
        <Badge feedback="success" emphasis="tertiary">merged</Badge>
      </Group>
      <Group variant="controls">
        <Badge feedback="danger" emphasis="primary">CI</Badge>
        <Badge feedback="danger" emphasis="secondary">failed</Badge>
        <Badge feedback="neutral" emphasis="tertiary">retry in 30s</Badge>
      </Group>
    </div>
    <div :class="row">
      <Group variant="controls" size="md">
        <Badge feedback="primary" emphasis="primary">Topic</Badge>
        <Badge feedback="primary" emphasis="secondary">design-systems</Badge>
        <Button size="sm" shape="square" emphasis="ghost"><X /></Button>
      </Group>
      <Group variant="controls" size="sm">
        <Badge size="sm" feedback="neutral" emphasis="tertiary">Author</Badge>
        <Badge size="sm" feedback="primary" emphasis="secondary">@ed</Badge>
        <Button size="xs" shape="square" emphasis="secondary"><X /></Button>
      </Group>
      <Group variant="controls" size="md">
        <Badge feedback="warning" emphasis="primary">Draft</Badge>
        <Badge feedback="neutral" emphasis="tertiary">12 files</Badge>
        <Button size="sm" shape="square" emphasis="ghost"><X /></Button>
      </Group>
    </div>
  </div>
</template>

Keyboard shortcuts

controls also fuses keycaps into a single shortcut cluster — each Kbd keeps its own base edge while the shared borders collapse into one seam. Match the group size to the kbd size so the corner rounding stays proportional.

AstroReactSvelteVue

PreviewCode

⌘K

⌃⇧P

⌥Space

CtrlAltDel

---
import Kbd from "@pindoba/astro-kbd";
import Group from "../Group.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "lg",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Group>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </Group>

  <Group>
    <Kbd>⌃</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>P</Kbd>
  </Group>

  <Group size="lg">
    <Kbd size="lg">⌥</Kbd>
    <Kbd size="lg">Space</Kbd>
  </Group>

  <Group size="sm">
    <Kbd size="sm">Ctrl</Kbd>
    <Kbd size="sm">Alt</Kbd>
    <Kbd size="sm">Del</Kbd>
  </Group>
</div>

⌘K

⌃⇧P

⌥Space

CtrlAltDel

import { Kbd } from "@pindoba/react-kbd";
import { Group } from "../Group";
import { stack } from "@pindoba/styled-system/patterns";

export default function KbdDemo() {
  return (
    <div
      className={stack({
        gap: "lg",
        direction: "row",
        align: "center",
        flexWrap: "wrap",
      })}
    >
      <Group>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </Group>

      <Group>
        <Kbd>⌃</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>P</Kbd>
      </Group>

      <Group size="lg">
        <Kbd size="lg">⌥</Kbd>
        <Kbd size="lg">Space</Kbd>
      </Group>

      <Group size="sm">
        <Kbd size="sm">Ctrl</Kbd>
        <Kbd size="sm">Alt</Kbd>
        <Kbd size="sm">Del</Kbd>
      </Group>
    </div>
  );
}

⌘ K

⌃ ⇧ P

⌥ Space

Ctrl Alt Del

<script lang="ts">
  import Kbd from "@pindoba/svelte-kbd";
  import Group from "../group.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div
  class={stack({
    gap: "lg",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Group>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </Group>

  <Group>
    <Kbd>⌃</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>P</Kbd>
  </Group>

  <Group size="lg">
    <Kbd size="lg">⌥</Kbd>
    <Kbd size="lg">Space</Kbd>
  </Group>

  <Group size="sm">
    <Kbd size="sm">Ctrl</Kbd>
    <Kbd size="sm">Alt</Kbd>
    <Kbd size="sm">Del</Kbd>
  </Group>
</div>

⌘K

⌃⇧P

⌥Space

CtrlAltDel

<script setup lang="ts">
import { Group } from "@pindoba/vue-group";
import { Kbd } from "@pindoba/vue-kbd";
import { stack } from "@pindoba/styled-system/patterns";

const row = stack({
  gap: "lg",
  direction: "row",
  align: "center",
  flexWrap: "wrap",
});
</script>

<template>
  <div :class="row">
    <Group>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </Group>

    <Group>
      <Kbd>⌃</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>P</Kbd>
    </Group>

    <Group size="lg">
      <Kbd size="lg">⌥</Kbd>
      <Kbd size="lg">Space</Kbd>
    </Group>

    <Group size="sm">
      <Kbd size="sm">Ctrl</Kbd>
      <Kbd size="sm">Alt</Kbd>
      <Kbd size="sm">Del</Kbd>
    </Group>
  </div>
</template>

Custom Styling

The passThrough prop provides an escape hatch for the root element. The last example shows the exposed Panel chrome props turning the plain group into a bordered, padded, filled container.

AstroReactSvelteVue

PreviewCode

Custom style via passThrough

Custom props via passThrough

Panel chrome — bordered, padded, filled container

---
import Group from "../Group.astro";
import Input from "@pindoba/astro-input";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Group
      variant="controls"
      passThrough={{ root: { style: { borderRadius: "full" } } }}
    >
      <Input
        placeholder="Search..."
        passThrough={{ root: { style: { borderRadius: "full" } } }}
      />
      <Button shape="pill">Go</Button>
    </Group>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Group
      variant="controls"
      passThrough={{
        root: {
          props: { "data-testid": "search-group" },
        },
      }}
    >
      <Input placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Panel chrome — bordered, padded, filled container</h3>
    <Group border="default" padding="md" background="surface.peak">
      <Button>Save</Button>
      <Button emphasis="secondary">Cancel</Button>
    </Group>
  </div>
</div>

Custom style via passThrough

Custom props via passThrough

Panel chrome — bordered, padded, filled container

import { Group } from "../Group";
import Input from "@pindoba/react-input";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom style via passThrough</h3>
        <Group
          variant="controls"
          passThrough={{ root: { style: { borderRadius: "full" } } }}
        >
          <Input
            placeholder="Search..."
            passThrough={{ root: { style: { borderRadius: "full" } } }}
          />
          <Button shape="pill">Go</Button>
        </Group>
      </div>

      <div>
        <h3>Custom props via passThrough</h3>
        <Group
          variant="controls"
          passThrough={{
            root: {
              props: { "data-testid": "search-group" },
            },
          }}
        >
          <Input placeholder="Search..." />
          <Button>Search</Button>
        </Group>
      </div>

      <div>
        <h3>Panel chrome — bordered, padded, filled container</h3>
        <Group border="default" padding="md" background="surface.peak">
          <Button>Save</Button>
          <Button emphasis="secondary">Cancel</Button>
        </Group>
      </div>
    </div>
  );
}

Custom style via passThrough

Custom props via passThrough

Panel chrome — bordered, padded, filled container

<script lang="ts">
  import Group from "../group.svelte";
  import Input from "@pindoba/svelte-input";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Group
      variant="controls"
      passThrough={{ root: { style: { borderRadius: "full" } } }}
    >
      <Input
        placeholder="Search..."
        passThrough={{ root: { style: { borderRadius: "full" } } }}
      />
      <Button shape="pill">Go</Button>
    </Group>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Group
      variant="controls"
      passThrough={{
        root: {
          props: { "data-testid": "search-group" },
        },
      }}
    >
      <Input placeholder="Search..." />
      <Button>Search</Button>
    </Group>
  </div>

  <div>
    <h3>Panel chrome — bordered, padded, filled container</h3>
    <Group border="default" padding="md" background="surface.peak">
      <Button>Save</Button>
      <Button emphasis="secondary">Cancel</Button>
    </Group>
  </div>
</div>

Custom style via passThrough

Custom props via passThrough

Panel chrome — bordered, padded, filled container

<script setup lang="ts">
import { Group } from "@pindoba/vue-group";
import { Input } from "@pindoba/vue-input";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Custom style via passThrough</h3>
      <Group
        variant="controls"
        :passThrough="{ root: { style: { borderRadius: 'full' } } }"
      >
        <Input
          placeholder="Search..."
          :passThrough="{ root: { style: { borderRadius: 'full' } } }"
        />
        <Button shape="pill">Go</Button>
      </Group>
    </div>
    <div>
      <h3>Custom props via passThrough</h3>
      <Group
        variant="controls"
        :passThrough="{ root: { props: { 'data-testid': 'search-group' } } }"
      >
        <Input placeholder="Search..." />
        <Button>Search</Button>
      </Group>
    </div>
    <div>
      <h3>Panel chrome — bordered, padded, filled container</h3>
      <Group border="default" padding="md" background="surface.peak">
        <Button>Save</Button>
        <Button emphasis="secondary">Cancel</Button>
      </Group>
    </div>
  </div>
</template>

#Basic

Full width — search bar

Full width — segmented control

Input with button

Button on both sides

Multiple inputs

Button group

Mixed feedback buttons

Tab horizontal

Tab vertical

Vertical button group

Vertical checkbox group

Vertical radio button group

Checkbox button group

Radio button group

#Feedback

#Size

#Badges and buttons

#Keyboard shortcuts

#Custom Styling

Custom style via passThrough

Custom props via passThrough

Panel chrome — bordered, padded, filled container

Basic

Feedback

Size

Badges and buttons

Keyboard shortcuts

Custom Styling