diff --git a/packages/dify-ui/src/select/index.stories.tsx b/packages/dify-ui/src/select/index.stories.tsx
index 75602572019..f27180bbe08 100644
--- a/packages/dify-ui/src/select/index.stories.tsx
+++ b/packages/dify-ui/src/select/index.stories.tsx
@@ -14,6 +14,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '.'
+import { Button } from '../button'
+import { FieldDescription, FieldRoot } from '../field'
+import { Form } from '../form'
 
 const triggerWidth = 'w-64'
 
@@ -326,40 +329,33 @@ export const Controlled: Story = {
 
 export const InForm: Story = {
   render: () => (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault()
-      }}
-      className="flex w-72 flex-col gap-3"
-    >
-      <label className="text-xs font-medium text-text-tertiary" htmlFor="timezone">
-        Timezone
-      </label>
-      <Select name="timezone" defaultValue="utc">
-        <SelectTrigger id="timezone" aria-label="Timezone">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="utc">
-            <SelectItemText>UTC</SelectItemText>
-            <SelectItemIndicator />
-          </SelectItem>
-          <SelectItem value="pst">
-            <SelectItemText>Pacific (PST)</SelectItemText>
-            <SelectItemIndicator />
-          </SelectItem>
-          <SelectItem value="jst">
-            <SelectItemText>Japan (JST)</SelectItemText>
-            <SelectItemIndicator />
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      <button
-        type="submit"
-        className="h-8 rounded-lg bg-components-button-primary-bg px-3 text-sm text-components-button-primary-text"
-      >
-        Submit
-      </button>
-    </form>
+    <Form aria-label="Timezone form" className="grid w-72 gap-3" onFormSubmit={() => undefined}>
+      <FieldRoot name="timezone">
+        <Select name="timezone" defaultValue="utc">
+          <SelectLabel>Timezone</SelectLabel>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="utc">
+              <SelectItemText>UTC</SelectItemText>
+              <SelectItemIndicator />
+            </SelectItem>
+            <SelectItem value="pst">
+              <SelectItemText>Pacific (PST)</SelectItemText>
+              <SelectItemIndicator />
+            </SelectItem>
+            <SelectItem value="jst">
+              <SelectItemText>Japan (JST)</SelectItemText>
+              <SelectItemIndicator />
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <FieldDescription>Used to schedule workflow runs.</FieldDescription>
+      </FieldRoot>
+      <div className="flex justify-end">
+        <Button type="submit" variant="primary">Save</Button>
+      </div>
+    </Form>
   ),
 }