1 files changed, 58 insertions, 0 deletions
diff --git a/src/demos/InputsDemo.tsx b/src/demos/InputsDemo.tsx
new file mode 100644
index 0000000..47c9724
--- /dev/null
+++ b/src/demos/InputsDemo.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { Banner } from '@astryxdesign/core/Banner'
+import { Button } from '@astryxdesign/core/Button'
+import { HStack } from '@astryxdesign/core/HStack'
+import { Switch } from '@astryxdesign/core/Switch'
+import { TextArea } from '@astryxdesign/core/TextArea'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { VStack } from '@astryxdesign/core/VStack'
+
+export function InputsDemo() {
+  const [name, setName] = useState('模板项目')
+  const [description, setDescription] = useState(
+    '一个使用 Astryx 搭建的 React 应用。',
+  )
+  const [updates, setUpdates] = useState(true)
+  const [saved, setSaved] = useState(false)
+
+  return (
+    <VStack gap={4}>
+      <TextInput
+        label="项目名称"
+        value={name}
+        onChange={setName}
+        isRequired
+        width="100%"
+      />
+      <TextArea
+        label="项目描述"
+        value={description}
+        onChange={setDescription}
+        rows={3}
+        width="100%"
+      />
+      <Switch
+        label="版本更新提醒"
+        description="有新版本时发送一封简短的邮件。"
+        value={updates}
+        onChange={setUpdates}
+      />
+      <HStack gap={2} hAlign="end">
+        <Button
+          label="保存设置"
+          variant="primary"
+          onClick={() => setSaved(true)}
+        />
+      </HStack>
+      {saved ? (
+        <Banner
+          status="success"
+          title="设置已保存"
+          description="表单值只保存在当前演示的内存中。"
+          isDismissable
+          onDismiss={() => setSaved(false)}
+        />
+      ) : null}
+    </VStack>
+  )
+}