diff --git a/components/src/stories/Select.stories.js b/components/src/stories/Select.stories.js
index 7fedaee9..61fce15f 100644
--- a/components/src/stories/Select.stories.js
+++ b/components/src/stories/Select.stories.js
@@ -47,6 +47,7 @@ export const Validation = {
     hint: 'Select the second option if you want the validation to be successful',
     propValue: 'id',
     propText: 'name',
+    required: true,
     options: [
       { id: 'OBJ-123', name: 'The first object' },
       { id: 'OBJ-456', name: 'The second object' },
@@ -133,6 +134,7 @@ export default {
     hint: 'text',
     propValue: 'text',
     propText: 'text',
+    required: 'boolean',
     options: { control: 'array' },
   },
 };
diff --git a/components/src/stories/TextField.stories.js b/components/src/stories/TextField.stories.js
index bd5878df..960aa902 100644
--- a/components/src/stories/TextField.stories.js
+++ b/components/src/stories/TextField.stories.js
@@ -32,6 +32,7 @@ export const Validation = {
     hint: 'This is a text field with validation. The value should be an email',
     value: '',
     placeholder: 'john.doe@example.com',
+    required: true,
     rules: [
       (value) => !!value || 'This field is required',
       (value) => isEmail(value) || 'The value is not a valid email address',
@@ -50,5 +51,6 @@ export default {
     value: 'text',
     placeholder: 'text',
     suffix: 'text',
+    required: 'boolean',
   },
 };
diff --git a/components/src/widgets/select/widget.vue b/components/src/widgets/select/widget.vue
index 45318ada..22175e74 100644
--- a/components/src/widgets/select/widget.vue
+++ b/components/src/widgets/select/widget.vue
@@ -118,6 +118,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['valueChange']);
@@ -129,6 +133,7 @@ const isFocused = ref(false);
 const computedClasses = computed(() => ({
   'select-input_focused': isFocused.value,
   'select-input_invalid': !isValid.value,
+  'select-input_required': props.required,
 }));
 
 const computedOptions = computed(() =>
@@ -158,6 +163,14 @@ const getDisplayText = (item) => {
 .select-input {
   color: #212121;
 
+  &_required .select-input__label p::after {
+    content: '*';
+    margin-left: 3px;
+    color: #FF0000;
+    text-decoration: none;
+    display: inline-block;
+  }
+
   &__selected {
     height: 44px;
     border-radius: 2px;
diff --git a/components/src/widgets/textfield/widget.vue b/components/src/widgets/textfield/widget.vue
index b0169579..bb73458f 100644
--- a/components/src/widgets/textfield/widget.vue
+++ b/components/src/widgets/textfield/widget.vue
@@ -72,6 +72,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['input']);
@@ -86,6 +90,7 @@ const isFocused = ref(false);
 const computedClasses = computed(() => ({
   'text-field_focused': isFocused.value,
   'text-field_invalid': !isValid.value,
+  'text-field_required': props.required,
 }));
 
 const removeFocus = () => (isFocused.value = false);
@@ -126,6 +131,14 @@ watch(localValue, (newValue) => {
     line-height: 1.4;
   }
 
+  &_required label::after {
+    content: '*';
+    margin-left: 3px;
+    color: #FF0000;
+    text-decoration: none;
+    display: inline-block;
+  }
+
   &__body {
     flex-grow: 1;