diff --git a/components/checkbox/AntCheckbox.razor b/components/checkbox/AntCheckbox.razor
index 8c0699ca..ae02e217 100644
--- a/components/checkbox/AntCheckbox.razor
+++ b/components/checkbox/AntCheckbox.razor
@@ -1,12 +1,12 @@
 @namespace AntBlazor
 @inherits AntCheckboxBase
 
-<label class="ant-checkbox-wrapper" @onclick="hostClick" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+<label class="ant-checkbox-wrapper" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
     <span class="@ClassMapper.Class" style="">
         <input @ref="inputElement"
                value="@(value)"
                checked="@(@checked)"
-               disabled="@disabled"
+               disabled="@(disabled)"
                @onchange="@inputCheckedChange"
                @attributes="@inputAttributes"
                type="checkbox"
diff --git a/components/checkbox/AntCheckboxBase.cs b/components/checkbox/AntCheckboxBase.cs
index 3ac72f01..bb74b0a3 100644
--- a/components/checkbox/AntCheckboxBase.cs
+++ b/components/checkbox/AntCheckboxBase.cs
@@ -50,6 +50,15 @@ namespace AntBlazor
             base.OnParametersSet();
         }
 
+        protected override async Task OnInitializedAsync()
+        {
+            if (this is AntCheckbox checkbox)
+            {
+                CheckboxGroup?.CheckboxItems.Add(checkbox);
+            }
+            await base.OnInitializedAsync();
+        }
+
         protected void setClass()
         {
             var prefixName = "ant-checkbox";
@@ -60,11 +69,6 @@ namespace AntBlazor
                 .If($"{prefixName}-indeterminate", () => indeterminate);
         }
 
-        protected async Task hostClick(MouseEventArgs args)
-        {
-            await innerCheckedChange(this.@checked);
-        }
-
         protected async Task inputCheckedChange(ChangeEventArgs args)
         {
             await innerCheckedChange(Convert.ToBoolean(args.Value));
@@ -77,10 +81,7 @@ namespace AntBlazor
                 this.@checked = @checked;
                 onChange?.Invoke(this.@checked);
                 await this.checkedChange.InvokeAsync(this.@checked);
-                if (this.CheckboxGroup != null)
-                {
-                    // this.CheckboxGroup.onChange();
-                }
+                CheckboxGroup?.OnCheckboxChange(this);
             }
         }
 
diff --git a/components/checkbox/AntCheckboxGroup.razor b/components/checkbox/AntCheckboxGroup.razor
index 1f0eb0da..b6fee08d 100644
--- a/components/checkbox/AntCheckboxGroup.razor
+++ b/components/checkbox/AntCheckboxGroup.razor
@@ -1,17 +1,18 @@
 @namespace AntBlazor
 @inherits AntCheckboxGroupBase
 
-<CascadingValue Value="this">
-    <div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
-        @foreach (var option in options)
-        {
-            <AntCheckbox class="ant-checkbox-group-item"
-                         disabled="option.disabled || disabled"
-                         checked="@(option.@checked)"
-                         value="@option.value"
-                         checkedChange="@onOptionChange">
-                <span>@option.label</span>
-            </AntCheckbox>
-        }
-    </div>
-</CascadingValue>
\ No newline at end of file
+    <CascadingValue Value="this">
+        <div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+            @foreach (var option in options)
+            {
+                <AntCheckbox class="ant-checkbox-group-item"
+                             disabled="option.disabled || disabled"
+                             checked="@(option.@checked)"
+                             value="@option.value"
+                             checkedChange="@onOptionChange">
+                    <span>@option.label</span>
+                </AntCheckbox>
+            }
+            @ChildContent
+        </div>
+    </CascadingValue>
\ No newline at end of file
diff --git a/components/checkbox/AntCheckboxGroupBase.cs b/components/checkbox/AntCheckboxGroupBase.cs
index d8b37b02..d4d6a211 100644
--- a/components/checkbox/AntCheckboxGroupBase.cs
+++ b/components/checkbox/AntCheckboxGroupBase.cs
@@ -1,4 +1,7 @@
 using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace AntBlazor
@@ -8,13 +11,27 @@ namespace AntBlazor
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        public Action<object> onChange;
+        [Parameter] public IList<AntCheckbox> CheckboxItems { get; set; } = new List<AntCheckbox>();
+
+        [Parameter] public EventCallback<object> OnChange { get; set; }
 
         public Action onTouched;
 
         [Parameter]
         public CheckBoxOption[] options { get; set; } = Array.Empty<CheckBoxOption>();
 
+        [Parameter]
+        public IList<string> Value { get; set; } = Array.Empty<string>();
+
+        protected override async Task OnParametersSetAsync()
+        {
+            foreach (var item in Value)
+            {
+                options.Where(o => o.value == item).ForEach(o => o.@checked = true);
+            }
+            await base.OnParametersSetAsync();
+        }
+
         [Parameter]
         public bool disabled { get; set; }
 
@@ -23,9 +40,24 @@ namespace AntBlazor
             ClassMapper.Add("ant-checkbox-group");
         }
 
-        public void onOptionChange()
+        public async void onOptionChange(bool change)
         {
-            this.onChange?.Invoke(this.options);
+            await this.OnChange.InvokeAsync(this.options);
+            StateHasChanged();
+        }
+
+        internal async Task OnCheckboxChange(AntCheckboxBase checkboxBase)
+        {
+            if (checkboxBase is AntCheckbox checkbox)
+            {
+                int index = CheckboxItems.IndexOf(checkbox);
+                if (options[index] != null)
+                {
+                    options[index].@checked = checkbox.@checked;
+                }
+            }
+            
+            StateHasChanged();
         }
     }
 }
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Pages/Checkbox.razor b/site/AntBlazor.Docs/Pages/Checkbox.razor
new file mode 100644
index 00000000..1155416e
--- /dev/null
+++ b/site/AntBlazor.Docs/Pages/Checkbox.razor
@@ -0,0 +1,160 @@
+<AntTitle level="1">Checkbox</AntTitle>
+<AntText>Checkbox component.</AntText>
+<AntTitle level="2">When To Use</AntTitle>
+<AntParagraph>
+    <ul>
+        <li>Used for selecting multiple values from several options.</li>
+        <li>If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.</li>
+    </ul>
+</AntParagraph>
+<br />
+<h2>Examples</h2>
+<br />
+<DemoCard>
+    <Title>Basic</Title>
+    <Description>Basic usage of checkbox.</Description>
+    <Demo>
+        <AntCheckbox>Checkbox</AntCheckbox>
+    </Demo>
+</DemoCard>
+<br />
+
+<DemoCard>
+    <Title>Controlled Checkbox</Title>
+    <Description>Communicated with other components.</Description>
+    <Demo>
+        <div style="margin-bottom: 20px">
+            <AntCheckbox checked="@isChecked" disabled="@disabled" checkedChange="@ToggleChecked">
+                @($"{(isChecked ? "Check" : "Uncheck")}-{(disabled ? "Disable" : "Enable")}")
+            </AntCheckbox>
+        </div>
+        <br />
+        <AntButton type="@AntButtonType.Primary" size="small" @onclick="@ToggleChecked">@(isChecked ? "Check" : "Uncheck")</AntButton>
+        <AntButton type="@AntButtonType.Primary" size="small" @onclick="@ToggleDisable">@(disabled ? "Disable" : "Enable")</AntButton>
+    </Demo>
+</DemoCard>
+@code{
+    bool isChecked = true;
+    bool disabled = false;
+    void ToggleChecked()
+    {
+        isChecked = !isChecked;
+    }
+    void ToggleDisable()
+    {
+        disabled = !disabled;
+    }
+}
+<br />
+
+<DemoCard>
+    <Title>Check all</Title>
+    <Description>
+        <AntParagraph>The <AntText code>indeterminate</AntText> property can help you to achieve a 'check all' effect.</AntParagraph>
+    </Description>
+    <Demo>
+        <AntCheckbox indeterminate="@indeterminate" checked="@checkAll" checkedChange="@CheckAllChanged">Check all</AntCheckbox>
+        <AntDivider />
+        <AntCheckboxGroup options="@ckeckAllOptions" OnChange="@OnChanged"></AntCheckboxGroup>
+    </Demo>
+</DemoCard>
+@code{
+
+    static CheckBoxOption[] ckeckAllOptions = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" ,@checked=true},
+        new CheckBoxOption{ label="Pear", value="Pear" },
+        new CheckBoxOption{ label="Orange", value="Orange",@checked=true },
+    };
+
+    void CheckAllChanged()
+    {
+        bool allChecked = checkAll;
+        ckeckAllOptions.ForEach(o => o.@checked = !allChecked);
+    }
+
+    void OnChanged()
+    {
+
+    }
+
+    bool indeterminate => ckeckAllOptions.Count(o => o.@checked) > 0 && ckeckAllOptions.Count(o => o.@checked) < ckeckAllOptions.Count();
+
+    bool checkAll => ckeckAllOptions.All(o => o.@checked);
+
+}
+<br />
+
+<DemoCard>
+    <Title>Disabled</Title>
+    <Description>Disabled checkbox.</Description>
+    <Demo>
+        <div>
+            <AntCheckbox disabled="true"></AntCheckbox>
+            <br />
+            <AntCheckbox checked="true" disabled="true"></AntCheckbox>
+        </div>
+    </Demo>
+</DemoCard>
+<br />
+
+<DemoCard>
+    <Title>Checkbox Group</Title>
+    <Description>Generate a group of checkboxes from an array.</Description>
+    <Demo>
+        <AntCheckboxGroup options="plainOptions" @bind-Value="@checkValue1"></AntCheckboxGroup>
+        <br />
+        <AntCheckboxGroup options="options"  @bind-Value="@checkValue2"></AntCheckboxGroup>
+        <br />
+        <AntCheckboxGroup options="optionsWithDisabled" disabled="true"  @bind-Value="@checkValue1"></AntCheckboxGroup>
+    </Demo>
+</DemoCard>
+@code{
+
+    CheckBoxOption[] plainOptions = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" },
+        new CheckBoxOption{ label="Pear", value="Pear"},
+        new CheckBoxOption{ label="Orange", value="Orange" },
+    };
+    CheckBoxOption[] options = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" },
+        new CheckBoxOption{ label="Pear", value="Pear"},
+        new CheckBoxOption{ label="Orange", value="Orange" },
+    };
+
+    CheckBoxOption[] optionsWithDisabled = new CheckBoxOption[] {
+        new CheckBoxOption{ label ="Apple", value="Apple" },
+        new CheckBoxOption{ label = "Pear", value="Pear" },
+        new CheckBoxOption{  label = "Orange",value= "Orange", disabled = false },
+
+    };
+
+    string[] checkValue1 = {"Apple"};
+    string[] checkValue2 = {"Pear"};
+}
+<br />
+
+<DemoCard>
+    <Title>Use with Grid</Title>
+    <Description>We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.</Description>
+    <Demo>
+        <AntCheckboxGroup>
+            <AntRow>
+                <AntCol span="8">
+                    <AntCheckbox>A</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>B</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>C</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>D</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>E</AntCheckbox>
+                </AntCol>
+            </AntRow>
+        </AntCheckboxGroup>
+    </Demo>
+</DemoCard>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Resources/en-US.yml b/site/AntBlazor.Docs/Resources/en-US.yml
index a560c768..8ac40753 100644
--- a/site/AntBlazor.Docs/Resources/en-US.yml
+++ b/site/AntBlazor.Docs/Resources/en-US.yml
@@ -10,6 +10,7 @@ Breadcrumb: Breadcrumb
 Menu: Menu
 Steps: Steps 
 DataEntry: Data Entry
+Checkbox: Checkbox
 Switch: Switch
 Input: Input
 InputNumber: InputNumber
diff --git a/site/AntBlazor.Docs/Resources/zh-CN.yml b/site/AntBlazor.Docs/Resources/zh-CN.yml
index 4929347d..5b7b09b5 100644
--- a/site/AntBlazor.Docs/Resources/zh-CN.yml
+++ b/site/AntBlazor.Docs/Resources/zh-CN.yml
@@ -10,6 +10,7 @@ Breadcrumb: 面包屑
 Menu: 导航菜单
 Steps: 步骤条
 DataEntry: 数据录入
+Checkbox: 多选框
 Switch: 开关
 Input: 输入框
 InputNumber: 数字输入框
diff --git a/site/AntBlazor.Docs/wwwroot/menu.json b/site/AntBlazor.Docs/wwwroot/menu.json
index c8324c71..9f22b3e9 100644
--- a/site/AntBlazor.Docs/wwwroot/menu.json
+++ b/site/AntBlazor.Docs/wwwroot/menu.json
@@ -73,6 +73,11 @@
         "title": "DataEntry",
         "type": "itemGroup",
         "children": [
+          {
+            "title": "Checkbox",
+            "type": "menuItem",
+            "url": "checkbox"
+          },
           {
             "title": "Switch",
             "type": "menuItem",