diff --git a/live-editing/configs/CheckboxConfigGenerator.ts b/live-editing/configs/CheckboxConfigGenerator.ts
index 1e1722c264..54a9935632 100644
--- a/live-editing/configs/CheckboxConfigGenerator.ts
+++ b/live-editing/configs/CheckboxConfigGenerator.ts
@@ -7,29 +7,30 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // checkbox sample 2
+        // checkbox overview
         configs.push(new Config({
-            component: 'CheckboxSample1Component',
+            component: 'CheckboxOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
 
-        // checkbox sample 2
+        // checkbox states
         configs.push(new Config({
-            component: 'CheckboxSample2Component',
+            component: 'CheckboxStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
 
+        // checkbox styling
         configs.push(new Config({
-            component: 'CheckboxSample3Component',
+            component: 'CheckboxStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
 
-        // checkbox styling
+        // checkbox tailwind styling
         configs.push(new Config({
-            component: 'CheckboxStylingComponent',
+            component: 'CheckboxTailwindStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html
new file mode 100644
index 0000000000..0cbca8c1c2
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html
@@ -0,0 +1,23 @@
+<div class="shopping-list">
+    <igx-list class="list">
+        @for (group of groups; track group.title) {
+            <igx-list-item [isHeader]="true" class="group-header">
+                <span class="group-title">{{ group.title }}</span>
+            </igx-list-item>
+            @for (item of group.items; track item.label) {
+                <igx-list-item class="shopping-item" [class.shopping-item-checked]="item.checked">
+                    <igx-checkbox igxListThumbnail [(ngModel)]="item.checked">
+                        <span>{{ item.label }}</span>
+                    </igx-checkbox>
+                    <button igxListAction type="button" igxIconButton="flat" class="item-menu" [attr.aria-label]="'Options for ' + item.label">
+                        <igx-icon>more_vert</igx-icon>
+                    </button>
+                </igx-list-item>
+            }
+        }
+    </igx-list>
+
+    <button igxButton="fab" type="button" class="add-item" aria-label="Add item">
+        <igx-icon>add</igx-icon>
+    </button>
+</div>
diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss
new file mode 100644
index 0000000000..08d2d6a02c
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss
@@ -0,0 +1,116 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.shopping-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: 1rem;
+    width: 22.5rem;
+    height: 24.3125rem;
+    padding: 1rem 0;
+    overflow: hidden;
+    border-radius: 0.25rem;
+    background: var(--ig-surface-100);
+    box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%);
+}
+
+/* Bootstrap draws its controls a size bigger than the other themes do, and at
+   the large size styles.scss asks the page for, the rows stop fitting the
+   card. Only Bootstrap steps down. */
+@container style(--ig-theme: bootstrap) {
+    .shopping-list {
+        --ig-size: var(--ig-size-medium);
+    }
+}
+
+.list {
+    background: transparent;
+    border: none;
+    gap: 0.25rem;
+    overflow: hidden;
+}
+
+/* The header keeps the theme's own overline typography; only the inset that
+   lines it up with the rows below is the design's. */
+.group-header {
+    padding: 0 1rem;
+    background: transparent;
+}
+
+.shopping-item + .group-header {
+    margin-top: 0.75rem;
+}
+
+.group-title {
+    color: var(--ig-secondary-500);
+}
+
+.shopping-item {
+    background: transparent;
+    border-bottom: none;
+    --border-color: transparent;
+    --border-width: 0;
+}
+
+/* The row's own padding and gap sit on the item's content wrapper. */
+.shopping-item ::ng-deep .igx-list-item__content {
+    padding: 0 1rem;
+    gap: 0.5rem;
+    background: transparent;
+}
+
+.shopping-item:hover,
+.shopping-item:focus-within {
+    background: transparent;
+    box-shadow: none;
+}
+
+.shopping-item:hover ::ng-deep .igx-list-item__content,
+.shopping-item:focus-within ::ng-deep .igx-list-item__content {
+    background: transparent;
+    box-shadow: none;
+}
+
+.shopping-item ::ng-deep .igx-list-item__thumbnail {
+    margin-inline-start: 0.125rem;
+}
+
+.shopping-item igx-checkbox {
+    --label-margin: 1.125rem;
+}
+
+.shopping-item-checked,
+.shopping-item-checked:hover,
+.shopping-item-checked:focus-within {
+    background: var(--ig-gray-100);
+    box-shadow: none;
+}
+
+.shopping-item-checked ::ng-deep .igx-list-item__content,
+.shopping-item-checked:hover ::ng-deep .igx-list-item__content,
+.shopping-item-checked:focus-within ::ng-deep .igx-list-item__content {
+    background: var(--ig-gray-100);
+}
+
+.item-menu {
+    color: var(--ig-gray-700);
+}
+
+.item-menu igx-icon {
+    font-size: 1.5rem;
+}
+
+.add-item {
+    --ig-size: var(--ig-size-large);
+    --ig-fab-button-border-radius: 50%;
+    position: absolute;
+    inset-inline-end: 1rem;
+    inset-block-end: 1rem;
+}
diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts
new file mode 100644
index 0000000000..75287da672
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular/list';
+
+interface ShoppingItem {
+    label: string;
+    checked: boolean;
+}
+
+interface ShoppingGroup {
+    title: string;
+    items: ShoppingItem[];
+}
+
+@Component({
+    selector: 'app-checkbox-overview',
+    styleUrls: ['./checkbox-overview.component.scss'],
+    templateUrl: './checkbox-overview.component.html',
+    imports: [
+        FormsModule,
+        IgxCheckboxComponent,
+        IgxListComponent,
+        IgxListItemComponent,
+        IgxListThumbnailDirective,
+        IgxListActionDirective,
+        IgxIconButtonDirective,
+        IgxButtonDirective,
+        IgxIconComponent
+    ]
+})
+export class CheckboxOverviewComponent {
+    public groups: ShoppingGroup[] = [
+        {
+            title: 'Grocery store',
+            items: [
+                { label: 'Bread', checked: false },
+                { label: 'Milk 4l', checked: false },
+                { label: 'Eggs 1 pack', checked: true }
+            ]
+        },
+        {
+            title: 'Fruit and vegetable shop',
+            items: [
+                { label: 'Strawberries', checked: false },
+                { label: 'Lemons', checked: false },
+                { label: 'Single Line Item', checked: true }
+            ]
+        }
+    ];
+}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html
deleted file mode 100644
index 37ea059ef6..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<igx-checkbox [checked]="true">
-    Simple checkbox
-</igx-checkbox>
diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss
deleted file mode 100644
index 3de9aa4997..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-    display: flex;
-    padding: 16px;
-}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts
deleted file mode 100644
index 57bc770cbe..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-
-@Component({
-    selector: 'app-checkbox-sample-1',
-    styleUrls: ['./checkbox-sample-1.component.scss'],
-    templateUrl: './checkbox-sample-1.component.html',
-    imports: [IgxCheckboxComponent]
-})
-export class CheckboxSample1Component { }
diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html
deleted file mode 100644
index c0a2fbe075..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-@for (task of tasks; track task) {
-  <igx-checkbox [checked]="task.done">
-    {{ task.description }}
-  </igx-checkbox>
-}
-
diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss
deleted file mode 100644
index 01aef9d947..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:host {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 16px;
-}
-
-igx-checkbox {
-    margin-top: 16px;
-}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts
deleted file mode 100644
index 780fbd7013..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-
-@Component({
-    selector: 'app-checkbox-sample-2',
-    styleUrls: ['./checkbox-sample-2.component.scss'],
-    templateUrl: './checkbox-sample-2.component.html',
-    imports: [IgxCheckboxComponent]
-})
-export class CheckboxSample2Component {
-    public tasks = [
-        { done: true, description: 'Research' },
-        { done: true, description: 'Implement' },
-        { done: false, description: 'Test' }
-    ];
-}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html
deleted file mode 100644
index e9bc179833..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<igx-checkbox
-  [readonly]="true"
-  [(ngModel)]="masterCheckbox.checked"
-  [indeterminate]="masterCheckbox.indeterminate"
-  (click)="toggleAll()"
-  >
-  All done
-</igx-checkbox>
-@for (task of tasks; track task) {
-  <igx-checkbox class="tasks" [(ngModel)]="task.done">
-    {{ task.description }}
-  </igx-checkbox>
-}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss
deleted file mode 100644
index 16c5cb6b06..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-:host {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 16px;
-}
-
-igx-checkbox {
-    margin-top: 16px;
-}
-
-igx-checkbox.tasks {
-    padding-left: 10px;
-}
diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts
deleted file mode 100644
index 0ebf0cb53e..0000000000
--- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-import { FormsModule } from '@angular/forms';
-
-
-@Component({
-    selector: 'app-checkbox-sample-3',
-    styleUrls: ['./checkbox-sample-3.component.scss'],
-    templateUrl: './checkbox-sample-3.component.html',
-    imports: [IgxCheckboxComponent, FormsModule]
-})
-export class CheckboxSample3Component {
-    public tasks = [
-        { done: true, description: 'Research' },
-        { done: true, description: 'Implement' },
-        { done: false, description: 'Test' }
-    ];
-
-    public get masterCheckbox() {
-        return this.tasks.reduce(
-            (acc, curr, idx, arr) => {
-                acc.checked = acc.checked && curr.done;
-                acc.done = curr.done ? acc.done + 1 : acc.done;
-                acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
-
-                return acc;
-            },
-            {
-                checked: true,
-                done: 0,
-                indeterminate: false
-            }
-        );
-    }
-
-    public toggleAll() {
-        if (this.masterCheckbox.checked) {
-            for (const task of this.tasks) {
-                task.done = false;
-            }
-        } else {
-            for (const task of this.tasks) {
-                task.done = true;
-            }
-        }
-    }
-}
diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html
new file mode 100644
index 0000000000..ae3890ced0
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html
@@ -0,0 +1,27 @@
+<!-- the checkboxes are display-only, so user interaction is blocked -->
+<div class="states">
+    <div class="state">
+        <span class="state-label">Indeterminate</span>
+        <igx-checkbox [readonly]="true" [indeterminate]="true" aria-label="Indeterminate"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">On</span>
+        <igx-checkbox [readonly]="true" [checked]="true" aria-label="On"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Off</span>
+        <igx-checkbox [readonly]="true" aria-label="Off"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Disabled</span>
+        <igx-checkbox [disabled]="true" aria-label="Disabled"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Invalid</span>
+        <igx-checkbox [readonly]="true" [invalid]="true" aria-label="Invalid"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Required</span>
+        <igx-checkbox [readonly]="true" [required]="true" aria-label="Required"></igx-checkbox>
+    </div>
+</div>
diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss
new file mode 100644
index 0000000000..e1368ef8d6
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss
@@ -0,0 +1,43 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: flex-end;
+    gap: 4.5rem;
+}
+
+.state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+/* the checkboxes are display-only, so they don't offer a pointer */
+.state igx-checkbox {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    cursor: default;
+}
+
+.state igx-checkbox ::ng-deep .igx-checkbox__composite-wrapper {
+    width: 1rem;
+    height: 1rem;
+    padding: 0;
+}
+
+.state-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts
new file mode 100644
index 0000000000..6f99af6476
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+
+@Component({
+    selector: 'app-checkbox-states',
+    styleUrls: ['./checkbox-states.component.scss'],
+    templateUrl: './checkbox-states.component.html',
+    imports: [IgxCheckboxComponent]
+})
+export class CheckboxStatesComponent { }
diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html
index 67b225595e..b749729fb4 100644
--- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html
+++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html
@@ -1,3 +1,29 @@
-<igx-checkbox id="checkbox-1" disableRipple [checked]="true">
-  Styled checkbox
-</igx-checkbox>
+<div class="team-card">
+    <p class="team-title">Team members</p>
+
+    <igx-checkbox
+        class="select-all"
+        labelPosition="before"
+        [checked]="allSelected"
+        [indeterminate]="someSelected && !allSelected"
+        (change)="toggleAll($event.checked)">
+        <span>Select all</span>
+    </igx-checkbox>
+
+    <igx-list class="members">
+        @for (member of members; track member.email) {
+            <igx-list-item class="member" [class.member-selected]="member.selected">
+                <igx-avatar igxListThumbnail [src]="member.avatar" shape="circle" [attr.aria-label]="member.name"></igx-avatar>
+                <span igxListLineTitle class="member-name">{{ member.name }}</span>
+                <span igxListLineSubTitle class="member-email">{{ member.email }}</span>
+                <igx-checkbox
+                    igxListAction
+                    class="member-check"
+                    [attr.aria-label]="member.name"
+                    [(ngModel)]="member.selected"></igx-checkbox>
+            </igx-list-item>
+        }
+    </igx-list>
+
+    <button igxButton="contained" type="button" class="continue-button">Continue</button>
+</div>
diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss
index 656193ef8d..e5ec9c7744 100644
--- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss
+++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss
@@ -1,39 +1,167 @@
-@use "sass:map";
-@use "igniteui-angular/theming" as *;
+@use "sass:meta";
+@import url("https://use.typekit.net/bng2zgw.css");
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
 
-:host {
-    --ig-font-family: Arial, Helvetica, sans-serif;
-    --ig-subtitle-1-font-size: #{rem(14px)};
+app-checkbox-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.team-card {
+    /* The design's own palette and typeface. They are set here instead of
+       coming from the theme, so the sample keeps its custom look in every theme. */
+    --team-surface: #fff;
+    --team-primary: #0176ff;
+    --team-gray-100: #f3f6fa;
+    --team-gray-200: #e5ebf3;
+    --team-gray-400: #a9b8cc;
+    --team-gray-500: #7d91ab;
+    --team-gray-600: #556c86;
+    --team-gray-700: #344b65;
+    --team-gray-900: #00142b;
+    /* aktiv-grotesk is the kit's family name. */
+    --ig-font-family: aktiv-grotesk, sans-serif;
+
+    --ig-checkbox-empty-color: var(--team-gray-400);
+    --ig-checkbox-empty-color-hover: var(--team-gray-400);
+    --ig-checkbox-fill-color: var(--team-primary);
+    --ig-checkbox-fill-color-hover: var(--team-primary);
+    --ig-checkbox-tick-color: #fff;
+    --ig-checkbox-tick-color-hover: #fff;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 26.3125rem;
+    padding: 0.5rem 0;
+    border: 1px solid var(--team-gray-200);
+    border-radius: 0.75rem;
+    background: var(--team-surface);
+    font-family: var(--ig-font-family);
+}
+
+.team-title {
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    margin: 0;
+    padding: 0 1rem;
+    color: var(--team-gray-500);
+    font-family: var(--ig-body-1-font-family, var(--ig-font-family));
+    font-size: var(--ig-body-1-font-size);
+    font-weight: var(--ig-body-1-font-weight);
+    line-height: var(--ig-body-1-line-height);
+    letter-spacing: var(--ig-body-1-letter-spacing);
+    text-transform: var(--ig-body-1-text-transform);
+}
+
+.select-all {
+    --ig-checkbox-empty-color: var(--team-gray-500);
+    --ig-checkbox-empty-color-hover: var(--team-gray-500);
+    --ig-checkbox-label-color: var(--team-gray-600);
+    --ig-checkbox-label-color-hover: var(--team-gray-600);
+
+    box-sizing: border-box;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+}
+
+.select-all .igx-checkbox__label--before {
+    margin-inline-start: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    letter-spacing: 0.15px;
+}
+
+/* A 24px slot around the 20px box, as in the design. */
+.select-all .igx-checkbox__composite-wrapper,
+.member-check .igx-checkbox__composite-wrapper {
+    margin: 0.125rem;
+}
+
+.members {
+    background: transparent;
+    border: none;
+    overflow: hidden;
+}
+
+.member {
+    background: transparent;
+    border-bottom: none;
+    --border-color: transparent;
+    --border-width: 0;
+}
 
+/* The row's own padding and gap sit on the item's content wrapper. */
+.member .igx-list-item__content {
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    background: transparent;
+}
+
+.member:hover,
+.member:focus-within {
+    background: transparent;
+    box-shadow: none;
+}
+
+.member:hover .igx-list-item__content,
+.member:focus-within .igx-list-item__content {
+    background: transparent;
+    box-shadow: none;
+}
+
+.member-selected,
+.member-selected:hover,
+.member-selected:focus-within {
+    background: var(--team-gray-100);
+}
+
+.member-selected .igx-list-item__content,
+.member-selected:hover .igx-list-item__content,
+.member-selected:focus-within .igx-list-item__content {
+    background: var(--team-gray-100);
+}
+
+.member igx-avatar {
+    --ig-size: var(--ig-size-small);
+}
+
+.member .member-name {
     display: block;
-    padding: rem(18px) 0 0 rem(18px);
-}
-
-// CSS variables approach
-.igx-checkbox {
-    --tick-color: black;
-    --tick-color-hover: black;
-    --tick-width: 4;
-    --fill-color: orange;
-    --fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h);
-    --label-color: black;
-    --empty-color: orange;
-    --border-width: #{rem(3px)};
-    --border-radius: #{rem(3px)};
-}
-
-// Sass theme approach
-// $custom-checkbox-theme: checkbox-theme(
-//     $tick-color: black,
-//     $tick-color-hover: black,
-//     $tick-width: 4,
-//     $fill-color: orange,
-//     $fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h),
-//     $label-color: black,
-//     $empty-color: orange,
-//     $border-radius: rem(3px),
-// );
-//
-// :host ::ng-deep {
-//     @include tokens($custom-checkbox-theme);
-// }
+    color: var(--team-gray-900);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.125rem;
+}
+
+.member .member-email {
+    display: block;
+    color: var(--team-gray-700);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.4px;
+}
+
+.continue-button {
+    align-self: flex-end;
+    margin: 1rem 1rem 0;
+    min-width: auto;
+    width: 5.25rem;
+    min-height: 1.875rem;
+    height: 1.875rem;
+    padding: 0 0.75rem;
+    border-color: var(--team-primary);
+    background: var(--team-primary);
+    color: #fff;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.375rem;
+    letter-spacing: 0.1px;
+    text-transform: none;
+}
diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts
index 34adc68489..ffb600e5be 100644
--- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts
+++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts
@@ -1,13 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list';
+
+interface TeamMember {
+    name: string;
+    email: string;
+    avatar: string;
+    selected: boolean;
+}
 
 @Component({
-  selector: 'app-checkbox-styling',
-  styleUrls: ['./checkbox-styling.component.scss'],
-  templateUrl: './checkbox-styling.component.html',
-  providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }],
-  imports: [IgxCheckboxComponent]
+    selector: 'app-checkbox-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./checkbox-styling.component.scss'],
+    templateUrl: './checkbox-styling.component.html',
+    imports: [
+        FormsModule,
+        IgxCheckboxComponent,
+        IgxAvatarComponent,
+        IgxListComponent,
+        IgxListItemComponent,
+        IgxListThumbnailDirective,
+        IgxListLineTitleDirective,
+        IgxListLineSubTitleDirective,
+        IgxListActionDirective,
+        IgxButtonDirective
+    ]
 })
 export class CheckboxStylingComponent {
+    public members: TeamMember[] = [
+        { name: 'Emily Potter', email: 'emily@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png', selected: false },
+        { name: 'Alex Lima', email: 'alex@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png', selected: true },
+        { name: 'Mateo García', email: 'mateo@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png', selected: false },
+        { name: 'Kate Roberts', email: 'kate@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png', selected: false }
+    ];
+
+    public get allSelected(): boolean {
+        return this.members.every((member) => member.selected);
+    }
+
+    public get someSelected(): boolean {
+        return this.members.some((member) => member.selected);
+    }
+
+    public toggleAll(checked: boolean): void {
+        this.members.forEach((member) => member.selected = checked);
+    }
 }
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
index d427737911..9d0f5b3fad 100644
--- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
@@ -1,3 +1,26 @@
-<igx-checkbox class="!light-checkbox ![--empty-color:#7B9E89] ![--fill-color:#7B9E89]" [checked]="true">
-    Styled checkbox
-</igx-checkbox>
+<div class="flex w-[218px] flex-col rounded-2xl border border-[#0176ff] bg-white p-[7px] [--ig-font-family:aktiv-grotesk,sans-serif]">
+    <igx-accordion class="flex flex-col divide-y divide-[#e5ebf3] pb-2">
+        @for (section of sections; track section.title) {
+            <igx-expansion-panel
+                class="[--ig-expansion-panel-body-background:transparent] [--ig-expansion-panel-expanded-margin:0] [--ig-expansion-panel-header-background:transparent] [--ig-expansion-panel-header-focus-background:transparent] [--ig-expansion-panel-header-icon-color:#1a314a]"
+                [(collapsed)]="section.collapsed">
+                <igx-expansion-panel-header [iconPosition]="'right'">
+                    <igx-expansion-panel-title>
+                        <span class="pb-2 text-base font-bold leading-5 text-[#004699]">{{ section.title }}</span>
+                    </igx-expansion-panel-title>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <div class="flex flex-col">
+                        @for (option of section.options; track option.label) {
+                            <igx-checkbox
+                                class="filter-option [--ig-checkbox-border-radius:0.125rem] [--ig-checkbox-empty-color-hover:#0176ff] [--ig-checkbox-empty-color:#a9b8cc] [--ig-checkbox-fill-color-hover:#0176ff] [--ig-checkbox-fill-color:#0176ff] [--ig-checkbox-label-color-hover:#1a314a] [--ig-checkbox-label-color:#1a314a] [--ig-checkbox-tick-color-hover:#fff] [--ig-checkbox-tick-color:#fff]"
+                                [(ngModel)]="option.checked">
+                                <span class="text-sm font-medium leading-6 tracking-[0.1px]">{{ option.label }}</span>
+                            </igx-checkbox>
+                        }
+                    </div>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+        }
+    </igx-accordion>
+</div>
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss
index e69de29bb2..ce444be31c 100644
--- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss
@@ -0,0 +1,31 @@
+@use "sass:meta";
+@import url("https://use.typekit.net/bng2zgw.css");
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-checkbox-tailwind-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+/* The design's 44px header: an 8px inset around the title's 28px box. */
+igx-expansion-panel-header .igx-expansion-panel__header-inner {
+    padding: 0.5rem 1rem;
+}
+
+/* The body's own inset is the theme's, so it is set here instead: 6px, which
+   the option's 10px of padding completes into the header's 16px. */
+igx-expansion-panel-body {
+    padding: 0 0.375rem 0.5rem;
+}
+
+/* A 40px row in every theme. The padding sits on the checkbox itself rather
+   than on the box, so the padding a theme adds around the box for its ripple
+   can no longer stretch the row. */
+.filter-option {
+    --label-margin: 0.75rem;
+
+    padding: 0.5rem 0.625rem;
+}
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
index e492210351..1540c59e11 100644
--- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
@@ -1,10 +1,64 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IgxAccordionComponent } from 'igniteui-angular/accordion';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel';
+
+interface FilterOption {
+    label: string;
+    checked: boolean;
+}
+
+interface FilterSection {
+    title: string;
+    collapsed: boolean;
+    options: FilterOption[];
+}
 
 @Component({
     selector: 'app-checkbox-tailwind-styling',
+    encapsulation: ViewEncapsulation.None,
     styleUrls: ['./checkbox-tailwind-styling.component.scss'],
     templateUrl: './checkbox-tailwind-styling.component.html',
-    imports: [IgxCheckboxComponent]
+    imports: [
+        FormsModule,
+        IgxCheckboxComponent,
+        IgxAccordionComponent,
+        IgxExpansionPanelComponent,
+        IgxExpansionPanelHeaderComponent,
+        IgxExpansionPanelTitleDirective,
+        IgxExpansionPanelBodyComponent
+    ]
 })
-export class CheckboxTailwindStylingComponent { }
+export class CheckboxTailwindStylingComponent {
+    public sections: FilterSection[] = [
+        {
+            title: 'Brand',
+            collapsed: false,
+            options: [
+                { label: 'Nike', checked: true },
+                { label: 'Roxy', checked: false },
+                { label: 'Guess', checked: false }
+            ]
+        },
+        {
+            title: 'Color',
+            collapsed: false,
+            options: [
+                { label: 'Black', checked: false },
+                { label: 'White', checked: true },
+                { label: 'Gray', checked: false }
+            ]
+        },
+        {
+            title: 'Size',
+            collapsed: false,
+            options: [
+                { label: 'Small', checked: false },
+                { label: 'Medium', checked: true },
+                { label: 'Large', checked: false },
+                { label: 'Extra large', checked: false }
+            ]
+        }
+    ];
+}
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index eb06f34909..c60900ec61 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -24,9 +24,8 @@ export const dataEntriesRoutesData = {
     "button-download": { displayName: "Download Button", parentName: "Button" },
     "button-styling": { displayName: "Button Style", parentName: "Button" },
     "button-tailwind-styling": { displayName: "Button Tailwind Style", parentName: "Button" },
-    "checkbox-sample-1": { displayName: "Simple Checkbox", parentName: "Checkbox" },
-    "checkbox-sample-2": { displayName: "Multiple Checkboxes", parentName: "Checkbox" },
-    "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" },
+    "checkbox-overview": { displayName: "Checkbox Overview", parentName: "Checkbox" },
+    "checkbox-states": { displayName: "Checkbox States", parentName: "Checkbox" },
     "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" },
     "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" },
     "color-picker-overview": { displayName: "Overview", parentName: "Color Picker" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index 5a7a06e8b8..1219ec653a 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -23,9 +23,8 @@ import { ButtonFabComponent } from './button/button-fab/button-fab.component';
 import { ButtonOutlinedComponent } from './button/button-outlined/button-outlined.component';
 import { ButtonStylingComponent } from './button/button-styling/button-styling.component';
 import { ButtonTailwindStylingComponent } from './button/button-tailwind-styling/button-tailwind-styling.component';
-import { CheckboxSample1Component } from './checkbox/checkbox-sample-1/checkbox-sample-1.component';
-import { CheckboxSample2Component } from './checkbox/checkbox-sample-2/checkbox-sample-2.component';
-import { CheckboxSample3Component } from './checkbox/checkbox-sample-3/checkbox-sample-3.component';
+import { CheckboxOverviewComponent } from './checkbox/checkbox-overview/checkbox-overview.component';
+import { CheckboxStatesComponent } from './checkbox/checkbox-states/checkbox-states.component';
 import { CheckboxStylingComponent } from './checkbox/checkbox-styling/checkbox-styling.component';
 import { CheckboxTailwindStylingComponent } from './checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component';
 import { ColorPickerOverviewComponent } from './color-picker/overview/color-picker-overview.component';
@@ -221,19 +220,14 @@ export const DataEntriesRoutes: Routes = [
         path: 'button-tailwind-styling'
     },
     {
-        component: CheckboxSample1Component,
-        data: dataEntriesRoutesData['checkbox-sample-1'],
-        path: 'checkbox-sample-1'
+        component: CheckboxOverviewComponent,
+        data: dataEntriesRoutesData['checkbox-overview'],
+        path: 'checkbox-overview'
     },
     {
-        component: CheckboxSample2Component,
-        data: dataEntriesRoutesData['checkbox-sample-2'],
-        path: 'checkbox-sample-2'
-    },
-    {
-        component: CheckboxSample3Component,
-        data: dataEntriesRoutesData['checkbox-sample-3'],
-        path: 'checkbox-sample-3'
+        component: CheckboxStatesComponent,
+        data: dataEntriesRoutesData['checkbox-states'],
+        path: 'checkbox-states'
     },
     {
         component: CheckboxStylingComponent,