diff --git a/app/components/pub/my-ui/checkboxes/checkboxes.vue b/app/components/pub/my-ui/checkboxes/checkboxes.vue
new file mode 100644
index 00000000..0cd21392
--- /dev/null
+++ b/app/components/pub/my-ui/checkboxes/checkboxes.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Item } from './index'
+
+const props = defineProps<{
+  items: Item[]
+  useFlex?: boolean
+}>()
+
+const model = defineModel<string[]>()
+const checks: Record<string, any> = ref({})
+
+model.value = []
+props.items.forEach((item) => {
+  checks.value[item.value] = item.checked || false
+})
+
+watch(checks, () => {
+  const list: string[] = []
+  Object.keys(checks.value).forEach((key) => {
+    if (checks.value[key]) {
+      list.push(key)
+    }
+  })
+  model.value = list
+}, { deep: true })
+
+function check(value: string, status: boolean) {
+  checks.value[value] = status
+}
+</script>
+
+<template>
+  <div :class="useFlex ? 'flex gap-2' : ''">
+    <label v-for="item, idx in items" :key="item.value" class="flex pe-4">
+      <Checkbox @update:checked="(status) => check(item.value, status)" :checked="checks[item.value]" />
+      <div class="pt-0.5 ps-2">
+        {{ item.label }}
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/checkboxes/index.ts b/app/components/pub/my-ui/checkboxes/index.ts
new file mode 100644
index 00000000..100ae6ab
--- /dev/null
+++ b/app/components/pub/my-ui/checkboxes/index.ts
@@ -0,0 +1,14 @@
+export interface Item {
+  value: string
+  label: string
+  checked?: boolean
+}
+
+export function checkItems(items: Item[], value: string[]) {
+  items.forEach((item, idx) => {
+    items[idx]!.checked = value.includes(item.value)
+    // item.checked = value.includes(item.value)
+  })
+}
+
+export { default as Checkboxes } from './checkboxes.vue'