diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
index 59dc7a46798a49c70b822b9ac54356d718b4766f..b4f7b5b32c32241444e2b136bc05518034a5d08b 100644
--- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
+++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
@@ -66,6 +66,10 @@ struct ComponentsNavigationPage {
       title: 'Slider',
       page: 'pages/components/SliderThemePage'
     },
+    {
+      title: 'TextInput',
+      page: 'pages/components/TextInputPage'
+    },
     {
       title: 'TextPicker',
       page: 'pages/components/TextPickerPage'
diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/TextInputPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/TextInputPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..859fedc6e632f9575ba6c7c49fda2142068d7811
--- /dev/null
+++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/TextInputPage.ets
@@ -0,0 +1,103 @@
+class TextInputPageGreenColors implements CustomColors {
+  fontPrimary = '#ff049404'
+  fontSecondary = '#ff859d85'
+  interactiveFocus = '#ff7c10f5'
+  interactivePressed = '#ffacd7bc'
+  compBackgroundTertiary = '#ffdcfae6'
+}
+
+class TextInputPageRedColors implements CustomColors {
+  fontPrimary = '#fff32b3c'
+  fontSecondary = '#ffe29393'
+  interactiveFocus = '#ff7c10f5'
+  interactivePressed = '#ffe7b3b3'
+  compBackgroundTertiary = '#fffcd5d5'
+}
+
+class TextInputPageCustomTheme implements CustomTheme {
+  colors?: CustomColors
+
+  constructor(colors: CustomColors) {
+    this.colors = colors
+  }
+}
+
+@Entry
+@Component
+struct TextInputPage {
+  @State textDefault: string = ''
+  @State textInline: string = ''
+  @State textPassword: string = ''
+
+  static readonly themeCount = 3
+  themeNames: string[] = ['System', 'Custom (green)', 'Custom (red)']
+  themeArray: (CustomTheme | undefined)[] = [
+    undefined, // System
+    new TextInputPageCustomTheme(new TextInputPageGreenColors()),
+    new TextInputPageCustomTheme(new TextInputPageRedColors())
+  ]
+  @State themeIndex: number = 0
+
+  build() {
+    Column() {
+      Column({ space: '8vp' }) {
+        Text(`Current theme: ${this.themeNames[this.themeIndex]}`)
+        Button('Change Theme')
+          .onClick(() => {
+            this.themeIndex = (this.themeIndex + 1) % TextInputPage.themeCount
+          })
+      }
+      .margin({
+        top: '50vp'
+      })
+
+      // Case 1
+      Text(`Style = Default`)
+        .margin({ left: '20vp', top: '50vp' })
+        .alignSelf(ItemAlign.Start)
+      WithTheme(this.themeArray[this.themeIndex]) {
+        TextInput({ placeholder: 'Type text here' })
+          .margin({ left: '20vp', right: '20vp', top: '10vp'})
+          .onChange((value: string) => {
+            this.textDefault = value
+          })
+      }
+      Text(`Text: ${this.textDefault}`)
+        .margin({ left: '20vp', top: '10vp' })
+        .alignSelf(ItemAlign.Start)
+
+      // Case 2
+      Text(`Style = Default, Type = Password`)
+        .margin({ left: '20vp', top: '50vp' })
+        .alignSelf(ItemAlign.Start)
+      WithTheme(this.themeArray[this.themeIndex]) {
+        TextInput({ placeholder: 'Type text here' })
+          .margin({ left: '20vp', right: '20vp', top: '10vp'})
+          .onChange((value: string) => {
+            this.textPassword = value
+          })
+          .type(InputType.Password)
+      }
+      Text(`Text: ${this.textPassword}`)
+        .margin({ left: '20vp', top: '10vp' })
+        .alignSelf(ItemAlign.Start)
+
+      // Case 3
+      Text(`Style = Inline`)
+        .margin({ left: '20vp', top: '50vp' })
+        .alignSelf(ItemAlign.Start)
+      WithTheme(this.themeArray[this.themeIndex]) {
+        TextInput({ placeholder: 'Type text here' })
+          .style(TextInputStyle.Inline)
+          .margin({ left: '20vp', right: '20vp', top: '10vp'})
+          .onChange((value: string) => {
+            this.textInline = value
+          })
+      }
+      Text(`Text: ${this.textInline}`)
+        .margin({ left: '20vp', top: '10vp' })
+        .alignSelf(ItemAlign.Start)
+    }
+    .width('100%')
+  }
+}
\ No newline at end of file
diff --git a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
index dfce25678ecc3c15a96ae747778285178e919872..7007932d472e9db5141e95508ef9c099c7e54aa1 100644
--- a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
+++ b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
@@ -34,6 +34,7 @@
     "pages/components/SearchPage",
     "pages/components/SelectPage",
     "pages/components/SliderThemePage",
+    "pages/components/TextInputPage",
     "pages/components/TextPickerPage",
     "pages/components/TimePickerPage",
     "pages/components/TogglePage",