diff --git a/packages/client/src/schema-component/antd/color-select/ColorSelect.tsx b/packages/client/src/schema-component/antd/color-select/ColorSelect.tsx
new file mode 100644
index 000000000..02cd4f390
--- /dev/null
+++ b/packages/client/src/schema-component/antd/color-select/ColorSelect.tsx
@@ -0,0 +1,51 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { connect, mapProps, mapReadPretty } from '@formily/react';
+import { Select, Tag } from 'antd';
+import React from 'react';
+import { useCompile } from '../../hooks/useCompile';
+
+const colors = {
+  red: '{{t("Red")}}',
+  magenta: '{{t("Magenta")}}',
+  volcano: '{{t("Volcano")}}',
+  orange: '{{t("Orange")}}',
+  gold: '{{t("Gold")}}',
+  lime: '{{t("Lime")}}',
+  green: '{{t("Green")}}',
+  cyan: '{{t("Cyan")}}',
+  blue: '{{t("Blue")}}',
+  geekblue: '{{t("Geek blue")}}',
+  purple: '{{t("Purple")}}',
+  default: '{{t("Default")}}',
+};
+
+export const ColorSelect = connect(
+  (props) => {
+    const compile = useCompile();
+    return (
+      <Select {...props}>
+        {Object.keys(colors).map((color) => (
+          <Select.Option value={color}>
+            <Tag color={color}>{compile(colors[color] || colors.default)}</Tag>
+          </Select.Option>
+        ))}
+      </Select>
+    );
+  },
+  mapProps((props, field) => {
+    return {
+      ...props,
+      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
+    };
+  }),
+  mapReadPretty((props) => {
+    const compile = useCompile();
+    const { value } = props;
+    if (!colors[value]) {
+      return null;
+    }
+    return <Tag color={value}>{compile(colors[value] || colors.default)}</Tag>;
+  }),
+);
+
+export default ColorSelect;
diff --git a/packages/client/src/schema-component/antd/color-select/demos/demo1.tsx b/packages/client/src/schema-component/antd/color-select/demos/demo1.tsx
new file mode 100644
index 000000000..7d03b4ddc
--- /dev/null
+++ b/packages/client/src/schema-component/antd/color-select/demos/demo1.tsx
@@ -0,0 +1,41 @@
+/**
+ * title: 勾选
+ */
+import { FormItem } from '@formily/antd';
+import { ColorSelect, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'boolean',
+      title: `编辑模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'ColorSelect',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'boolean',
+      title: `阅读模式`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'ColorSelect',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ ColorSelect, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/color-select/index.md b/packages/client/src/schema-component/antd/color-select/index.md
index a5d60247f..38becb2fa 100644
--- a/packages/client/src/schema-component/antd/color-select/index.md
+++ b/packages/client/src/schema-component/antd/color-select/index.md
@@ -6,3 +6,9 @@ group:
 ---
 
 # ColorSelect
+
+## Examples
+
+### ColorSelect usage
+
+<code src="./demos/demo1.tsx" />
diff --git a/packages/client/src/schema-component/antd/color-select/index.ts b/packages/client/src/schema-component/antd/color-select/index.ts
new file mode 100644
index 000000000..f2012066f
--- /dev/null
+++ b/packages/client/src/schema-component/antd/color-select/index.ts
@@ -0,0 +1 @@
+export * from './ColorSelect';
diff --git a/packages/client/src/schema-component/antd/index.tsx b/packages/client/src/schema-component/antd/index.tsx
index 1876229b7..7c8f30ea5 100644
--- a/packages/client/src/schema-component/antd/index.tsx
+++ b/packages/client/src/schema-component/antd/index.tsx
@@ -1,7 +1,8 @@
-export * from './checkbox';
 export * from './action';
+export * from './block-item';
+export * from './checkbox';
+export * from './color-select';
+export * from './dnd-context';
 export * from './form';
 export * from './form-item';
-export * from './block-item';
-export * from './dnd-context';
 export * from './grid';
diff --git a/packages/client/src/schema-component/hooks/index.ts b/packages/client/src/schema-component/hooks/index.ts
index 3c41670c4..e7ced022f 100644
--- a/packages/client/src/schema-component/hooks/index.ts
+++ b/packages/client/src/schema-component/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useAttach';
+export * from './useCompile';
 export * from './useDesignable';
 export * from './useFieldProps';
diff --git a/packages/client/src/schema-component/hooks/useCompile.ts b/packages/client/src/schema-component/hooks/useCompile.ts
new file mode 100644
index 000000000..4fbd7150b
--- /dev/null
+++ b/packages/client/src/schema-component/hooks/useCompile.ts
@@ -0,0 +1,9 @@
+import { compile } from '@formily/json-schema/lib/compiler';
+import { useTranslation } from 'react-i18next';
+
+export const useCompile = () => {
+  const { t } = useTranslation();
+  return (source: any) => {
+    return compile(source, { t });
+  };
+};