diff --git a/components/src/index.js b/components/src/index.js
index 08d3550e..baafac2a 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -15,6 +15,9 @@ export { default as Table } from '~widgets/table/widget.vue';
 export { default as ComplexTable } from './widgets/complexTable/widget.vue';
 export { default as Button } from '~widgets/button/widget.vue';
 export { default as Menu } from '~widgets/menu/widget.vue';
+export { default as Textarea } from '~widgets/textarea/widget.vue';
+export { default as Alert } from '~widgets/alert/widget.vue';
+export { default as Radio } from '~widgets/radio/widget.vue';
 
 export { default as store } from '~core/store';
 export { default as bus } from '~core/eventBus';
diff --git a/components/src/stories/Alert.stories.js b/components/src/stories/Alert.stories.js
new file mode 100644
index 00000000..4fe42e08
--- /dev/null
+++ b/components/src/stories/Alert.stories.js
@@ -0,0 +1,30 @@
+import Alert from '~widgets/alert/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-alert', Alert);
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-alert v-bind="args"></ui-alert>`,
+  }),
+
+  args: {
+    message: 'This is an alert item',
+  },
+};
+
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    message: 'text',
+    icon: 'text',
+    type: 'text',
+  },
+};
diff --git a/components/src/stories/Radio.stories.js b/components/src/stories/Radio.stories.js
new file mode 100644
index 00000000..a595860a
--- /dev/null
+++ b/components/src/stories/Radio.stories.js
@@ -0,0 +1,32 @@
+import Radio from '~widgets/radio/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-radio', Radio);
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-radio v-bind="args"></ui-radio>`,
+  }),
+
+  args: {
+    label: 'Option',
+    selectedValue: 'foo',
+    radioValue: 'foo',
+  },
+};
+
+export default {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: 'text',
+    radioValue: 'text',
+    selectedValue: 'text',
+  },
+};
diff --git a/components/src/stories/Textarea.stories.js b/components/src/stories/Textarea.stories.js
new file mode 100644
index 00000000..f8aa1bb0
--- /dev/null
+++ b/components/src/stories/Textarea.stories.js
@@ -0,0 +1,36 @@
+import Textarea from '~widgets/textarea/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-textarea', Textarea);
+
+export const Basic = {
+  name: 'Basic options',
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: '<ui-textarea v-bind="args"></ui-textarea>',
+  }),
+
+  args: {
+    value: '',
+    placeholder: 'Placeholder text',
+  },
+};
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: 'text',
+    readonly: 'boolean',
+    placeholder: 'text',
+    required: 'boolean',
+    autoGrow: 'boolean',
+    noBorder: 'boolean',
+    rows: 'number',
+  },
+};
diff --git a/components/src/widgets/alert/widget.spec.js b/components/src/widgets/alert/widget.spec.js
new file mode 100644
index 00000000..21ac8ff2
--- /dev/null
+++ b/components/src/widgets/alert/widget.spec.js
@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Alert from './widget.vue';
+
+describe('Alert component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Alert, {
+      props: {
+        modelValue: true,
+        message: 'this is a message',
+        type: 'success',
+      },
+      global: {
+        renderStubDefaultSlot: true,
+      },
+    });
+  });
+
+  describe('render', () => {
+    test('renders the base component', () => {
+      expect(wrapper.get('.alert-holder').attributes()).toEqual(
+        expect.objectContaining({
+          class: 'alert-holder alert_success',
+          modelvalue: 'true',
+        }),
+      );
+
+      const text = wrapper.find('.alert__text');
+
+      expect(text.text()).toEqual('this is a message');
+
+      const icon = wrapper.find('ui-icon');
+
+      expect(icon.exists()).toEqual(true);
+      expect(icon.attributes()).toEqual(
+        expect.objectContaining({
+          iconname: 'googleInfoBaseline',
+          color: '#0bb071',
+          size: '24',
+        }),
+      );
+    });
+  });
+});
diff --git a/components/src/widgets/alert/widget.vue b/components/src/widgets/alert/widget.vue
new file mode 100644
index 00000000..65a192a1
--- /dev/null
+++ b/components/src/widgets/alert/widget.vue
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="alert-holder"
+    :class="`alert_${type}`"
+  >
+    <div class="alert">
+      <div class="alert__icon">
+        <ui-icon
+          :iconName="icon"
+          :color="typeAlert[type]"
+          size="24"
+        />
+      </div>
+      <div class="alert__text">
+        <slot name="message"> {{ message }} </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+
+  icon: {
+    type: String,
+    default: 'googleInfoBaseline',
+  },
+
+  type: {
+    type: String,
+    default: 'default',
+  },
+});
+
+const typeAlert = {
+  info: '#0055ff',
+  error: '#FF6A6A',
+  success: '#0bb071',
+  warning: '#FFC700',
+  default: '#bdbdbd',
+};
+</script>
+
+<style lang="stylus">
+.alert-holder {
+  width: 100%;
+  /* #bdbdbd */
+  background-color: rgba(189, 189, 189, 0.15);
+}
+.alert {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  min-height: 64px;
+  min-width: 240px;
+  max-width: 600px;
+  padding: 16px;
+  border-radius: 2px;
+  color: #bdbdbd;
+}
+
+.alert_error {
+  /* #FF6A6A */
+  background-color: rgba(255, 106, 106, 0.2);
+}
+
+.alert_info {
+  /* 0, 85, 255 */
+  background-color: rgba(0, 85, 255, 0.15);
+}
+.alert_success {
+  /* #0bb071 */
+  background-color: rgba(11, 176, 113, 0.15);
+}
+.alert_warning {
+  /* #FFC700 */
+  background-color: rgba(255, 199, 0, 0.15);
+}
+
+.alert__icon {
+  flex: 0 0 auto;
+  margin-right: 12px;
+  display: flex;
+}
+
+.alert__text {
+  flex: 1 1 auto;
+  font-size: 14 px;
+  line-height: 20px;
+  text-align: left;
+  color: #212121;
+}
+</style>
diff --git a/components/src/widgets/radio/widget.spec.js b/components/src/widgets/radio/widget.spec.js
new file mode 100644
index 00000000..c1546465
--- /dev/null
+++ b/components/src/widgets/radio/widget.spec.js
@@ -0,0 +1,91 @@
+import RadioInput from './widget.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('RadioInput component', () => {
+  describe('render', () => {
+    describe('when is checked', () => {
+      test('renders the base component', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            label: 'My radio input',
+            selectedValue: 'foo',
+          },
+        });
+
+        expect(wrapper.get('.radio-input ui-icon').attributes()).toEqual(
+          expect.objectContaining({
+            iconname: 'googleRadioButtonCheckedBaseline',
+            color: '#2C98F0',
+          }),
+        );
+        expect(wrapper.get('.radio-input__label').classes()).not.toContain(
+          'radio-input__label_empty',
+        );
+        expect(wrapper.get('.radio-input__label-text').text()).toEqual('My radio input');
+        expect(wrapper.vm.isSelected).toEqual(true);
+        expect(wrapper.vm.icon).toEqual('googleRadioButtonCheckedBaseline');
+        expect(wrapper.vm.iconColor).toEqual('#2C98F0');
+      });
+    });
+
+    describe('when is unchecked', () => {
+      test('renders the base component', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            label: 'My radio input',
+            selectedValue: 'bar',
+          },
+        });
+
+        expect(wrapper.get('.radio-input ui-icon').attributes()).toEqual(
+          expect.objectContaining({
+            iconname: 'googleRadioButtonUncheckedBaseline',
+            color: '',
+          }),
+        );
+        expect(wrapper.get('.radio-input__label').classes()).not.toContain(
+          'radio-input__label_empty',
+        );
+        expect(wrapper.get('.radio-input__label-text').text()).toEqual('My radio input');
+        expect(wrapper.vm.isSelected).toEqual(false);
+        expect(wrapper.vm.icon).toEqual('googleRadioButtonUncheckedBaseline');
+        expect(wrapper.vm.iconColor).toEqual('');
+      });
+    });
+
+    describe('when there is no label', () => {
+      test('adds the "radio-input__label_empty" class to the label element if there is no label', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            selectedValue: 'foo',
+            label: '',
+          },
+        });
+
+        expect(wrapper.get('.radio-input__label').classes()).toContain('radio-input__label_empty');
+      });
+    });
+  });
+
+  describe('events', () => {
+    describe('#select', () => {
+      test('it triggers the selected event with the radio value', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'bar',
+            selectedValue: 'foo',
+            label: 'label',
+          },
+        });
+
+        wrapper.vm.select();
+
+        expect(wrapper.emitted('selected')).toBeTruthy();
+        expect(wrapper.emitted()).toEqual({ selected: [['bar']] });
+      });
+    });
+  });
+});
diff --git a/components/src/widgets/radio/widget.vue b/components/src/widgets/radio/widget.vue
new file mode 100644
index 00000000..a5b653bb
--- /dev/null
+++ b/components/src/widgets/radio/widget.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="radio-input"
+    @click="select"
+  >
+    <ui-icon
+      class="radio-input__box"
+      :iconName="icon"
+      :color="iconColor"
+    />
+    <label
+      class="radio-input__label"
+      :class="{ 'radio-input__label_empty': !label }"
+    >
+      <input
+        class="radio-input__input"
+        type="radio"
+      />
+      <span class="radio-input__label-text">{{ label }}</span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['selected']);
+
+const props = defineProps({
+  selectedValue: {
+    type: String,
+    required: true,
+  },
+  radioValue: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const isSelected = computed(() => props.selectedValue === props.radioValue);
+const icon = computed(() =>
+  isSelected.value ? 'googleRadioButtonCheckedBaseline' : 'googleRadioButtonUncheckedBaseline',
+);
+const iconColor = computed(() => (isSelected.value ? '#2C98F0' : ''));
+
+const select = () => {
+  emit('selected', props.radioValue);
+};
+</script>
+
+<style lang="stylus">
+.radio-input {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.radio-input__box {
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.radio-input__input {
+  display: none;
+}
+
+.radio-input__label {
+  display: block;
+  margin-left: 8px;
+  user-select: none;
+}
+.radio-input__label_empty {
+  display: none;
+}
+
+.radio-input__label-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+}
+</style>
diff --git a/components/src/widgets/textarea/widget.spec.js b/components/src/widgets/textarea/widget.spec.js
new file mode 100644
index 00000000..040289d4
--- /dev/null
+++ b/components/src/widgets/textarea/widget.spec.js
@@ -0,0 +1,96 @@
+import { shallowMount } from '@vue/test-utils';
+
+import TextArea from './widget.vue';
+
+describe('TextArea component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(TextArea, {
+      props: {
+        modelValue: 'textarea text',
+        noBorder: true,
+        autoGrow: true,
+        rows: 4,
+        placeholder: 'placeholder',
+      },
+      global: {
+        renderStubDefaultSlot: true,
+      },
+    });
+
+    console.log(wrapper.html())
+  });
+
+  describe('render', () => {
+    test('renders the base component', () => {
+      expect(wrapper.get('.textarea-field').attributes()).toEqual(
+        expect.objectContaining({
+          class: 'textarea-field textarea-field_optional',
+        }),
+      );
+
+      expect(wrapper.get('textarea').attributes()).toEqual(
+        expect.objectContaining({
+          class: 'textarea-field__input textarea-field__no-resize textarea-field__no-border',
+          name: 'textarea',
+          placeholder: 'placeholder',
+          rows: '4',
+          style: 'height: 96px;',
+        }),
+      );
+    });
+  });
+
+  describe('validation', () => {
+    let rule1;
+    let rule2;
+
+    beforeEach(async () => {
+      rule1 = jest.fn().mockReturnValue(true);
+      rule2 = jest.fn().mockReturnValue('This field is invalid');
+
+      wrapper = shallowMount(TextArea, {
+        props: {
+          hint: 'Hint text',
+          rules: [rule1, rule2],
+        },
+      });
+
+      await wrapper.get('.textarea-field__input').setValue('foo');
+    });
+
+    it('validates the input value against the rules prop', () => {
+      expect(rule1).toHaveBeenCalledWith('foo');
+      expect(rule2).toHaveBeenCalledWith('foo');
+    });
+
+    it('renders the error messages if validation fails', () => {
+      expect(wrapper.get('.textarea-field__error-message').text()).toEqual('This field is invalid.');
+    });
+
+    it('adds the "textarea-field_invalid" class to the element', () => {
+      expect(wrapper.classes()).toContain('textarea-field_invalid');
+    });
+  });
+
+  describe('#calculateInputHeight', () => {
+    test('calculates and sets the right height when is autogrow', () => {
+      wrapper.vm.calculateInputHeight();
+
+      expect(wrapper.get('textarea').wrapperElement.style.height).toEqual('96px');
+    });
+  });
+
+  describe('#onMounted', () => {
+    test('calls calculateInputHeight and sets the right height', () => {
+      expect(wrapper.get('textarea').wrapperElement.style.height).toEqual('96px');
+    });
+  });
+
+  describe('watch', () => {
+    test('calls calculateInputHeight and sets the right height', () => {
+      expect(wrapper.get('textarea').wrapperElement.style.height).toEqual('96px');
+    });
+  });
+});
diff --git a/components/src/widgets/textarea/widget.vue b/components/src/widgets/textarea/widget.vue
new file mode 100644
index 00000000..31326661
--- /dev/null
+++ b/components/src/widgets/textarea/widget.vue
@@ -0,0 +1,193 @@
+<template>
+  <div
+    class="textarea-field"
+    :class="computedClasses"
+    @click="setFocus"
+    @focusout="removeFocus"
+  >
+    <label
+      v-if="label"
+      class="textarea-field__label"
+      :for="textarea"
+    >
+      <slot name="label">
+        <span>{{ props.label }}</span>
+      </slot>
+    </label>
+    <textarea
+      ref="txtarea"
+      v-model="localValue"
+      class="textarea-field__input"
+      :class="{
+        'textarea-field__no-resize': autoGrow,
+        'textarea-field__no-border': noBorder,
+      }"
+      :placeholder="placeholder"
+      :readonly="props.readonly"
+      :rows="rows"
+      name="textarea"
+      @input.stop
+    ></textarea>
+    <div
+      v-if="!isValid"
+      class="textarea-field__error-message"
+    >
+      <p>{{ errorMessagesString }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, computed } from 'vue';
+import { useFieldValidation } from '~composables/validation';
+
+const emit = defineEmits(['input']);
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  autoGrow: {
+    type: Boolean,
+    default: false,
+  },
+  noBorder: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  rows: {
+    type: [Number, String],
+    default: 5,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const localValue = ref('');
+const txtarea = ref(null);
+const isFocused = ref(false);
+
+const { isValid, errorMessagesString } = useFieldValidation(localValue, props.rules);
+
+const calculateInputHeight = () => {
+  const input = txtarea.value;
+  if (input) {
+    input.style.height = 0;
+    const height = input.scrollHeight;
+    const minHeight = parseInt(props.rows, 10) * 24;
+    // This has to be done ASAP, waiting for Vue
+    // to update the DOM causes ugly layout jumping
+    input.style.height = `${Math.max(minHeight, height)}px`;
+  }
+};
+
+const removeFocus = () => {
+  isFocused.value = false;
+}
+
+const setFocus = () => {
+  txtarea.value.focus();
+  isFocused.value = true;
+};
+
+const computedClasses = computed(() => ({
+  'textarea-field_focused': isFocused.value,
+  'textarea-field_invalid': !isValid.value,
+  'textarea-field_optional': !props.required,
+}));
+
+onMounted(() => {
+  if (props.autoGrow) calculateInputHeight();
+});
+
+watch(
+  () => props.value,
+  (newValue) => {
+    localValue.value = newValue;
+  },
+  { immediate: true },
+);
+
+watch(localValue, async (newValue) => {
+  emit('input', newValue);
+  await nextTick();
+  if (props.autoGrow) calculateInputHeight();
+});
+</script>
+
+<style lang="stylus">
+@import '../../assets/styles/common.styl';
+
+.textarea-field {
+  color: base-text-color;
+
+  &_optional label::after {
+    content: '(optional)';
+    display: inline-block;
+    margin-left: 3px;
+    color: #212121;
+    text-decoration: none;
+  }
+
+  &__input {
+    width: 100%;
+    background-color: #FBFBFB;
+    border: 1px solid #D8D8D8;
+    border-radius: 2px;
+    padding: 11px;
+  }
+
+  &__no-resize {
+    resize: none;
+  }
+
+  &__no-border {
+    border: none;
+    outline: none;
+  }
+
+  &__label {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    display: flex;
+    margin-bottom: 8px;
+  }
+
+  &_focused textarea {
+    border-color: #4797f2;
+    outline: 1px solid #4797f2;
+  }
+
+  &__error-message {
+    margin-top: 4px;
+
+    p {
+      color: #FF6A6A;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.3;
+      margin: 0;
+    }
+  }
+}
+</style>