diff --git a/.changeset/light-toes-remember.md b/.changeset/light-toes-remember.md
new file mode 100644
index 00000000..2f658cab
--- /dev/null
+++ b/.changeset/light-toes-remember.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`,`SDropdown`): add loading state (`loading` prop)
diff --git a/.changeset/silver-countries-help.md b/.changeset/silver-countries-help.md
new file mode 100644
index 00000000..2737bc97
--- /dev/null
+++ b/.changeset/silver-countries-help.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`,`SDropdown`): add prop to select options type (`optionType` prop)
diff --git a/.changeset/stupid-experts-report.md b/.changeset/stupid-experts-report.md
new file mode 100644
index 00000000..8f258213
--- /dev/null
+++ b/.changeset/stupid-experts-report.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): add ellipsis on select text overflow
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 4b3f80fb..23bc0c0c 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -537,21 +537,25 @@ shortcuts: DatePickerOptions;
 export const SDropdown: DefineComponent<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>>>, {}>;
 
 // @public (undocumented)
@@ -567,6 +571,8 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     readonly isMenuOpened: boolean;
     // (undocumented)
     readonly label: string | null;
+    // (undocumented)
+    readonly loading: boolean;
     menuToggle: (value?: boolean) => void;
     // (undocumented)
     readonly multiple: boolean;
@@ -607,8 +613,9 @@ export interface SelectOptionGroup<T = any> {
 
 // @public (undocumented)
 export const SelectOptionType: {
-    readonly RadioOrCheckbox: "rad-or-check";
-    readonly Check: "check";
+    readonly Radio: "radio";
+    readonly Checkbox: "checkbox";
+    readonly Default: "default";
 };
 
 // @public (undocumented)
@@ -1061,19 +1068,23 @@ radioSelector: string;
 export const SSelect: DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
+optionType?: SelectOptionType | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 }>>>, {}>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1090,6 +1101,7 @@ label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
@@ -1100,6 +1112,8 @@ disabled: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 label: null;
+loading: boolean;
+sameWidthPopper: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: any) => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_9<__VLS_TypePropsToRuntimeProps_11<{
@@ -1112,6 +1126,7 @@ label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
@@ -1122,6 +1137,8 @@ disabled: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 label: null;
+loading: boolean;
+sameWidthPopper: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }, {
@@ -1129,10 +1146,12 @@ modelValue: any;
 multiple: boolean;
 size: SelectSize;
 disabled: boolean;
+loading: boolean;
 options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
 noAutoClose: boolean;
 syncMenuAndInputWidths: boolean;
+sameWidthPopper: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1164,13 +1183,11 @@ export const SSelectInput: DefineComponent<    {}, {}, {}, {}, {}, ComponentOpti
 // @public (undocumented)
 export const SSelectOption: DefineComponent<__VLS_TypePropsToRuntimeProps_13<{
 type: SelectOptionType;
-multiple?: boolean | undefined;
 selected?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: () => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_13<{
 type: SelectOptionType;
-multiple?: boolean | undefined;
 selected?: boolean | undefined;
 }>>> & {
 onToggle?: (() => any) | undefined;
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 07915bfe..6bd5caea 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -7,12 +7,14 @@ import SSelectDropdown from './SSelectDropdown.vue'
 const props = defineProps<{
   modelValue?: any
   options?: SelectOption[] | SelectOptionGroup[]
+  optionType?: SelectOptionType
   disabled?: boolean
   multiple?: boolean
   label?: string
   size?: SelectSize
   inline?: boolean
   noAutoClose?: boolean
+  loading?: boolean
 }>()
 
 const buttonType = computed(() => (props.inline ? SelectButtonType.Inline : SelectButtonType.Default))
@@ -43,7 +45,7 @@ function isThereLabelSlot() {
     </template>
 
     <template #dropdown>
-      <SSelectDropdown :item-type="SelectOptionType.Check" />
+      <SSelectDropdown :item-type="optionType ?? SelectOptionType.Default" />
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 806f3c4e..c57f4936 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -4,15 +4,19 @@ import SSelectBase from './SSelectBase.vue'
 import SSelectInput from './SSelectInput.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
-defineProps<{
+const props = defineProps<{
   modelValue?: any
   options?: SelectOption[] | SelectOptionGroup[]
+  optionType?: SelectOptionType
   disabled?: boolean
   multiple?: boolean
   label?: string
   size?: SelectSize
   noAutoClose?: boolean
+  loading?: boolean
 }>()
+
+const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Checkbox : SelectOptionType.Radio))
 </script>
 
 <template>
@@ -34,7 +38,7 @@ defineProps<{
     </template>
 
     <template #dropdown>
-      <SSelectDropdown :item-type="SelectOptionType.RadioOrCheckbox" />
+      <SSelectDropdown :item-type="optionType ?? defaultOptionType" />
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 54e514df..367a539d 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -42,6 +42,11 @@ const props = withDefaults(
      */
     noAutoClose?: boolean
 
+    /**
+     * Enables loading state.
+     */
+    loading?: boolean
+
     /**
      * Makes popper same width as trigger.
      */
@@ -56,13 +61,15 @@ const props = withDefaults(
     syncMenuAndInputWidths: false,
     noAutoClose: false,
     label: null,
+    loading: false,
+    sameWidthPopper: false,
   },
 )
 
 const emit = defineEmits<(event: 'update:modelValue', value: any) => void>()
 
 const model = useVModel(props, 'modelValue', emit)
-const { multiple, disabled, options, size, label, noAutoClose } = toRefs(props)
+const { multiple, disabled, loading, options, size, label, noAutoClose } = toRefs(props)
 
 const modeling = useSelectModel({
   model,
@@ -82,6 +89,7 @@ const api: SelectApi<any> = reactive({
   multiple,
   options,
   disabled,
+  loading,
   label,
   isMenuOpened: showPopper,
   menuToggle: togglePopper,
diff --git a/packages/ui/src/components/Select/SSelectButton.vue b/packages/ui/src/components/Select/SSelectButton.vue
index 35754b82..9da1067c 100644
--- a/packages/ui/src/components/Select/SSelectButton.vue
+++ b/packages/ui/src/components/Select/SSelectButton.vue
@@ -52,7 +52,7 @@ const slots = useSlots()
       typography(),
       {
         's-select-btn_empty': !api.isSomethingSelected,
-        's-select-btn_disabled': api.disabled,
+        's-select-btn_disabled': api.disabled || api.loading,
       },
     ]"
     @click="toggle"
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 89d29e26..0bc281ac 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -4,6 +4,7 @@ import { SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectOption from './SSelectOption.vue'
 import { ComputedRef } from 'vue'
 import { isSelectOptions } from '@/components/Select/utils'
+import SSpinner from '@/components/Spinner/SSpinner.vue'
 
 defineProps<{
   itemType: SelectOptionType
@@ -47,40 +48,49 @@ const ACTION_FONT = {
     class="s-select-dropdown"
     :class="`s-select-dropdown_size_${api.size}`"
   >
-    <template
-      v-for="(optionGroup, i) in optionGroups"
-      :key="i"
+    <div
+      v-if="api.loading"
+      class="s-select-dropdown__loading flex items-center justify-center"
     >
-      <div
-        v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
-        class="s-select-dropdown__header flex items-center justify-between"
+      <SSpinner />
+    </div>
+
+    <template v-else>
+      <template
+        v-for="(optionGroup, i) in optionGroups"
+        :key="i"
       >
         <div
-          v-if="optionGroup.header"
-          :class="HEADER_FONT[api.size]"
+          v-if="isActionButtonShown(!!optionGroup.selectAllBtn) || optionGroup.header"
+          class="s-select-dropdown__header flex items-center justify-between"
         >
-          {{ optionGroup.header }}
+          <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>
-        <button
-          v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
-          class="s-select-dropdown__action cursor-pointer ml-auto"
-          :class="ACTION_FONT[api.size]"
-          @click="api.toggleGroupSelection(optionGroup)"
+        <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)"
         >
-          {{ 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>
+          {{ opt.label }}
+        </SSelectOption>
+      </template>
     </template>
   </div>
 </template>
@@ -102,17 +112,25 @@ const ACTION_FONT = {
     color: theme.token-as-var('sys.color.status.info');
   }
 
-  @mixin select-dropdown-size($name, $header-height, $px) {
+  @mixin select-dropdown-size($name, $header-height, $px, $loading-height, $spinner-size) {
     &_size_#{$name} &__header {
       height: $header-height;
       padding-right: $px;
       padding-left: $px;
     }
+
+    &_size_#{$name} &__loading {
+      height: $loading-height;
+
+      // spinner styles
+      font-size: $spinner-size;
+      color: theme.token-as-var('sys.color.content-tertiary');
+    }
   }
 
-  @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);
+  @include select-dropdown-size('xl', $header-height: 56px, $px: 16px, $loading-height: 170px, $spinner-size: 40px);
+  @include select-dropdown-size('lg', $header-height: 40px, $px: 16px, $loading-height: 150px, $spinner-size: 40px);
+  @include select-dropdown-size('md', $header-height: 32px, $px: 10px, $loading-height: 120px, $spinner-size: 24px);
+  @include select-dropdown-size('sm', $header-height: 24px, $px: 8px, $loading-height: 100px, $spinner-size: 24px);
 }
 </style>
diff --git a/packages/ui/src/components/Select/SSelectInput.vue b/packages/ui/src/components/Select/SSelectInput.vue
index 02c8aa30..d78a4097 100644
--- a/packages/ui/src/components/Select/SSelectInput.vue
+++ b/packages/ui/src/components/Select/SSelectInput.vue
@@ -40,7 +40,7 @@ const FSelection = () =>
     ? h(
         'span',
         {
-          class: typographySelection(),
+          class: ['overflow-hidden', 'overflow-ellipsis', typographySelection()],
         },
         selectionsJoined.value,
       )
@@ -54,20 +54,20 @@ const FSelection = () =>
       `s-select-input_size_${api.size}`,
       {
         's-select-input_empty': !api.isSomethingSelected,
-        's-select-input_disabled': api.disabled,
+        's-select-input_disabled': api.disabled || api.loading,
       },
     ]"
     @click="api.menuToggle()"
   >
     <template v-if="isColumnLayout">
-      <div class="flex flex-col flex-1">
+      <div class="flex flex-col flex-1 truncate">
         <FLabel />
         <FSelection />
       </div>
     </template>
 
     <template v-else>
-      <div class="flex items-center flex-1">
+      <div class="flex items-center flex-1 truncate">
         <FLabel /> <FSelection />
       </div>
     </template>
diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index d613bc0e..33bcde80 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectOptionType } from './types'
+import { SelectOptionType, SelectSize } from './types'
 import IconCheckMark from '~icons/mdi/check'
 import { useSelectApi } from './api'
 import { SCheckboxAtom } from '../Checkbox'
@@ -7,14 +7,26 @@ import { SRadioAtom } from '../Radio'
 
 const props = defineProps<{
   type: SelectOptionType
-  multiple?: boolean
   selected?: boolean
 }>()
 
 const api = useSelectApi()
-const isCheckMode = computed(() => props.type === SelectOptionType.Check)
 
 const emit = defineEmits<(event: 'toggle') => void>()
+
+const RADIO_CHECKBOX_SIZE = {
+  [SelectSize.Xl]: 'xl',
+  [SelectSize.Lg]: 'lg',
+  [SelectSize.Md]: 'lg',
+  [SelectSize.Sm]: 'md',
+} as const
+
+const CHECK_ICON_SIZE = {
+  [SelectSize.Xl]: 24,
+  [SelectSize.Lg]: 16,
+  [SelectSize.Md]: 16,
+  [SelectSize.Sm]: 16,
+} as const
 </script>
 
 <template>
@@ -28,30 +40,29 @@ const emit = defineEmits<(event: 'toggle') => void>()
     ]"
     @click="emit('toggle')"
   >
-    <template v-if="!isCheckMode">
-      <template v-if="multiple">
-        <SCheckboxAtom
-          :checked="selected"
-          size="lg"
-        />
-      </template>
-      <template v-else>
-        <SRadioAtom
-          :checked="selected"
-          size="lg"
-        />
-      </template>
+    <template v-if="type === SelectOptionType.Checkbox">
+      <SCheckboxAtom
+        :checked="selected"
+        :size="RADIO_CHECKBOX_SIZE[api.size]"
+      />
     </template>
+    <template v-if="type === SelectOptionType.Radio">
+      <SRadioAtom
+        :checked="selected"
+        :size="RADIO_CHECKBOX_SIZE[api.size]"
+      />
+    </template>
+
     <div class="s-select-option__content">
       <slot />
     </div>
 
-    <template v-if="isCheckMode">
-      <div class="s-select-option__right-check-wrapper">
-        <template v-if="selected">
-          <IconCheckMark />
-        </template>
-      </div>
+    <template v-if="type === SelectOptionType.Default">
+      <IconCheckMark
+        v-if="selected"
+        :width="CHECK_ICON_SIZE[api.size]"
+        :height="CHECK_ICON_SIZE[api.size]"
+      />
     </template>
   </div>
 </template>
@@ -74,25 +85,10 @@ const emit = defineEmits<(event: 'toggle') => void>()
     @apply flex-1;
   }
 
-  &__right-check-wrapper {
-    @apply w-6 h-6 flex items-center justify-center;
-  }
-
   $root: &;
 
   &_size {
     @include sizes-mixin.s-select-sizes;
-
-    @mixin check-size($size, $px: 16px) {
-      &_#{$size} #{$root}__right-check-wrapper {
-        font-size: $px;
-      }
-    }
-
-    @include check-size('sm');
-    @include check-size('md');
-    @include check-size('lg');
-    @include check-size('xl', 24px);
   }
 }
 </style>
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index 3f2ef722..fd3e46bb 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -7,6 +7,7 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
   readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>
   readonly multiple: boolean
   readonly disabled: boolean
+  readonly loading: boolean
   readonly label: string | null
   readonly size: SelectSize
   readonly noAutoClose: boolean
diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts
index 7f1a2b26..9bfd6d0c 100644
--- a/packages/ui/src/components/Select/types.ts
+++ b/packages/ui/src/components/Select/types.ts
@@ -17,8 +17,9 @@ export const SelectButtonType = {
 export type SelectButtonType = typeof SelectButtonType[keyof typeof SelectButtonType]
 
 export const SelectOptionType = {
-  RadioOrCheckbox: 'rad-or-check',
-  Check: 'check',
+  Radio: 'radio',
+  Checkbox: 'checkbox',
+  Default: 'default',
 } as const
 
 export type SelectOptionType = typeof SelectOptionType[keyof typeof SelectOptionType]
diff --git a/packages/ui/stories/SSelect.stories.ts b/packages/ui/stories/SSelect.stories.ts
index 0c189cc2..e1fa02dc 100644
--- a/packages/ui/stories/SSelect.stories.ts
+++ b/packages/ui/stories/SSelect.stories.ts
@@ -1,14 +1,45 @@
-import { SSelect, SDropdown, SelectOption, SSelectBase, SSelectButton, useSelectApi } from '@/lib'
+import {
+  SSelect,
+  SDropdown,
+  SSelectBase,
+  SSelectButton,
+  useSelectApi,
+  SelectOption,
+  SelectOptionGroup,
+  SelectOptionType,
+} from '@/lib'
 import { defineMeta, defineStory } from './util'
 import { ref } from 'vue'
 
-const sizeArg = {
-  options: ['sm', 'md', 'lg', 'xl'],
-  control: 'inline-radio',
+const commonArgTypes = {
+  size: {
+    options: ['sm', 'md', 'lg', 'xl'],
+    control: 'inline-radio',
+  },
+  optionType: {
+    options: Object.values(SelectOptionType),
+    control: 'inline-radio',
+  },
+  disabled: { control: 'boolean' },
+  loading: { control: 'boolean' },
+}
+const commonArgs = {
+  size: 'md',
+  disabled: false,
+  loading: false,
 }
 
 export default defineMeta({
   title: 'Example/Select',
+  decorators: [
+    () => ({
+      template: `
+        <div class="grid grid-cols-2 gap-4 w-1/2">
+          <story />
+        </div>
+      `,
+    }),
+  ],
 })
 
 const OPTIONS: SelectOption[] = [
@@ -20,11 +51,45 @@ const OPTIONS: SelectOption[] = [
     label: 'England',
     value: 'en',
   },
+  {
+    label: 'Iceland',
+    value: 'is',
+  },
   {
     label: 'Japan',
     value: 'jp',
   },
 ]
+const OPTION_GROUPS: SelectOptionGroup[] = [
+  {
+    header: '1 group',
+    selectAllBtn: true,
+    items: [
+      {
+        label: 'Germany',
+        value: 'du',
+      },
+      {
+        label: 'England',
+        value: 'en',
+      },
+    ],
+  },
+  {
+    header: '2 group',
+    selectAllBtn: true,
+    items: [
+      {
+        label: 'Iceland',
+        value: 'is',
+      },
+      {
+        label: 'Japan',
+        value: 'jp',
+      },
+    ],
+  },
+]
 
 export const SelectSingle = defineStory((args) => ({
   components: {
@@ -33,6 +98,7 @@ export const SelectSingle = defineStory((args) => ({
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(null),
       args,
     }
@@ -43,22 +109,31 @@ export const SelectSingle = defineStory((args) => ({
       label="Single select"
       :options="OPTIONS"
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SSelect
+      v-model="model"
+      label="Single select"
+      :options="OPTION_GROUPS"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-SelectSingle.argTypes = {
-  size: sizeArg,
-}
-SelectSingle.args = {
-  size: 'md',
-}
+SelectSingle.argTypes = commonArgTypes
+SelectSingle.args = commonArgs
 
 export const SelectMultiple = defineStory((args) => ({
   components: { SSelect },
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(['en', 'jp']),
       args,
     }
@@ -70,22 +145,32 @@ export const SelectMultiple = defineStory((args) => ({
       :options="OPTIONS"
       multiple
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SSelect
+      v-model="model"
+      label="Multi select"
+      :options="OPTION_GROUPS"
+      multiple
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-SelectMultiple.argTypes = {
-  size: sizeArg,
-}
-SelectMultiple.args = {
-  size: 'md',
-}
+SelectMultiple.argTypes = commonArgTypes
+SelectMultiple.args = commonArgs
 
 export const Dropdown = defineStory((args) => ({
   components: { SDropdown },
   setup() {
     return {
       OPTIONS,
+      OPTION_GROUPS,
       model: ref(['en', 'jp']),
       args,
     }
@@ -97,16 +182,25 @@ export const Dropdown = defineStory((args) => ({
       :options="OPTIONS"
       multiple
       :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+    />
+    <SDropdown
+      v-model="model"
+      label="Country"
+      :options="OPTION_GROUPS"
+      multiple
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
     />
   `,
 }))
 
-Dropdown.argTypes = {
-  size: sizeArg,
-}
-Dropdown.args = {
-  size: 'md',
-}
+Dropdown.argTypes = commonArgTypes
+Dropdown.args = commonArgs
 
 export const Custom = defineStory(() => ({
   components: {