1 files changed, 55 insertions, 0 deletions
diff --git a/src/demos/SelectionDemo.tsx b/src/demos/SelectionDemo.tsx
new file mode 100644
index 0000000..41ca918
--- /dev/null
+++ b/src/demos/SelectionDemo.tsx
@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import {
+  CheckboxList,
+  CheckboxListItem,
+} from '@astryxdesign/core/CheckboxList'
+import { Grid } from '@astryxdesign/core/Grid'
+import { RadioList, RadioListItem } from '@astryxdesign/core/RadioList'
+import { Slider } from '@astryxdesign/core/Slider'
+
+export function SelectionDemo() {
+  const [notifications, setNotifications] = useState<string[]>(['email'])
+  const [plan, setPlan] = useState('team')
+  const [volume, setVolume] = useState(60)
+
+  return (
+    <Grid columns={{ minWidth: 220, max: 2 }} gap={5}>
+      <CheckboxList
+        label="通知方式"
+        description="可以选择多个渠道。"
+        value={notifications}
+        onChange={setNotifications}
+        hasDividers>
+        <CheckboxListItem
+          label="邮件"
+          value="email"
+          description="每周一发送摘要"
+        />
+        <CheckboxListItem
+          label="推送"
+          value="push"
+          description="在设备上即时提醒"
+        />
+        <CheckboxListItem
+          label="短信"
+          value="sms"
+          description="仅用于重要通知"
+        />
+      </CheckboxList>
+
+      <RadioList label="当前套餐" value={plan} onChange={setPlan}>
+        <RadioListItem label="个人版" value="personal" />
+        <RadioListItem label="团队版" value="team" />
+        <RadioListItem label="企业版" value="enterprise" />
+      </RadioList>
+
+      <Slider
+        label="提醒音量"
+        value={volume}
+        onChange={setVolume}
+        width="100%"
+        valueDisplay="text"
+      />
+    </Grid>
+  )
+}