From 970ed3a69cfae367f0f5409a5d2421bdb808f92a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 1 Apr 2026 10:29:41 +0200
Subject: [PATCH] feat(CChip, CChipInput): add new components

---
 src/_nav.js                   |  10 ++
 src/router/index.js           |  10 ++
 src/views/base/Chips.vue      | 166 +++++++++++++++++++++++++++++
 src/views/forms/ChipInput.vue | 190 ++++++++++++++++++++++++++++++++++
 4 files changed, 376 insertions(+)
 create mode 100644 src/views/base/Chips.vue
 create mode 100644 src/views/forms/ChipInput.vue

diff --git a/src/_nav.js b/src/_nav.js
index 03e7124c..4abb3200 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -65,6 +65,11 @@ export default [
         name: 'Carousels',
         to: '/base/carousels',
       },
+      {
+        component: 'CNavItem',
+        name: 'Chips',
+        to: '/base/chips',
+      },
       {
         component: 'CNavItem',
         name: 'Collapses',
@@ -205,6 +210,11 @@ export default [
         name: 'Checks & Radios',
         to: '/forms/checks-radios',
       },
+      {
+        component: 'CNavItem',
+        name: 'Chip Input',
+        to: '/forms/chip-input',
+      },
       {
         component: 'CNavItem',
         name: 'Date Picker',
diff --git a/src/router/index.js b/src/router/index.js
index 342b69aa..378bc250 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -66,6 +66,11 @@ const routes = [
             name: 'Carousels',
             component: () => import('@/views/base/Carousels.vue'),
           },
+          {
+            path: '/base/chips',
+            name: 'Chips',
+            component: () => import('@/views/base/Chips.vue'),
+          },
           {
             path: '/base/collapses',
             name: 'Collapses',
@@ -175,6 +180,11 @@ const routes = [
             name: 'Checks & Radios',
             component: () => import('@/views/forms/ChecksRadios.vue'),
           },
+          {
+            path: '/forms/chip-input',
+            name: 'Chip Input',
+            component: () => import('@/views/forms/ChipInput.vue'),
+          },
           {
             path: '/forms/range',
             name: 'Range',
diff --git a/src/views/base/Chips.vue b/src/views/base/Chips.vue
new file mode 100644
index 00000000..c41c15b3
--- /dev/null
+++ b/src/views/base/Chips.vue
@@ -0,0 +1,166 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/chip/" />
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip</strong> <small>Basic and outline</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Chips are compact UI elements for labels, filters, and quick selections. Use the
+            <code>CChip</code> component with optional <code>variant</code> prop.
+          </p>
+          <DocsExample href="components/chip/#basic-chips">
+            <div class="d-flex flex-wrap gap-2">
+              <CChip>Basic chip</CChip>
+              <CChip>Frontend</CChip>
+              <CChip>Design system</CChip>
+              <CChip>Documentation</CChip>
+            </div>
+          </DocsExample>
+          <p class="text-body-secondary small">
+            Add <code>variant="outline"</code> to create a lighter, bordered appearance.
+          </p>
+          <DocsExample href="components/chip/#outline-chips">
+            <div class="d-flex flex-wrap gap-2">
+              <CChip variant="outline">Outline chip</CChip>
+              <CChip variant="outline">Product</CChip>
+              <CChip variant="outline">Marketing</CChip>
+              <CChip variant="outline">Analytics</CChip>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip</strong> <small>With icons and avatars</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Chips can include icons, user avatars, or avatar components to make tags easier to scan.
+          </p>
+          <DocsExample href="components/chip/#chips-with-icons">
+            <div class="d-flex flex-wrap gap-2">
+              <CChip>
+                <span class="chip-icon">
+                  <svg
+                    width="16"
+                    height="16"
+                    fill="currentColor"
+                    viewBox="0 0 16 16"
+                    aria-hidden="true"
+                  >
+                    <path d="M8 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-5 12s0-3 5-3 5 3 5 3v1H3v-1Z" />
+                  </svg>
+                </span>
+                Team member
+              </CChip>
+              <CChip>
+                <span class="chip-icon">
+                  <svg
+                    width="16"
+                    height="16"
+                    fill="currentColor"
+                    viewBox="0 0 16 16"
+                    aria-hidden="true"
+                  >
+                    <path d="M2 2h12v2H2V2Zm0 5h8v2H2V7Zm0 5h12v2H2v-2Z" />
+                  </svg>
+                </span>
+                Backlog item
+              </CChip>
+            </div>
+          </DocsExample>
+          <DocsExample href="components/chip/#chips-with-avatars">
+            <div class="d-flex flex-wrap gap-2">
+              <CChip>
+                <img class="chip-img" :src="avatar1" width="16" height="16" alt="" /> Olivia Martin
+              </CChip>
+              <CChip>
+                <img class="chip-img" :src="avatar4" width="16" height="16" alt="" /> Ethan Carter
+              </CChip>
+              <CChip>
+                <span class="avatar avatar-sm bg-primary text-white">A</span> Account manager
+              </CChip>
+              <CChip>
+                <span class="avatar avatar-sm bg-success text-white">Q</span> QA owner
+              </CChip>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip</strong> <small>Variants and sizes</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Use the <code>color</code> prop for contextual variants and the <code>size</code> prop
+            for different sizes.
+          </p>
+          <DocsExample href="components/chip/#variants">
+            <div class="d-flex flex-wrap gap-2 mb-3">
+              <CChip color="primary" clickable>Product</CChip>
+              <CChip color="primary" active>Active product</CChip>
+              <CChip color="success" clickable>Published</CChip>
+              <CChip color="success" active>Live</CChip>
+              <CChip color="warning" clickable>Review</CChip>
+              <CChip color="danger" active>Blocked</CChip>
+            </div>
+            <div class="d-flex flex-wrap gap-2">
+              <CChip size="sm">Small chip</CChip>
+              <CChip>Default chip</CChip>
+              <CChip size="lg">Large chip</CChip>
+              <CChip variant="outline" color="primary" clickable>Outline primary</CChip>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip</strong> <small>Interactive examples</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Chips support selection, removal, and disabled states using props like
+            <code>selectable</code>, <code>removable</code>, and <code>disabled</code>.
+          </p>
+          <DocsExample href="components/chip/#interactive">
+            <div class="d-flex flex-wrap gap-2 mb-3">
+              <CChip selectable>Selectable</CChip>
+              <CChip selectable selected>Selected</CChip>
+              <CChip removable>Removable</CChip>
+              <CChip disabled>Disabled</CChip>
+            </div>
+            <div class="d-flex flex-wrap gap-2">
+              <CChip size="lg" removable>Team Alpha</CChip>
+              <CChip variant="outline" color="info" selectable>Filter: Priority</CChip>
+              <CChip variant="outline" color="success" selectable selected>Filter: Ready</CChip>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import avatar1 from '@/assets/images/avatars/1.jpg'
+import avatar4 from '@/assets/images/avatars/4.jpg'
+
+export default {
+  name: 'Chips',
+  setup() {
+    return {
+      avatar1,
+      avatar4,
+    }
+  },
+}
+</script>
diff --git a/src/views/forms/ChipInput.vue b/src/views/forms/ChipInput.vue
new file mode 100644
index 00000000..d80abdbc
--- /dev/null
+++ b/src/views/forms/ChipInput.vue
@@ -0,0 +1,190 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="forms/chip-input/" />
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Basic example</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Chip input lets users enter multiple values in one field. Use the
+            <code>CChipInput</code> component with props like <code>placeholder</code> and
+            <code>defaultValue</code>.
+          </p>
+          <DocsExample href="forms/chip-input/#basic-example">
+            <CChipInput
+              label="Skills:"
+              name="skills"
+              placeholder="Add a skill..."
+              :defaultValue="['JavaScript', 'TypeScript', 'Accessibility']"
+            />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Variants</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Use the <code>chipClassName</code> prop to apply contextual chip styles, which is handy
+            for labels, issue types, or priorities.
+          </p>
+          <DocsExample href="forms/chip-input/#variants">
+            <CChipInput
+              name="issues"
+              placeholder="Add label..."
+              :defaultValue="['Feature', 'Approved', 'Needs review', 'Blocking']"
+              :chipClassName="getChipClassName"
+            />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Sizes</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Use the <code>size</code> prop with <code>"sm"</code> or <code>"lg"</code> to align the
+            field with surrounding form controls.
+          </p>
+          <DocsExample href="forms/chip-input/#sizes">
+            <CChipInput
+              label="Small"
+              size="sm"
+              placeholder="Add small tag..."
+              :defaultValue="['HTML']"
+              class="mb-3"
+            />
+            <CChipInput
+              label="Default"
+              placeholder="Add default tag..."
+              :defaultValue="['JavaScript']"
+              class="mb-3"
+            />
+            <CChipInput
+              label="Large"
+              size="lg"
+              placeholder="Add large tag..."
+              :defaultValue="['TypeScript']"
+            />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Empty state and label</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            You can start with an empty field or use a separate <code>CFormLabel</code> for clearer
+            form structure and accessibility.
+          </p>
+          <DocsExample href="forms/chip-input/#empty-state">
+            <CChipInput name="tags" placeholder="Start typing tags..." class="mb-3" />
+            <div class="mb-0">
+              <CFormLabel for="techStackInput">Tech stack</CFormLabel>
+              <CChipInput
+                id="techStackInput"
+                name="techStack"
+                placeholder="Add package..."
+                :defaultValue="['Vue', 'Vite']"
+              />
+              <CFormText>Press Enter or comma to add a value.</CFormText>
+            </div>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Disabled and readonly</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Use the <code>disabled</code> prop to block interaction entirely, or
+            <code>readOnly</code> to keep values visible while preventing changes.
+          </p>
+          <DocsExample href="forms/chip-input/#disabled">
+            <CChipInput
+              disabled
+              :removable="false"
+              placeholder="Input disabled"
+              :defaultValue="['Read only', 'Locked']"
+              class="mb-3"
+            />
+            <CChipInput
+              readOnly
+              placeholder="Read-only values"
+              :defaultValue="['JavaScript', 'TypeScript']"
+            />
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Chip Input</strong> <small>Form-friendly examples</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            The component integrates well with ordinary forms, including helper text and predefined
+            values.
+          </p>
+          <DocsExample href="forms/chip-input/#with-label">
+            <form class="row g-3">
+              <div class="col-12">
+                <CFormLabel for="recipientsInput">Recipients</CFormLabel>
+                <CChipInput
+                  id="recipientsInput"
+                  name="recipients"
+                  placeholder="Add email..."
+                  :defaultValue="['olivia@coreui.io', 'ethan@coreui.io']"
+                />
+                <CFormText>Add one address at a time and press Enter.</CFormText>
+              </div>
+              <div class="col-12">
+                <CFormLabel for="categoriesInput">Categories</CFormLabel>
+                <CChipInput
+                  id="categoriesInput"
+                  name="categories"
+                  placeholder="Add category..."
+                  :defaultValue="['Product', 'Design', 'Docs']"
+                  chipClassName="chip-outline"
+                />
+              </div>
+            </form>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  setup() {
+    const getChipClassName = (value) => {
+      const colorMap = {
+        Feature: 'chip-primary',
+        Approved: 'chip-success',
+        'Needs review': 'chip-warning',
+        Blocking: 'chip-danger',
+      }
+      return colorMap[value] || ''
+    }
+
+    return {
+      getChipClassName,
+    }
+  },
+}
+</script>