From 3714aff2aa95714162c2f753d4814ad192fd8fcd Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Wed, 17 Aug 2022 15:56:03 -0700
Subject: [PATCH] fix(checkbox-input): display checkmark when checked is true
 (#699)

---
 .changeset/early-parrots-compete.md   |  5 +++++
 packages/checkbox-input/index.js      |  2 +-
 packages/checkbox-input/index.test.js | 15 +++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/early-parrots-compete.md

diff --git a/.changeset/early-parrots-compete.md b/.changeset/early-parrots-compete.md
new file mode 100644
index 000000000..8b6cf5b31
--- /dev/null
+++ b/.changeset/early-parrots-compete.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-checkbox-input': patch
+---
+
+Display checkmark when checked is true
diff --git a/packages/checkbox-input/index.js b/packages/checkbox-input/index.js
index 57daf0627..c41440c8c 100644
--- a/packages/checkbox-input/index.js
+++ b/packages/checkbox-input/index.js
@@ -35,7 +35,7 @@ function CheckboxInput({
     >
       <div className={s.wrapper}>
         <span className={s.checkbox}>
-          {field.value && <SvgrCheckmark />}
+          {field.value || field.checked ? <SvgrCheckmark /> : null}
           <input id={inputId} type="checkbox" {...field} />
         </span>
 
diff --git a/packages/checkbox-input/index.test.js b/packages/checkbox-input/index.test.js
index c2ae6ae2b..3782685ab 100644
--- a/packages/checkbox-input/index.test.js
+++ b/packages/checkbox-input/index.test.js
@@ -37,12 +37,23 @@ describe('<CheckboxInput />', () => {
     expect(screen.getByText(emText).tagName).toBe('EM')
   })
 
-  it('should show the Check icon when the input is checked', () => {
+  it('should show the Check icon when the input is checked via value', () => {
     const props = defaultProps
     const { container } = render(
       <CheckboxInput
         {...defaultProps}
-        field={{ ...props.field, value: true, checked: true }}
+        field={{ ...props.field, value: true }}
+      />
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should show the Check icon when the input is checked via checked', () => {
+    const props = defaultProps
+    const { container } = render(
+      <CheckboxInput
+        {...defaultProps}
+        field={{ ...props.field, checked: true }}
       />
     )
     expect(container.querySelector('svg')).toBeInTheDocument()