diff --git a/zh-cn/application-dev/ui/arkts-common-attributes-content-modifier.md b/zh-cn/application-dev/ui/arkts-common-attributes-content-modifier.md
new file mode 100644
index 0000000000000000000000000000000000000000..d5c26fbf672e7fd565e5b25db1bb4fac20dbd691
--- /dev/null
+++ b/zh-cn/application-dev/ui/arkts-common-attributes-content-modifier.md
@@ -0,0 +1,152 @@
+# 内容修改
+
+支持通过样式builder自定义特定组件的内容区。
+
+> **说明：**
+>
+> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## contentModifier
+
+contentModifier(modifier: ContentModifier\<T>): T
+
+定制内容区的方法。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名   | 类型               | 必填 | 说明                                                         |
+| -------- | ------------------ | ---- | ------------------------------------------------------------ |
+| modifier | ContentModifier\<T> | 是   | 在当前组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |
+
+**返回值：**
+
+| 类型 | 说明 |
+| --- | --- |
+| T | 返回当前组件。 |
+
+## ContentModifier\<T>
+
+开发者需要自定义class实现ContentModifier接口。
+
+### applyContent
+
+applyContent(): WrappedBuilder<[T]>
+
+定制内容区的Builder。
+
+**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数**：
+
+| 参数 | 描述                                                         |
+| ---- | ------------------------------------------------------------ |
+| T    | 组件的属性类，用来区别不同组件自定义内容区后所需要的不同信息，比如Button组件的ButtonConfiguration，Checkbox组件的CheckBoxConfiguration等。 |
+
+**T参数支持范围:**
+
+ButtonConfiguration、CheckBoxConfiguration、DataPanelConfiguration、TextClockConfiguration、ToggleConfiguration、GaugeConfiguration、LoadingProgressConfiguration、RadioConfiguration、ProgressConfiguration、RatingConfiguration、SliderConfiguration
+
+**属性支持范围:**
+
+支持通用属性enabled，contentModifier。
+## CommonConfiguration\<T><sup>12+</sup>对象说明
+
+开发者需要自定义class实现ContentModifier接口。
+
+**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+| 参数名  | 类型    | 说明              |
+| ------ | ------ | ---------------- |
+| enabled | boolean | 如果该值为true，则contentModifier可用，并且可以响应triggerChange等操作，如果设置为false，则不会响应triggerChange等操作。 |
+| contentModifier | ContentModifier\<T> | 用于将用户需要的组件信息发送到自定义内容区。 |
+
+
+## 示例
+
+通过ContentModifier实现自定义复选框样式的功能，用一个五边形复选框替换原本Checkbox的样式。如果选中，内部会出现红色三角图案，标题会显示选中字样；如果取消选中，红色三角图案消失，标题会显示非选中字样。
+
+```ts
+// xxx.ets
+class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
+  selectedColor: Color = Color.White;
+
+  constructor(selectedColor: Color) {
+    this.selectedColor = selectedColor;
+  }
+
+  applyContent(): WrappedBuilder<[CheckBoxConfiguration]> {
+    return wrapBuilder(buildCheckbox);
+  }
+}
+
+@Builder
+function buildCheckbox(config: CheckBoxConfiguration) {
+  Column({ space: 10 }) {
+    Text(config.name + (config.selected ? "（选中）" : "（非选中）"))
+    Shape() {
+      // 五边形复选框样式
+      Path()
+        .width(200)
+        .height(60)
+        .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
+        .fillOpacity(0)
+        .strokeWidth(3)
+      // 红色三角图案样式
+      Path()
+        .width(10)
+        .height(10)
+        .commands('M50 0 L100 100 L0 100 Z')
+        .visibility(config.selected ? Visibility.Visible : Visibility.Hidden)
+        .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black)
+        .stroke((config.contentModifier as MyCheckboxStyle).selectedColor)
+        .margin({ left: 11, top: 10 })
+    }
+    .width(300)
+    .height(200)
+    .viewPort({
+      x: 0,
+      y: 0,
+      width: 310,
+      height: 310
+    })
+    .strokeLineJoin(LineJoinStyle.Miter)
+    .strokeMiterLimit(5)
+    .onClick(() => {
+      // 点击后，触发复选框点击状态变化
+      if (config.selected) {
+        config.triggerChange(false);
+      } else {
+        config.triggerChange(true);
+      }
+    })
+    .margin({ left: 150 })
+  }
+}
+
+@Entry
+@Component
+struct Index {
+  build() {
+    Row() {
+      Column() {
+        Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
+          .select(true)
+          .contentModifier(new MyCheckboxStyle(Color.Red))
+          .onChange((value: boolean) => {
+            console.info('Checkbox change is' + value);
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+![](figures/common_builder.gif)
diff --git a/zh-cn/application-dev/ui/arkts-forms-overview.md b/zh-cn/application-dev/ui/arkts-forms-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..89e8cb326974dbb7a677848462905ef0ac6471ef
--- /dev/null
+++ b/zh-cn/application-dev/ui/arkts-forms-overview.md
@@ -0,0 +1,12 @@
+# 表单与选择组件概述
+
+表单与选择组件通常用于构建一个页面的基础元素，如按钮、开关等。
+
+开发者可以根据实际应用场景选择合适的表单与选择组件进行页面开发。
+
+| 表单与选择组件名称 | 应用场景 |
+| -------- | -------- |
+| [按钮(Button)](arkts-common-components-button.md) | 通常用于响应用户的点击操作。 |
+| [弧形按钮(ArcButton)](arkts-advanced-components-arcbutton.md) | 用于圆形屏幕。为手表用户提供强调、普通、警告等样式按钮。 |
+| [单选框(Radio)](arkts-common-components-radio-button.md) | 单选框组件，通常用于提供相应的用户交互选择项。 |
+| [切换按钮(Toggle)](arkts-common-components-switch.md) | 一般用于两种状态之间的切换， 如勾选框和开关。 |
diff --git a/zh-cn/application-dev/ui/figures/common_builder.gif b/zh-cn/application-dev/ui/figures/common_builder.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1f8b8ff4d208c8d93d3c527dc6c9949d26ae3f90
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/common_builder.gif differ