diff --git a/.changeset/four-readers-battle.md b/.changeset/four-readers-battle.md
new file mode 100644
index 00000000..40de637d
--- /dev/null
+++ b/.changeset/four-readers-battle.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`): add option groups with headers and select all buttons
diff --git a/.changeset/thin-mirrors-fly.md b/.changeset/thin-mirrors-fly.md
new file mode 100644
index 00000000..e81742b6
--- /dev/null
+++ b/.changeset/thin-mirrors-fly.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): make select options menu width same as trigger's one
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 92da7b2c..4b3f80fb 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -536,7 +536,7 @@ shortcuts: DatePickerOptions;
 // @public (undocumented)
 export const SDropdown: DefineComponent<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -545,7 +545,7 @@ inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -560,7 +560,7 @@ export const SELECT_API_KEY: InjectionKey<SelectApi<any>>;
 // Warning: (ae-forgotten-export) The symbol "UseSelectModelReturn" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelReturn<T>>> {
+export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     // (undocumented)
     readonly disabled: boolean;
     // (undocumented)
@@ -573,7 +573,7 @@ export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelRetur
     // (undocumented)
     readonly noAutoClose: boolean;
     // (undocumented)
-    readonly options: DeepReadonly<UnwrapRef<SelectOption<T>>[]>;
+    readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>;
     // (undocumented)
     readonly size: SelectSize;
 }
@@ -595,6 +595,16 @@ export interface SelectOption<T = any> {
     value: T;
 }
 
+// @public (undocumented)
+export interface SelectOptionGroup<T = any> {
+    // (undocumented)
+    header?: string;
+    // (undocumented)
+    items: SelectOption<T>[];
+    // (undocumented)
+    selectAllBtn?: boolean;
+}
+
 // @public (undocumented)
 export const SelectOptionType: {
     readonly RadioOrCheckbox: "rad-or-check";
@@ -903,6 +913,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: BooleanConstructor;
 }, () => (VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }> | null)[], unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:show" | "click-outside")[], "update:show" | "click-outside", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
@@ -933,6 +944,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: BooleanConstructor;
 }>> & {
 "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 "onClick-outside"?: ((...args: any[]) => any) | undefined;
@@ -944,6 +956,7 @@ skidding: string | number;
 distance: string | number;
 showDelay: string | number;
 hideDelay: string | number;
+sameWidth: boolean;
 }>;
 
 // @public (undocumented)
@@ -953,15 +966,24 @@ wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
 eager: BooleanConstructor;
 wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }>>, {
 eager: boolean;
 wrapperAttrs: Record<string, any>;
+innerWrapperAttrs: Record<string, any>;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -981,8 +1003,8 @@ lineHeight?: number | undefined;
 percent: number;
 lineHeight: number;
 }>>>, {
-percent: number;
 lineHeight: number;
+percent: number;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1038,7 +1060,7 @@ radioSelector: string;
 // @public (undocumented)
 export const SSelect: DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1046,7 +1068,7 @@ size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1062,12 +1084,13 @@ export const SSelectBase: DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsTo
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1083,12 +1106,13 @@ label: null;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1105,10 +1129,10 @@ modelValue: any;
 multiple: boolean;
 size: SelectSize;
 disabled: boolean;
-options: SelectOption[];
+options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
-syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
+syncMenuAndInputWidths: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1378,11 +1402,11 @@ onSelect?: ((args_0: TableRow[], args_1: TableRow) => any) | undefined;
 }, {
 data: TableRow[];
 height: string | number;
+maxHeight: string | number;
 defaultSort: {
 prop: string;
 order: TableColumnSortOrder;
 } | null;
-maxHeight: string | number;
 fit: boolean;
 showHeader: boolean;
 highlightCurrentRow: boolean;
@@ -1546,10 +1570,11 @@ default: boolean;
 }>>, {
 type: "default" | "details" | "selection" | "expand";
 width: string;
+minWidth: string;
 label: string;
 sortable: boolean | "custom";
+selectable: TableColumnRowSelectableFunc_2;
 prop: string;
-minWidth: string;
 sortMethod: <T>(a: T, b: T) => number;
 sortBy: TableColumnSortBy_2;
 sortOrders: TableColumnSortOrder_2[];
@@ -1559,7 +1584,6 @@ align: "left" | "right" | "center";
 headerAlign: "left" | "right" | "center" | null;
 className: string;
 labelClassName: string;
-selectable: TableColumnRowSelectableFunc_2;
 reserveSelection: boolean;
 }>;
 
@@ -1741,9 +1765,9 @@ secondaryButtonText: string;
 "onClick:secondary-button"?: ((...args: any[]) => any) | undefined;
 }, {
 placement: BasePlacement;
+content: string;
 header: string;
 wrapperTag: string | object;
-content: string;
 primaryButtonText: string;
 secondaryButtonText: string;
 }>;
diff --git a/packages/ui/src/components/Popover/SPopover.ts b/packages/ui/src/components/Popover/SPopover.ts
index a9ac05cf..652a397e 100644
--- a/packages/ui/src/components/Popover/SPopover.ts
+++ b/packages/ui/src/components/Popover/SPopover.ts
@@ -1,5 +1,5 @@
 import { Ref, cloneVNode, PropType } from 'vue'
-import { Placement, placements, Instance } from '@popperjs/core'
+import { Placement, placements, Instance, State } from '@popperjs/core'
 import { not, or } from '@vueuse/core'
 import { usePopper } from '@/composables/popper'
 import { PopoverApi, POPOVER_API_KEY } from './api'
@@ -129,6 +129,7 @@ export default /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: 0,
     },
+    sameWidth: Boolean,
   },
   emits: ['update:show', 'click-outside'],
   setup(props, { slots, emit }) {
@@ -162,6 +163,20 @@ export default /* @__PURE__ */ defineComponent({
             name: 'offset',
             options: { offset: computed(() => [skidding.value, distance.value]) },
           },
+          shallowReactive({
+            name: 'sameWidth',
+            enabled: props.sameWidth,
+            phase: 'beforeWrite' as const,
+            requires: ['computeStyles'],
+            fn: ({ state }: { state: State }) => {
+              state.styles.popper.width = `${state.rects.reference.width}px`
+            },
+            effect: ({ state }: { state: State }) => {
+              if (state.elements.reference instanceof HTMLElement) {
+                state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`
+              }
+            },
+          }),
         ],
       }),
     })
diff --git a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
index 5c7c71eb..af091cd4 100644
--- a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
+++ b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
@@ -15,6 +15,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  innerWrapperAttrs: {
+    type: Object,
+    default: null,
+  },
 })
 
 const api = usePopoverApi()
@@ -55,6 +59,7 @@ onScopeDispose(() => {
       <span
         v-if="contentIf"
         v-show="contentShow"
+        v-bind="innerWrapperAttrs"
       >
         <slot />
       </span>
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 1de48d9b..07915bfe 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectButtonType, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectButtonType, SelectOptionType, SelectSize, SelectOptionGroup } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectButton from './SSelectButton.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 const props = defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 3b9a6b18..806f3c4e 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectInput from './SSelectInput.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string
@@ -16,7 +16,10 @@ defineProps<{
 </script>
 
 <template>
-  <SSelectBase v-bind="{ ...$attrs, ...$props } as any">
+  <SSelectBase
+    v-bind="{ ...$attrs, ...$props } as any"
+    same-width-popper
+  >
     <template #control>
       <SSelectInput>
         <template #label="binding">
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 4fa652fc..54e514df 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectSize, SelectOption } from './types'
+import { SelectSize, SelectOption, SelectOptionGroup } from './types'
 import { useSelectModel } from './use-model'
 import { SelectApi, SELECT_API_KEY } from './api'
 import { and, not } from '@vueuse/core'
@@ -11,7 +11,7 @@ const props = withDefaults(
     multiple?: boolean
 
     modelValue?: any
-    options?: SelectOption[]
+    options?: SelectOption[] | SelectOptionGroup[]
 
     size?: SelectSize
 
@@ -41,6 +41,11 @@ const props = withDefaults(
      * Turn on this prop to disable auto-close.
      */
     noAutoClose?: boolean
+
+    /**
+     * Makes popper same width as trigger.
+     */
+    sameWidthPopper?: boolean
   }>(),
   {
     size: SelectSize.Md,
@@ -72,7 +77,7 @@ const [showPopper, togglePopper] = useToggle(false)
 // close popper if select is disabled
 whenever(and(disabled, showPopper), () => togglePopper(false), { immediate: true })
 
-const api = readonly({
+const api: SelectApi<any> = reactive({
   ...modeling,
   multiple,
   options,
@@ -82,7 +87,7 @@ const api = readonly({
   menuToggle: togglePopper,
   size,
   noAutoClose,
-}) as SelectApi<any>
+})
 
 provide(SELECT_API_KEY, api)
 </script>
@@ -91,6 +96,7 @@ provide(SELECT_API_KEY, api)
   <div>
     <SPopover
       v-model:show="showPopper"
+      :same-width="sameWidthPopper"
       placement="bottom-start"
       trigger="manual"
       distance="4"
@@ -107,6 +113,7 @@ provide(SELECT_API_KEY, api)
           name="s-select-dropdown-transition"
           eager
           :wrapper-attrs="{ 'class': 'z-10' }"
+          :inner-wrapper-attrs="{ 'class': { 'w-full': sameWidthPopper } }"
         >
           <slot name="dropdown" />
         </SPopoverWrappedTransition>
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 34527202..89d29e26 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useSelectApi } from './api'
-import { SelectOptionType, SelectSize } from './types'
+import { SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectOption from './SSelectOption.vue'
+import { ComputedRef } from 'vue'
+import { isSelectOptions } from '@/components/Select/utils'
 
 defineProps<{
   itemType: SelectOptionType
@@ -10,21 +12,76 @@ defineProps<{
 const api = useSelectApi()
 
 const fontClass = computed(() => (api.size === SelectSize.Xl ? 'sora-tpg-p3' : 'sora-tpg-p4'))
+
+const optionGroups: ComputedRef<SelectOptionGroup[]> = computed(() => {
+  const options = api.options
+
+  if (isSelectOptions(options)) {
+    return [{ items: options }]
+  }
+
+  return options
+})
+
+function isActionButtonShown(selectAllBtn: boolean) {
+  return api.multiple && selectAllBtn
+}
+
+const HEADER_FONT = {
+  [SelectSize.Xl]: 'sora-tpg-ch2',
+  [SelectSize.Lg]: 'sora-tpg-ch3',
+  [SelectSize.Md]: 'sora-tpg-ch3',
+  [SelectSize.Sm]: 'sora-tpg-ch3',
+} as const
+
+const ACTION_FONT = {
+  [SelectSize.Xl]: 'sora-tpg-p3',
+  [SelectSize.Lg]: 'sora-tpg-p4',
+  [SelectSize.Md]: 'sora-tpg-p4',
+  [SelectSize.Sm]: 'sora-tpg-p4',
+} as const
 </script>
 
 <template>
-  <div class="s-select-dropdown">
-    <SSelectOption
-      v-for="(opt, i) in api.options"
+  <div
+    class="s-select-dropdown"
+    :class="`s-select-dropdown_size_${api.size}`"
+  >
+    <template
+      v-for="(optionGroup, i) in optionGroups"
       :key="i"
-      :class="fontClass"
-      :type="itemType"
-      :multiple="api.multiple"
-      :selected="api.isValueSelected(opt.value)"
-      @toggle="api.toggleSelection(opt.value)"
     >
-      {{ opt.label }}
-    </SSelectOption>
+      <div
+        v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
+        class="s-select-dropdown__header flex items-center justify-between"
+      >
+        <div
+          v-if="optionGroup.header"
+          :class="HEADER_FONT[api.size]"
+        >
+          {{ optionGroup.header }}
+        </div>
+        <button
+          v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
+          class="s-select-dropdown__action cursor-pointer ml-auto"
+          :class="ACTION_FONT[api.size]"
+          @click="api.toggleGroupSelection(optionGroup)"
+        >
+          {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
+        </button>
+      </div>
+      <SSelectOption
+        v-for="(opt, j) in optionGroup.items"
+        :key="j"
+        :class="fontClass"
+        :type="itemType"
+        :multiple="api.multiple"
+        :selected="api.isValueSelected(opt.value)"
+        @toggle="api.toggleSelection(opt.value)"
+      >
+        {{ opt.label }}
+      </SSelectOption>
+    </template>
   </div>
 </template>
 
@@ -35,5 +92,27 @@ const fontClass = computed(() => (api.size === SelectSize.Xl ? 'sora-tpg-p3' : '
   @apply rounded overflow-hidden;
   background: theme.token-as-var('sys.color.util.surface');
   box-shadow: theme.token-as-var('sys.shadow.dropdown');
+
+  &__header {
+    color: theme.token-as-var('sys.color.content-tertiary');
+    border-bottom: 1px solid theme.token-as-var('sys.color.border-primary');
+  }
+
+  &__action {
+    color: theme.token-as-var('sys.color.status.info');
+  }
+
+  @mixin select-dropdown-size($name, $header-height, $px) {
+    &_size_#{$name} &__header {
+      height: $header-height;
+      padding-right: $px;
+      padding-left: $px;
+    }
+  }
+
+  @include select-dropdown-size('xl', $header-height: 56px, $px: 16px);
+  @include select-dropdown-size('lg', $header-height: 40px, $px: 16px);
+  @include select-dropdown-size('md', $header-height: 32px, $px: 10px);
+  @include select-dropdown-size('sm', $header-height: 24px, $px: 8px);
 }
 </style>
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index aa0721d7..3f2ef722 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -1,10 +1,10 @@
-import { InjectionKey, UnwrapRef, DeepReadonly } from 'vue'
-import { SelectOption, SelectSize } from './types'
+import { InjectionKey, UnwrapRef } from 'vue'
+import { SelectOption, SelectOptionGroup, SelectSize } from './types'
 import { UseSelectModelReturn } from './use-model'
 import { forceInject } from '@/util'
 
-export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelReturn<T>>> {
-  readonly options: DeepReadonly<UnwrapRef<SelectOption<T>>[]>
+export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
+  readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>
   readonly multiple: boolean
   readonly disabled: boolean
   readonly label: string | null
diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts
index 35d6271a..7f1a2b26 100644
--- a/packages/ui/src/components/Select/types.ts
+++ b/packages/ui/src/components/Select/types.ts
@@ -27,3 +27,9 @@ export interface SelectOption<T = any> {
   label: string
   value: T
 }
+
+export interface SelectOptionGroup<T = any> {
+  header?: string
+  selectAllBtn?: boolean
+  items: SelectOption<T>[]
+}
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index d18303e1..d8a54a49 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -1,12 +1,14 @@
 import { Ref } from 'vue'
-import { SelectOption } from './types'
+import { SelectOption, SelectOptionGroup } from './types'
 import { whenever, and, not } from '@vueuse/core'
+import { isSelectOptions } from '@/components/Select/utils'
 
 export interface UseSelectModelReturn<T> {
   /**
    * Toggle value's selection state. Works different in single/multiple modes.
    */
   toggleSelection: (value: T) => void
+  toggleGroupSelection: (optionsGroup: SelectOptionGroup<T>) => void
   select: (value: T) => void
   unselect: (value: T) => void
 
@@ -21,12 +23,13 @@ export interface UseSelectModelReturn<T> {
   selectedOptions: Ref<SelectOption<T>[]>
 
   isSomethingSelected: Ref<boolean>
+  isGroupSelected: (optionsGroup: SelectOptionGroup<T>) => boolean
 }
 
 export interface UseSelectModelParams<T> {
   multiple: Ref<boolean>
   model: Ref<null | T | T[]>
-  options: Ref<SelectOption<T>[]>
+  options: Ref<SelectOption<T>[] | SelectOptionGroup<T>[]>
 
   singleModeAutoClose: Ref<boolean>
   /**
@@ -59,6 +62,10 @@ export function useSelectModel<T = any>({
     return selectedSet.value.has(value)
   }
 
+  function isGroupSelected(optionGroup: SelectOptionGroup<T>) {
+    return optionGroup.items.every((x) => isValueSelected(x.value))
+  }
+
   function select(value: T): void {
     if (multiple.value) {
       model.value = [...new Set([...modelAsArray.value, value])]
@@ -81,7 +88,26 @@ export function useSelectModel<T = any>({
     isValueSelected(value) ? unselect(value) : select(value)
   }
 
-  const selectedOptions = computed<SelectOption[]>(() => options.value.filter((x) => isValueSelected(x.value)))
+  function toggleGroupSelection(optionGroup: SelectOptionGroup<T>): void {
+    if (isGroupSelected(optionGroup)) {
+      const optionGroupSet = new Set(optionGroup.items.map((x) => x.value))
+      model.value = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
+
+      return
+    }
+
+    model.value = [...new Set([...modelAsArray.value, ...optionGroup.items.map((x) => x.value)])]
+  }
+
+  const optionItems = computed(() => {
+    if (isSelectOptions(options.value)) {
+      return options.value
+    }
+
+    return options.value.flatMap((x) => x.items)
+  })
+
+  const selectedOptions = computed<SelectOption[]>(() => optionItems.value.filter((x) => isValueSelected(x.value)))
 
   const isSomethingSelected = computed<boolean>(() => !!selectedSet.value.size)
 
@@ -104,8 +130,10 @@ export function useSelectModel<T = any>({
     isValueSelected,
     selectedOptions,
     toggleSelection,
+    toggleGroupSelection,
     select,
     unselect,
     isSomethingSelected,
+    isGroupSelected,
   }
 }
diff --git a/packages/ui/src/components/Select/utils.ts b/packages/ui/src/components/Select/utils.ts
new file mode 100644
index 00000000..ea6592a8
--- /dev/null
+++ b/packages/ui/src/components/Select/utils.ts
@@ -0,0 +1,5 @@
+import { SelectOption, SelectOptionGroup } from '@/components'
+
+export function isSelectOptions(options: SelectOption[] | SelectOptionGroup[]): options is SelectOption[] {
+  return options.length === 0 || 'label' in options[0]
+}