diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
index edb32531002..51983dba760 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
+++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
@@ -105,3 +105,79 @@ export const darkThemeRTL_TestOnly = (): string => html`
 `;
 
 darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+
+export const interactivityStates = (): string => html`
+  <div>
+    <h2>appearance="solid" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="solid" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="solid" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="solid" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="solid" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline-fill" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline-fill" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline-fill" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="neutral"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="neutral" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="neutral" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="inverse"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="inverse" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="inverse" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+
+    <h2>appearance="outline" & kind="brand"</h2>
+    <calcite-chip-group selection-mode="single">
+      <calcite-chip appearance="outline" kind="brand" value="forest">Forest</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="tundra">Tundra</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="shore">Seashore</calcite-chip>
+      <calcite-chip appearance="outline" kind="brand" value="estuary">Estuary</calcite-chip>
+    </calcite-chip-group>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 025c6b081f3..a85bc1d25a4 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -108,6 +108,95 @@
   opacity: 1;
 }
 
+:host([appearance="solid"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-3);
+      }
+      &:active {
+        background-color: var(--calcite-color-border-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-inverse-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-inverse-press);
+      }
+    }
+  }
+
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-brand-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-brand-press);
+      }
+    }
+  }
+}
+
+:host([appearance="outline-fill"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-2);
+        border-color: var(--calcite-color-border-input);
+      }
+      &:active {
+        background-color: var(--calcite-color-foreground-3);
+        border-color: var(--calcite-color-text-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container,
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-foreground-2);
+      }
+      &:active {
+        background-color: var(--calcite-color-foreground-3);
+      }
+    }
+  }
+}
+
+:host([appearance="outline"]) {
+  &:host([kind="neutral"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-transparent-hover);
+        border-color: var(--calcite-color-border-input);
+      }
+      &:active {
+        background-color: var(--calcite-color-transparent-press);
+        border-color: var(--calcite-color-text-3);
+      }
+    }
+  }
+
+  &:host([kind="inverse"]) .container,
+  &:host([kind="brand"]) .container {
+    &.selectable {
+      &:hover {
+        background-color: var(--calcite-color-transparent-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-transparent-press);
+      }
+    }
+  }
+}
+
 :host([scale="s"]) {
   .container {
     --calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) /* 24px */;