From bab2c66922be17025a0838edcc24fedec27a70dd Mon Sep 17 00:00:00 2001
From: "noah.choi" <noah.choi@goorm.io>
Date: Tue, 16 Jun 2026 15:50:36 +0900
Subject: [PATCH 1/4] provide invalid state to context

---
 packages/core/src/components/checkbox/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index b1b5e6c9a..93077090a 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -58,7 +58,7 @@ export const CheckboxRoot = forwardRef<HTMLElement, CheckboxRoot.Props>((props,
         },
     });
 
-    return <CheckboxProvider value={{ size, indeterminate }}>{root}</CheckboxProvider>;
+    return <CheckboxProvider value={variantProps}>{root}</CheckboxProvider>;
 });
 CheckboxRoot.displayName = 'Checkbox.Root';
 

From d514af3bd562eadfa3e7b0224361fa7cd37b7713 Mon Sep 17 00:00:00 2001
From: "noah.choi" <noah.choi@goorm.io>
Date: Tue, 16 Jun 2026 15:55:43 +0900
Subject: [PATCH 2/4] enhance checkbox test cases

---
 .../src/components/checkbox/checkbox.test.tsx | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/core/src/components/checkbox/checkbox.test.tsx b/packages/core/src/components/checkbox/checkbox.test.tsx
index fbfc655ae..51f2af9f4 100644
--- a/packages/core/src/components/checkbox/checkbox.test.tsx
+++ b/packages/core/src/components/checkbox/checkbox.test.tsx
@@ -183,6 +183,17 @@ describe('Checkbox', () => {
 
             expect(checkbox).not.toHaveAttribute('aria-invalid');
         });
+
+        it('should provide the invalid state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} invalid>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-invalid');
+        });
     });
 
     describe('prop: indeterminate', () => {
@@ -217,6 +228,17 @@ describe('Checkbox', () => {
 
             expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
         });
+
+        it('should provide the indeterminate state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} indeterminate>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-indeterminate');
+        });
     });
 
     describe('prop: disabled', () => {
@@ -245,6 +267,17 @@ describe('Checkbox', () => {
             expect(onCheckedChange).not.toHaveBeenCalled();
             expect(checkbox).not.toBeChecked();
         });
+
+        it('should provide the disabled state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} disabled>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-disabled');
+        });
     });
 
     describe('prop: readOnly', () => {
@@ -292,6 +325,17 @@ describe('Checkbox', () => {
             await userEvent.tab();
             expect(nextButton).toHaveFocus();
         });
+
+        it('should provide the readOnly state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} readOnly>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-readonly');
+        });
     });
 });
 

From 0563726b6133641f691dae8c6d2ddde2695392df Mon Sep 17 00:00:00 2001
From: "noah.choi" <noah.choi@goorm.io>
Date: Tue, 16 Jun 2026 15:57:41 +0900
Subject: [PATCH 3/4] edit title of test cases

---
 packages/core/src/components/checkbox/checkbox.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/checkbox/checkbox.test.tsx b/packages/core/src/components/checkbox/checkbox.test.tsx
index 51f2af9f4..bdb5bb96c 100644
--- a/packages/core/src/components/checkbox/checkbox.test.tsx
+++ b/packages/core/src/components/checkbox/checkbox.test.tsx
@@ -184,7 +184,7 @@ describe('Checkbox', () => {
             expect(checkbox).not.toHaveAttribute('aria-invalid');
         });
 
-        it('should provide the invalid state to the indicator', async () => {
+        it('should propagate the invalid state to the indicator', async () => {
             const rendered = render(
                 <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} invalid>
                     <Checkbox.IndicatorPrimitive data-testid="indicator" />
@@ -229,7 +229,7 @@ describe('Checkbox', () => {
             expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
         });
 
-        it('should provide the indeterminate state to the indicator', async () => {
+        it('should propagate the indeterminate state to the indicator', async () => {
             const rendered = render(
                 <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} indeterminate>
                     <Checkbox.IndicatorPrimitive data-testid="indicator" />
@@ -268,7 +268,7 @@ describe('Checkbox', () => {
             expect(checkbox).not.toBeChecked();
         });
 
-        it('should provide the disabled state to the indicator', async () => {
+        it('should propagate the disabled state to the indicator', async () => {
             const rendered = render(
                 <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} disabled>
                     <Checkbox.IndicatorPrimitive data-testid="indicator" />
@@ -326,7 +326,7 @@ describe('Checkbox', () => {
             expect(nextButton).toHaveFocus();
         });
 
-        it('should provide the readOnly state to the indicator', async () => {
+        it('should propagate the readOnly state to the indicator', async () => {
             const rendered = render(
                 <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} readOnly>
                     <Checkbox.IndicatorPrimitive data-testid="indicator" />

From 7bcd06a6f90c5c08fd25e8d5c33c27cf4c827ab7 Mon Sep 17 00:00:00 2001
From: "noah.choi" <noah.choi@goorm.io>
Date: Tue, 16 Jun 2026 15:57:49 +0900
Subject: [PATCH 4/4] add changeset

---
 .changeset/tired-clowns-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tired-clowns-walk.md

diff --git a/.changeset/tired-clowns-walk.md b/.changeset/tired-clowns-walk.md
new file mode 100644
index 000000000..87453e928
--- /dev/null
+++ b/.changeset/tired-clowns-walk.md
@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': patch
+---
+
+propagate `invalid` state to indicator element