From fed34e40ed7cd7e23bd7f0dd9ad37e65b86e19f1 Mon Sep 17 00:00:00 2001
From: KoichiKiyokawa <40315079+KoichiKiyokawa@users.noreply.github.com>
Date: Wed, 13 Oct 2021 23:38:51 +0900
Subject: [PATCH] fix: add a value prop to Checkbox (#849)

---
 COMPONENT_INDEX.md           |  1 +
 docs/src/COMPONENT_API.json  | 11 +++++++++++
 src/Checkbox/Checkbox.svelte |  4 ++++
 types/Checkbox/Checkbox.d.ts |  6 ++++++
 4 files changed, 22 insertions(+)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 068af834..7d15b938 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -463,6 +463,7 @@ None.
 | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
 | ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element      |
 | checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
+| value         | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the checkbox                 |
 | indeterminate | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
 | skeleton      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
 | readonly      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index ea62c0b5..7435dbd5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -708,6 +708,17 @@
       "moduleName": "Checkbox",
       "filePath": "src/Checkbox/Checkbox.svelte",
       "props": [
+        {
+          "name": "value",
+          "kind": "let",
+          "description": "Specify the value of the checkbox",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "checked",
           "kind": "let",
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 41af3a8a..bf2a00a1 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -3,6 +3,9 @@
    * @event {boolean} check
    */
 
+  /** Specify the value of the checkbox */
+  export let value = "";
+
   /** Specify whether the checkbox is checked */
   export let checked = false;
 
@@ -69,6 +72,7 @@
     <input
       bind:this="{ref}"
       type="checkbox"
+      value="{value}"
       checked="{checked}"
       disabled="{disabled}"
       id="{id}"
diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts
index d3746584..c4af3c82 100644
--- a/types/Checkbox/Checkbox.d.ts
+++ b/types/Checkbox/Checkbox.d.ts
@@ -2,6 +2,12 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface CheckboxProps {
+  /**
+   * Specify the value of the checkbox
+   * @default ""
+   */
+  value?: string;
+
   /**
    * Specify whether the checkbox is checked
    * @default false