diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index ac72b99ec..b438c6424 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @soramitsu-ui/ui
 
+## 0.13.13
+
+### Patch Changes
+
+- b5029a5b: **feat**(`SSelectDropdown`): add mandatory prop
+
+## 0.13.12
+
+### Patch Changes
+
+- 0a615d5c: **feat**(`STextField`): add validations list prop
+
+## 0.13.11
+
+### Patch Changes
+
+- 8d0d2d66: **fix**(`SDropdown`): add expression to display dropdown options correctly
+
 ## 0.13.10
 
 ### Patch Changes
diff --git a/packages/ui/cypress/component/STextField.spec.cy.ts b/packages/ui/cypress/component/STextField.spec.cy.ts
index 08bfff226..f686cfe2f 100644
--- a/packages/ui/cypress/component/STextField.spec.cy.ts
+++ b/packages/ui/cypress/component/STextField.spec.cy.ts
@@ -347,3 +347,67 @@ describe('Passing extra attributes', () => {
     findInput().should('have.attr', 'data-count', 1)
   })
 })
+
+it('Validations list works', () => {
+  cy.mount({
+    setup() {
+      const model = ref('')
+
+      // since we don't change model value by using type() method we have to edit it manually
+      // because message slot relies on model.value correctness otherwise it's always empty
+      setTimeout(() => {
+        // matches some rules
+        model.value = 'a1'
+      }, 1000)
+
+      setTimeout(() => {
+        // matches every rule
+        model.value = 'a1!'
+      }, 2000)
+
+      function validations(value: string) {
+        return [
+          {
+            rule: /[a-z]/.test(value),
+            message: 'At least 1 lowercase letter',
+          },
+          {
+            rule: /\d/.test(value),
+            message: 'At least 1 digit',
+          },
+          {
+            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+            message: 'At least 1 special character',
+          },
+        ]
+      }
+
+      const validationsList = computed(() => {
+        return {
+          title: 'String must contain:',
+          validations: validations(model.value).map((v) => ({ isMatching: v.rule, ...v })),
+          showOnFocusOnly: true,
+        }
+      })
+
+      return {
+        validationsList,
+        model,
+      }
+    },
+    template: `<STextField :model-value="model" :validations-list="validationsList" no-model-value-strict-sync/>`,
+  })
+
+  findMsg().should('not.exist')
+  findInput().focus()
+  findMsg().should('exist')
+  // first timeout
+  findInput().should('have.value', 'a1')
+  findInput().blur()
+  findMsg().should('not.exist')
+  findInput().focus()
+  findMsg().should('exist')
+  // second timeout
+  findInput().should('have.value', 'a1!')
+  findMsg().should('not.exist')
+})
diff --git a/packages/ui/cypress/component/Select.spec.cy.ts b/packages/ui/cypress/component/Select.spec.cy.ts
index 25af419c9..7eba67a60 100644
--- a/packages/ui/cypress/component/Select.spec.cy.ts
+++ b/packages/ui/cypress/component/Select.spec.cy.ts
@@ -244,6 +244,127 @@ it('SSelect - clicking options, checking auto-transformations', () => {
   assertValue('2')
 })
 
+it('SSelect simple options mandatory mode works', () => {
+  cy.mount({
+    setup() {
+      const model = ref(null)
+
+      const options = [
+        { label: 'Opt 1', value: 1 },
+        { label: 'Opt 2', value: 2 },
+        { label: 'Opt 3', value: 3 },
+      ]
+
+      const [multiple, toggleMultiple] = useToggle(false)
+
+      return { model, options, multiple, toggleMultiple }
+    },
+    template: `
+      <div>Value: {{ model }}</div>
+      <button @click="toggleMultiple()">multiple : {{multiple}}</button>
+      <SSelect
+        v-model="model"
+        v-bind="{ options, multiple }"
+        label="Dap"
+        mandatory
+      />
+    `,
+  })
+
+  function assertValue(val: string) {
+    cy.contains(`Value: ${val}`)
+  }
+
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('1')
+
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('1')
+
+  cy.get('button').contains('multiple').click()
+  cy.contains('Dap').click()
+  cy.get('.s-select-option__content').eq(1).click()
+  assertValue('[ 1, 2 ]')
+
+  cy.get('.s-select-option__content').eq(1).click()
+  cy.get('.s-select-option__content').eq(0).click()
+  assertValue('[ 1 ]')
+})
+
+it('SSelect group options mandatory mode works', () => {
+  cy.mount({
+    setup() {
+      const model = ref(null)
+
+      const options = [
+        {
+          header: '1st group',
+          selectAllBtn: true,
+          items: [
+            {
+              label: 'Germany',
+              value: 'du',
+            },
+            {
+              label: 'England',
+              value: 'en',
+            },
+            {
+              label: 'United Arab Emirates',
+              value: 'ae',
+            },
+          ],
+        },
+        {
+          header: '2nd group',
+          selectAllBtn: false,
+          items: [
+            {
+              label: 'Iceland',
+              value: 'is',
+            },
+            {
+              label: 'Japan',
+              value: 'jp',
+            },
+          ],
+        },
+      ]
+
+      return { model, options }
+    },
+    template: `
+      <div>Value: {{ model }}</div>
+      <SSelect
+        v-model="model"
+        v-bind="{ options }"
+        label="Dap"
+        mandatory
+        multiple
+      />
+    `,
+  })
+
+  function assertValue(val: string) {
+    cy.contains(`Value: ${val}`)
+  }
+
+  cy.contains('Dap').click()
+
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "du", "en", "ae" ]`)
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "du", "en", "ae" ]`)
+  cy.get('.s-select-option__content').eq(3).click()
+  assertValue(`[ "du", "en", "ae", "is" ]`)
+  cy.get('.s-select-dropdown__action').click()
+  assertValue(`[ "is" ]`)
+  cy.get('.s-select-option__content').eq(3).click()
+  assertValue(`[ "is" ]`)
+})
+
 it('SDropdown - model usage works', () => {
   cy.mount({
     setup() {
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 6f65b65b3..5caef6ada 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -33,6 +33,7 @@ import type { TableColumnRowSelectableFunc as TableColumnRowSelectableFunc_2 } f
 import type { TableColumnSortBy as TableColumnSortBy_2 } from '@/components/Table/types';
 import type { TableColumnSortOrder as TableColumnSortOrder_2 } from '@/components/Table/types';
 import { UnwrapRef } from 'vue';
+import type { ValidationsList } from '@/components/TextField/types';
 import { VNodeProps } from 'vue';
 
 // @public (undocumented)
@@ -647,6 +648,7 @@ loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -661,12 +663,14 @@ loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>>>, {}, {}>, {
     label?(_: {
         options: UnwrapRef<SelectOption<any>[] | SelectOptionGroup<any>[]>;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -702,6 +706,8 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     readonly label: string | null;
     // (undocumented)
     readonly loading: boolean;
+    // (undocumented)
+    readonly mandatory: boolean;
     menuToggle: (value?: boolean) => void;
     // (undocumented)
     readonly multiple: boolean;
@@ -1283,6 +1289,7 @@ triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -1297,12 +1304,14 @@ triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
 remoteSearch?: boolean | undefined;
 maxShownOptions?: string | number | undefined;
+mandatory?: boolean | undefined;
 }>>>, {}, {}>, {
     label?(_: {
         options: UnwrapRef<SelectOption<any>[] | SelectOptionGroup<any>[]>;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -1357,6 +1366,7 @@ sameWidthPopper: boolean;
 triggerSearch: boolean;
 dropdownSearch: boolean;
 remoteSearch: boolean;
+mandatory: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: any) => void;
 search: (value: string) => void;
@@ -1389,6 +1399,7 @@ sameWidthPopper: boolean;
 triggerSearch: boolean;
 dropdownSearch: boolean;
 remoteSearch: boolean;
+mandatory: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 onSearch?: ((value: string) => any) | undefined;
@@ -1400,6 +1411,7 @@ size: SelectSize;
 disabled: boolean;
 loading: boolean;
 options: SelectOption<any>[] | SelectOptionGroup<any>[];
+mandatory: boolean;
 syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
 sameWidthPopper: boolean;
@@ -1436,6 +1448,7 @@ type: SelectButtonType;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
@@ -1481,6 +1494,7 @@ search: boolean;
         multiple: boolean;
         disabled: boolean;
         loading: boolean;
+        mandatory: boolean;
         label: string | null;
         size: SelectSize;
         noAutoClose: boolean;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 67b3385ac..aad6bdac6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu-ui/ui",
-  "version": "0.13.10",
+  "version": "0.13.13",
   "main": "dist/lib.cjs",
   "module": "dist/lib.mjs",
   "types": "dist/lib.d.ts",
diff --git a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
index af091cd41..86d44d0b1 100644
--- a/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
+++ b/packages/ui/src/components/Popover/SPopoverWrappedTransition.vue
@@ -1,14 +1,10 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <script setup lang="ts">
 import { mergeProps } from 'vue'
 import { useWrappedTransitionVisibility } from './util'
 import { usePopoverApi } from './api'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps({
   eager: Boolean,
   wrapperAttrs: {
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 9110b1da0..2d25ec45b 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
   dropdownSearch?: boolean
   remoteSearch?: boolean
   maxShownOptions?: string | number | undefined
+  mandatory?: boolean
 }>()
 
 const buttonType = computed(() => (props.inline ? SelectButtonType.Inline : SelectButtonType.Default))
@@ -33,7 +34,7 @@ function isThereLabelSlot() {
 <template>
   <SSelectBase
     v-bind="{ ...$attrs, ...$props } as any"
-    same-width-popper
+    :same-width-popper="loading"
   >
     <template #control>
       <SSelectButton
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index ed65b1548..77110e213 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
   dropdownSearch?: boolean
   remoteSearch?: boolean
   maxShownOptions?: string | number | undefined
+  mandatory?: boolean
 }>()
 
 const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Checkbox : SelectOptionType.Radio))
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index 19f96f7dd..acec8b9b3 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -23,10 +23,9 @@ const props = withDefaults(
     label?: string | null
 
     /**
-     * TODO
-     *
      * - Doesn't allow to unselect value in single mode
      * - Doesn't allow to unselect last the only one picked value in multiple mode
+     * TODO
      * - Picks some value automatically (the first one) if `modelValue` is null and there are some available options
      */
     mandatory?: boolean
@@ -83,6 +82,7 @@ const props = withDefaults(
     triggerSearch: false,
     dropdownSearch: false,
     remoteSearch: false,
+    mandatory: false,
   },
 )
 
@@ -92,7 +92,7 @@ const emit = defineEmits<{
 }>()
 
 const model = useVModel(props, 'modelValue', emit)
-const { multiple, disabled, loading, options, size, label, noAutoClose, remoteSearch } = toRefs(props)
+const { multiple, disabled, loading, options, size, label, noAutoClose, remoteSearch, mandatory } = toRefs(props)
 
 const modeling = useSelectModel({
   model,
@@ -101,6 +101,7 @@ const modeling = useSelectModel({
   storeSelectedOptions: remoteSearch,
   singleModeAutoClose: not(noAutoClose),
   onAutoClose: () => togglePopper(false),
+  mandatory,
 })
 
 const [showPopper, togglePopper] = useToggle(false)
@@ -125,6 +126,7 @@ const api: SelectApi<any> = reactive({
   options,
   disabled,
   loading,
+  mandatory,
   label,
   isMenuOpened: showPopper,
   menuToggle: togglePopper,
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index 5c139e8aa..c34e2b826 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -8,6 +8,7 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
   readonly multiple: boolean
   readonly disabled: boolean
   readonly loading: boolean
+  readonly mandatory: boolean
   readonly label: string | null
   readonly size: SelectSize
   readonly noAutoClose: boolean
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index 1d1941ae6..a1c5c4ee6 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -42,6 +42,7 @@ export interface UseSelectModelParams<T> {
    * Should be used to actually perform menu closing
    */
   onAutoClose: () => void
+  mandatory?: Ref<boolean>
 }
 
 export function useSelectModel<T = any>({
@@ -51,6 +52,7 @@ export function useSelectModel<T = any>({
   singleModeAutoClose,
   onAutoClose,
   storeSelectedOptions,
+  mandatory,
 }: UseSelectModelParams<T>): UseSelectModelReturn<T> {
   const triggerAutoClose = () => singleModeAutoClose.value && onAutoClose()
 
@@ -177,13 +179,25 @@ export function useSelectModel<T = any>({
   }
 
   function toggleSelection(value: T): void {
-    isValueSelected(value) ? unselect(value) : select(value)
+    if (!isValueSelected(value)) {
+      select(value)
+    } else {
+      if (
+        mandatory?.value &&
+        ((Array.isArray(model.value) && model.value.length === 1) || (model.value && !multiple.value))
+      )
+        return
+
+      unselect(value)
+    }
   }
 
   function toggleGroupSelection(optionGroup: SelectOptionGroup<T>): void {
     const optionGroupValues = optionGroup.items.map((x) => x.value)
 
     if (isGroupSelected(optionGroup)) {
+      if (mandatory?.value && Array.isArray(model.value) && model.value.length === optionGroup.items.length) return
+
       const optionGroupSet = new Set(optionGroupValues)
       const newModel = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
       modelChangedManually = true
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index 5773eaeb9..b76ee814d 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -1,8 +1,7 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-
+<script setup lang="ts">
+import type { ValidationsList } from '@/components/TextField/types'
+import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff, IconStatusSuccess16 } from '../icons'
+import { computed } from 'vue'
 import type { StyleValue } from 'vue'
 import { Status } from '@/types'
 import type { MaybeElementRef } from '@vueuse/core'
@@ -106,11 +105,13 @@ interface Props {
    * Manually activates filled state
    */
   filledState?: boolean
+  /**
+   * Display the list of rules
+   */
+  validationsList?: ValidationsList
 }
-</script>
 
-<script setup lang="ts">
-import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons'
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props>(), {
   multiline: false,
@@ -136,6 +137,7 @@ const status = computed<null | TextFieldStatus>(() => {
   if (props.success) return Status.Success
   if (props.warning) return Status.Warning
   if (props.error) return Status.Error
+
   return null
 })
 
@@ -179,7 +181,7 @@ function handleInputWrapperMouseDown(event: MouseEvent) {
 // MESSAGE
 
 const isMessageSlotDefined = () => !!slots.message
-const shouldRenderMessage = () => !!props.message || isMessageSlotDefined()
+const shouldRenderMessage = () => !!props.message || isMessageSlotDefined() || shouldShowValidationsList.value
 const messageIcon = computed(() => {
   if (status.value === null) return null
   return STATUS_ICONS_MAP_16[status.value]
@@ -237,6 +239,27 @@ const [forceRevealPassword, toggleForceReveal] = useToggle()
 const inputType = computed(() =>
   props.password && (!showEye.value || !forceRevealPassword.value) ? 'password' : 'text',
 )
+
+const isTouched = ref(false)
+
+function handleFocus() {
+  isFocused.value = true
+  isTouched.value = true
+}
+
+const isMatchingValidationsList = computed(() => {
+  if (!props.validationsList) return false
+
+  return props.validationsList.validations.every((v) => v.isMatching)
+})
+
+const shouldShowValidationsList = computed(
+  () =>
+    props.validationsList &&
+    (!props.validationsList.showOnFocusOnly || isFocused.value) &&
+    isTouched.value &&
+    !isMatchingValidationsList.value,
+)
 </script>
 
 <template>
@@ -279,7 +302,7 @@ const inputType = computed(() =>
           :disabled="disabled"
           v-bind="inputAttrs()"
           @input="onInput"
-          @focus="isFocused = true"
+          @focus="handleFocus"
           @blur="isFocused = false"
         >
       </div>
@@ -320,11 +343,37 @@ const inputType = computed(() =>
       >
         <component
           :is="messageIcon"
-          v-if="messageIcon"
+          v-if="messageIcon && !props.validationsList"
           class="s-text-field__message-icon"
         />
 
-        <span>
+        <div v-if="props.validationsList">
+          <span>{{ props.validationsList.title }}</span>
+
+          <div
+            v-for="item in props.validationsList.validations"
+            :key="item.message"
+          >
+            <div class="flex gap-4px">
+              <IconStatusSuccess16
+                v-if="item.isMatching"
+                class="flex self-center w-16px"
+              />
+              <div
+                v-else
+                class="w-16px"
+              >
+                -
+              </div>
+
+              <div :class="{ 's-text-field__message-requirement_matched': item.isMatching }">
+                {{ item.message }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <span v-else>
           <slot name="message">{{ message }}</slot>
         </span>
       </div>
@@ -465,6 +514,12 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
         opacity: 0;
       }
     }
+
+    &-requirement {
+      &_matched {
+        color: theme.token-as-var('sys.color.status.success');
+      }
+    }
   }
 
   &__eye {
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
new file mode 100644
index 000000000..e5adba335
--- /dev/null
+++ b/packages/ui/src/components/TextField/types.ts
@@ -0,0 +1,10 @@
+export interface ValidationResultEntity {
+  isMatching: boolean
+  message: string
+}
+
+export interface ValidationsList {
+  validations: ValidationResultEntity[]
+  title: string
+  showOnFocusOnly?: boolean
+}
diff --git a/packages/ui/src/components/Tooltip/STooltip.vue b/packages/ui/src/components/Tooltip/STooltip.vue
index c451b71d6..9e6b4dacb 100644
--- a/packages/ui/src/components/Tooltip/STooltip.vue
+++ b/packages/ui/src/components/Tooltip/STooltip.vue
@@ -1,14 +1,10 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <script setup lang="ts">
 import { SPopover, SPopoverWrappedTransition } from '@/components/Popover'
 import { SButton } from '@/components/Button'
 import type { BasePlacement } from '@popperjs/core'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     wrapperTag?: string | object
diff --git a/packages/ui/src/components/Transitions/SCollapseTransition.vue b/packages/ui/src/components/Transitions/SCollapseTransition.vue
index a1cc49ef5..642d21854 100644
--- a/packages/ui/src/components/Transitions/SCollapseTransition.vue
+++ b/packages/ui/src/components/Transitions/SCollapseTransition.vue
@@ -1,8 +1,6 @@
-<script lang="ts">
-export default { name: 'SCollapseTransition' }
-</script>
-
 <script setup lang="ts">
+defineOptions({ name: 'SCollapseTransition' })
+
 const props = withDefaults(
   defineProps<{
     duration?: string
diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts
index e2bbc2506..1ef090c73 100644
--- a/packages/ui/src/components/icons/index.ts
+++ b/packages/ui/src/components/icons/index.ts
@@ -46,6 +46,8 @@ import IconBasicSearch24 from '@soramitsu-ui/icons/icomoon/basic-search-24.svg'
 import IconBasicCirclePlus24 from '@soramitsu-ui/icons/icomoon/basic-circle-plus-24.svg'
 import IconBasicCircleX24 from '@soramitsu-ui/icons/icomoon/basic-circle-x-24.svg'
 import IconBasicEye24 from '@soramitsu-ui/icons/icomoon/basic-eye-24.svg'
+import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg'
+import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg'
 
 export {
   IconClose,
@@ -75,6 +77,8 @@ export {
   IconBasicCirclePlus24,
   IconBasicCircleX24,
   IconBasicEye24,
+  IconQuestion,
+  IconCopy,
 }
 
 export const STATUS_ICONS_MAP: { [K in Status]: Component } = {
diff --git a/packages/ui/stories/components/TextField.stories.ts b/packages/ui/stories/components/TextField.stories.ts
index 00b4d3476..cd6a9da97 100644
--- a/packages/ui/stories/components/TextField.stories.ts
+++ b/packages/ui/stories/components/TextField.stories.ts
@@ -1,19 +1,45 @@
 import { STextField, Status } from '@/lib'
-import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg'
-import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg'
+import { IconCopy, IconQuestion } from '@/components/icons'
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
   component: defineComponent({
     components: { STextField, IconCopy, IconQuestion },
-    props: ['modelValue', 'oneIcon', 'twoIcons'],
+    props: ['modelValue', 'oneIcon', 'twoIcons', 'isValidationsList'],
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const model = useVModel(props, 'modelValue', emit, { passive: true })
-      return { model }
+
+      function validations(value: string) {
+        return [
+          {
+            rule: /[a-z]/.test(value),
+            message: 'At least 1 lowercase letter',
+          },
+          {
+            rule: /\d/.test(value),
+            message: 'At least 1 digit',
+          },
+          {
+            rule: /[!"#$%&'()*+,./:;<=>?@[\]^_`{|}~\\-]/.test(value),
+            message: 'At least 1 special character',
+          },
+        ]
+      }
+      const validationsList = computed(() => {
+        if (!props.isValidationsList) return null
+
+        return {
+          validations: validations(model.value).map((v) => ({ isMatching: v.rule, ...v })),
+          title: 'String must contain:',
+          showOnFocusOnly: true,
+        }
+      })
+
+      return { model, validationsList }
     },
     template: `
-      <STextField v-model="model" v-bind="$attrs">
+      <STextField v-model="model" v-bind="$attrs" :validations-list="validationsList">
         <template #append v-if="twoIcons || oneIcon">
           <IconCopy/>
           <IconQuestion v-if="twoIcons" />
@@ -64,3 +90,8 @@ export const Default = {}
 
 export const OneIcon = { args: { oneIcon: true } } as Story
 export const TwoIcons = { args: { twoIcons: true } } as Story
+export const ValidationsList = {
+  args: {
+    isValidationsList: true,
+  },
+} as Story
diff --git a/packages/ui/stories/components/select/common.ts b/packages/ui/stories/components/select/common.ts
index 1920e9a09..ee193ceba 100644
--- a/packages/ui/stories/components/select/common.ts
+++ b/packages/ui/stories/components/select/common.ts
@@ -69,6 +69,7 @@ export const COMMON_ARGS = {
   noAutoClose: false,
   dropdownSearch: false,
   maxShownOptions: 0,
+  mandatory: false,
 }
 
 export const COMMON_ARG_TYPES = {