1 files changed, 33 insertions, 0 deletions
diff --git a/src/demos/SelectorsDemo.tsx b/src/demos/SelectorsDemo.tsx
new file mode 100644
index 0000000..5fd299f
--- /dev/null
+++ b/src/demos/SelectorsDemo.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import { DateInput } from '@astryxdesign/core/DateInput'
+import { Grid } from '@astryxdesign/core/Grid'
+import { Selector } from '@astryxdesign/core/Selector'
+
+type DateString =
+  `${number}${number}${number}${number}-${number}${number}-${number}${number}`
+
+export function SelectorsDemo() {
+  const [fruit, setFruit] = useState<string | undefined>()
+  const [date, setDate] = useState<DateString | undefined>()
+
+  return (
+    <Grid columns={{ minWidth: 220, max: 2 }} gap={5}>
+      <Selector
+        label="最喜欢的水果"
+        options={['苹果', '香蕉', '橙子', '芒果', '菠萝']}
+        placeholder="请选择一种水果"
+        value={fruit}
+        onChange={setFruit}
+        width="100%"
+      />
+      <DateInput
+        label="开始日期"
+        placeholder="选择日期"
+        value={date}
+        onChange={setDate}
+        hasClear
+        width="100%"
+      />
+    </Grid>
+  )
+}