diff --git a/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor b/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor
index 3e3169ae42e..fa0cb79b386 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor
@@ -130,6 +130,14 @@
     </ValidateForm>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsDisplayTitle"]" Introduction="@Localizer["IsDisplayIntro"]" Name="IsDisplay">
+    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
+        <FieldItems>
+            <EditorItem @bind-Field="@Model.Hobby" Items="@Hobbies" />
+        </FieldItems>
+    </EditorForm>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <AttributeTable Title="@Localizer["EditorFormAttributeTitle"]" Items="@GetEditorItemAttributes()"></AttributeTable>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor.cs
index a693c96005a..ccaac6089fd 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/EditorForms.razor.cs
@@ -49,6 +49,7 @@ protected override void OnInitialized()
             DateTime = new DateTime(1997, 12, 05),
             Education = EnumEducation.Middle
         };
+        Model.Hobby = Foo.GenerateHobbies(FooLocalizer).Take(3).Select(i => i.Text);
     }
 
     [NotNull]
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 1a53ff3e4c6..152909e805e 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2639,7 +2639,9 @@
     "TestName": "Tom",
     "TestAddress": "The test address",
     "AutoGenerateDescription": "In this example, by setting <code>the autoGenerate AllItem</code> value to <code>false</code>, turning off auto-generation, and rendering the form editing by manually adding two <code>EditoItem</code> edits",
-    "SkipValidateDescription": "In some cases, the value of some columns in the form may be a secondary classification, etc., and you need to know the information for a level 1 classification, at which point the first-level classification requires additional components to render if <code>Select</code>, which is independent of the current context binding model <code>Model</code>, which requires that you set the <code>SkipValidate</code> value to <code>true</code>, turn off model validation for this component"
+    "SkipValidateDescription": "In some cases, the value of some columns in the form may be a secondary classification, etc., and you need to know the information for a level 1 classification, at which point the first-level classification requires additional components to render if <code>Select</code>, which is independent of the current context binding model <code>Model</code>, which requires that you set the <code>SkipValidate</code> value to <code>true</code>, turn off model validation for this component",
+    "IsDisplayTitle": "Readonly Form",
+    "IsDisplayIntro": "Make the entire form non-editable by setting <code>IsDisplay=\"true\"</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.FloatingLabels": {
     "FloatingLabelsTitle": "FloatingLabel",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index c6e1bf16f76..baa9180c2c8 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2640,7 +2640,10 @@
     "TestName": "张三",
     "TestAddress": "测试地址",
     "AutoGenerateDescription": "本例中通过设置 <code>AutoGenerateAllItem</code> 值为 <code>false</code>，关闭自动生成功能，通过手动增加两个 <code>EditorItem</code> 编辑项来呈现表单编辑",
-    "SkipValidateDescription": "在某些情况下表单中有些列的值可能是二级分类等等，需要知道一级分类的信息，这个时候一级分类需要额外的组件来呈现，如果 <code>Select</code>，而这个组件是与当前上下文绑定模型 <code>Model</code> 无关的，这种需求中通过设置 <code>SkipValidate</code> 值为 <code>true</code>，关闭此组件的模型验证功能即可"
+    "SkipValidateDescription": "在某些情况下表单中有些列的值可能是二级分类等等，需要知道一级分类的信息，这个时候一级分类需要额外的组件来呈现，如果 <code>Select</code>，而这个组件是与当前上下文绑定模型 <code>Model</code> 无关的，这种需求中通过设置 <code>SkipValidate</code> 值为 <code>true</code>，关闭此组件的模型验证功能即可",
+    "IsDisplayTitle": "只读表单",
+    "IsDisplayIntro": "通过设置 <code>IsDisplay=\"true\"</code> 使整个表单不可编辑"
+
   },
   "BootstrapBlazor.Server.Components.Samples.FloatingLabels": {
     "FloatingLabelsTitle": "FloatingLabel 输入框",