diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
index bdac8785e..1501fd231 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -126,6 +126,15 @@ export const Examples = (): React.ReactElement => {
           <AutoComplete options={options} placeholder={placeholderText} />
         </form>
       </StoryDescriptor>
+
+      <StoryDescriptor title="Read Only">
+        <AutoComplete
+          options={options}
+          value="Option 1"
+          placeholder={placeholderText}
+          readOnly
+        />
+      </StoryDescriptor>
     </div>
   );
 };
diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
index 4e25a1fba..ecc042da5 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 
 import { FloatingNode, FloatingPortal } from '@floating-ui/react';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import noop from '../../utils/noop';
 import { Input } from '../Input';
 import { IPickerListItem, PickerList } from '../Picker';
 import { DEFAULT_LIST_HEIGHT, MIN_LIST_HEIGHT } from '../Picker/constants';
 import { useFloatingPicker } from '../Picker/hooks/useFloatingPicker';
 import { usePickerItems } from '../Picker/hooks/usePickerItems';
+import { ReadOnlyText } from '../ReadOnlyText';
 
 import {
   areAllOptionsStrings,
@@ -44,11 +46,14 @@ export const AutoComplete = React.forwardRef<
       single,
       alwaysShowAllOptions,
       hideIfExactMatch = true,
+      noDataFallbackText = 'No data',
       ...inputProps
     },
     ref
   ) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
+    const { readOnly: readOnlyContext } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnlyContext || readOnly;
 
     React.useImperativeHandle(ref, () => inputRef.current!, []);
 
@@ -158,6 +163,15 @@ export const AutoComplete = React.forwardRef<
       floatingStrategy,
     });
 
+    if (computedReadOnly) {
+      return (
+        <ReadOnlyText
+          value={inputValue?.toString()}
+          noDataFallbackText={noDataFallbackText}
+        />
+      );
+    }
+
     return (
       <div ref={setReference} {...getReferenceProps()}>
         <Input
diff --git a/packages/react-components/src/components/AutoComplete/types.ts b/packages/react-components/src/components/AutoComplete/types.ts
index 9dfc63a97..5fc26b269 100644
--- a/packages/react-components/src/components/AutoComplete/types.ts
+++ b/packages/react-components/src/components/AutoComplete/types.ts
@@ -32,4 +32,8 @@ export interface AutoCompleteProps extends Omit<IInputProps, 'type'> {
   single?: boolean;
   /** If true, the option list will be hidden if there is only one option and it is an exact match to the input value. */
   hideIfExactMatch?: boolean;
+  /**
+   * Set the text to display with read-only state when there is no data. Default to 'No data'
+   */
+  noDataFallbackText?: string;
 }
diff --git a/packages/react-components/src/components/Checkbox/Checkbox.module.scss b/packages/react-components/src/components/Checkbox/Checkbox.module.scss
index e54e7ee46..ec3e80440 100644
--- a/packages/react-components/src/components/Checkbox/Checkbox.module.scss
+++ b/packages/react-components/src/components/Checkbox/Checkbox.module.scss
@@ -98,6 +98,27 @@
     }
   }
 
+  &--read-only {
+    .checkbox {
+      &__input {
+        border-color: var(--border-basic-secondary);
+        background-color: var(--surface-primary-default);
+
+        &::after {
+          background-color: var(--content-basic-primary);
+        }
+      }
+
+      &__label,
+      &__input,
+      &__helper,
+      &__text {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
+
   &--selected {
     &:hover {
       .checkbox__input:checked + .checkbox__square {
diff --git a/packages/react-components/src/components/Checkbox/Checkbox.stories.tsx b/packages/react-components/src/components/Checkbox/Checkbox.stories.tsx
index 3dcb0c7c1..9f8fa6a84 100644
--- a/packages/react-components/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/react-components/src/components/Checkbox/Checkbox.stories.tsx
@@ -38,6 +38,9 @@ export const States = (): React.ReactElement => (
       <CheckboxComponent checked description="Disabled" disabled>
         Checkbox label
       </CheckboxComponent>
+      <CheckboxComponent checked description="ReadOnly" readOnly>
+        Checkbox label
+      </CheckboxComponent>
     </StoryDescriptor>
     <StoryDescriptor title="Unchecked">
       <CheckboxComponent checked={false} description="Enabled">
@@ -46,6 +49,9 @@ export const States = (): React.ReactElement => (
       <CheckboxComponent checked={false} description="Disabled" disabled>
         Checkbox label
       </CheckboxComponent>
+      <CheckboxComponent checked={false} description="ReadOnly" readOnly>
+        Checkbox label
+      </CheckboxComponent>
     </StoryDescriptor>
     <StoryDescriptor title="Indeterminate">
       <CheckboxComponent
@@ -63,6 +69,14 @@ export const States = (): React.ReactElement => (
       >
         Checkbox label
       </CheckboxComponent>
+      <CheckboxComponent
+        indeterminate={true}
+        checked={false}
+        description="ReadOnly"
+        readOnly
+      >
+        Checkbox label
+      </CheckboxComponent>
     </StoryDescriptor>
   </>
 );
diff --git a/packages/react-components/src/components/Checkbox/Checkbox.tsx b/packages/react-components/src/components/Checkbox/Checkbox.tsx
index 5d294663a..2b8473625 100644
--- a/packages/react-components/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react-components/src/components/Checkbox/Checkbox.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import { FieldDescription } from '../FieldDescription';
 import { Text } from '../Typography';
 
@@ -12,6 +13,10 @@ export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
    * Specify whether the checkbox should be disabled
    */
   disabled?: boolean;
+  /**
+   * Specify whether the checkbox should be read only
+   */
+  readOnly?: boolean;
   /**
    * Specify whether the checkbox should be checked
    */
@@ -41,12 +46,16 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     },
     ref
   ) => {
+    const { readOnly } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnly || restInputProps.readOnly;
+
     return (
       <div
         className={cx(styles[baseClass], className, {
           [styles[`${baseClass}--selected`]]: checked,
           [styles[`${baseClass}--disabled`]]: disabled,
           [styles[`${baseClass}--indeterminate`]]: indeterminate,
+          [styles[`${baseClass}--read-only`]]: computedReadOnly,
         })}
       >
         <label className={styles[`${baseClass}__label`]}>
diff --git a/packages/react-components/src/components/FormField/FormField.module.scss b/packages/react-components/src/components/FormField/FormField.module.scss
index f93c8c0ae..f94a34ee5 100644
--- a/packages/react-components/src/components/FormField/FormField.module.scss
+++ b/packages/react-components/src/components/FormField/FormField.module.scss
@@ -7,9 +7,11 @@
     flex-direction: column;
   }
 
-  &__wrapper--inline {
-    display: flex;
-    flex-flow: row nowrap;
+  &__wrapper {
+    &--inline {
+      display: flex;
+      flex-flow: row nowrap;
+    }
   }
 
   &__label {
@@ -67,6 +69,10 @@
     line-height: 20px;
     color: var(--content-basic-primary);
     font-size: 14px;
+
+    &--read-only {
+      cursor: default;
+    }
   }
 
   &__label-right-node {
diff --git a/packages/react-components/src/components/FormField/FormField.stories.tsx b/packages/react-components/src/components/FormField/FormField.stories.tsx
index bcc5e1fc5..95b8bc2dc 100644
--- a/packages/react-components/src/components/FormField/FormField.stories.tsx
+++ b/packages/react-components/src/components/FormField/FormField.stories.tsx
@@ -1,12 +1,35 @@
 import { Info } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
+import { ReadOnlyFormFieldContextProvider } from '../../providers/ReadOnlyFormFieldProvider';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+import { AutoComplete } from '../AutoComplete';
+import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { Input, InputPromo } from '../Input';
 import { IInputProps } from '../Input/types';
+import { NumericInput } from '../NumericInput';
+import { Picker } from '../Picker';
+import { RadioButton } from '../RadioButton';
+import { TagInput } from '../TagInput';
+import { Textarea } from '../Textarea';
 
 import { FormField as FormFieldComponent, FormFieldProps } from './FormField';
 
+const DEFAULT_PICKER_OPTIONS = [
+  { key: 'one', name: 'Option one' },
+  { key: 'groupA', name: 'Group A title header', groupHeader: true },
+  { key: 'two', name: 'Option two' },
+  { key: 'three', name: 'Option three' },
+  { key: 'groupB', name: 'Group B title header', groupHeader: true },
+  { key: 'four', name: 'Option four' },
+  { key: 'five', name: 'Option five' },
+  { key: 'six', name: 'Option six' },
+  { key: 'seven', name: 'Option seven' },
+  { key: 'eight', name: 'Option eight' },
+  { key: 'nine', name: 'Option nine' },
+];
+
 export default {
   title: 'Forms/FormField',
   component: FormFieldComponent,
@@ -102,6 +125,97 @@ export const TextFieldWithError: StoryFn<FormFieldProps> = () => (
   </FormFieldComponent>
 );
 
+const ReadOnlyTemplate: StoryFn<FormFieldProps> = (args) => (
+  <ReadOnlyFormFieldContextProvider readOnly={args.readOnly}>
+    <div>
+      <StoryDescriptor title="WithNoValue">
+        <FormFieldComponent {...args}>
+          <ExampleInput />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithInput">
+        <FormFieldComponent {...args}>
+          <ExampleInput value="test value" />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithPromoInput">
+        <FormFieldComponent {...args} boldLabel>
+          <ExampleInputPromo value="test value" />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithPicker">
+        <FormFieldComponent {...args}>
+          <Picker
+            onSelect={() => {}}
+            options={DEFAULT_PICKER_OPTIONS}
+            selected={DEFAULT_PICKER_OPTIONS.slice(0, 3)}
+          />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithPickerWithExampleWidthContstraints">
+        <div
+          style={{ width: '200px', padding: '10px', border: '1px solid gray' }}
+        >
+          <FormFieldComponent {...args}>
+            <Picker
+              onSelect={() => {}}
+              options={DEFAULT_PICKER_OPTIONS}
+              selected={DEFAULT_PICKER_OPTIONS.slice(0, 9)}
+            />
+          </FormFieldComponent>
+        </div>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithTagInput">
+        <FormFieldComponent {...args}>
+          <TagInput
+            tags={['tag1', 'tag2', 'tag3', 'tag4']}
+            onChange={() => {}}
+          />
+        </FormFieldComponent>
+      </StoryDescriptor>
+
+      <StoryDescriptor title="WithNumericInput">
+        <FormFieldComponent {...args}>
+          <NumericInput value="456" onChange={() => {}} />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithTextarea">
+        <FormFieldComponent {...args}>
+          <Textarea value="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithAutocomplete">
+        <FormFieldComponent {...args}>
+          <AutoComplete
+            options={['option1', 'option2', 'option3']}
+            value="option2"
+          />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithCheckbox">
+        <FormFieldComponent {...args}>
+          <Checkbox checked description="Checkbox description">
+            Checkbox label
+          </Checkbox>
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithRadioButton">
+        <FormFieldComponent {...args}>
+          <RadioButton checked description="RadioButton description">
+            RadioButton label
+          </RadioButton>
+        </FormFieldComponent>
+      </StoryDescriptor>
+    </div>
+  </ReadOnlyFormFieldContextProvider>
+);
+
+export const TextFieldReadOnly = ReadOnlyTemplate.bind({});
+TextFieldReadOnly.args = {
+  labelText: 'My label',
+  readOnly: true,
+};
+
 export const BoldLabelWithPromoInput: StoryFn<FormFieldProps> = () => (
   <FormFieldComponent labelText="Username" boldLabel>
     <ExampleInputPromo />
diff --git a/packages/react-components/src/components/FormField/FormField.tsx b/packages/react-components/src/components/FormField/FormField.tsx
index 084c4d676..d216608be 100644
--- a/packages/react-components/src/components/FormField/FormField.tsx
+++ b/packages/react-components/src/components/FormField/FormField.tsx
@@ -2,6 +2,10 @@ import * as React from 'react';
 
 import cx from 'clsx';
 
+import {
+  ReadOnlyFormFieldContextProvider,
+  useReadOnlyFormFieldContext,
+} from '../../providers/ReadOnlyFormFieldProvider';
 import { FieldDescription } from '../FieldDescription';
 import { FieldError } from '../FieldError';
 import { Text } from '../Typography';
@@ -51,9 +55,13 @@ export interface FormFieldProps {
    * Renders given element above the filed
    */
   labelRightNode?: React.ReactNode;
+  /**
+   * Whether the form field is read-only
+   */
+  readOnly?: boolean;
 }
 
-export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
+const FormFieldContent: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   inline,
   error,
   description,
@@ -64,9 +72,13 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   children,
   labelRightNode,
   boldLabel = false,
+  readOnly = false,
 }) => {
   const childrenRef = React.useRef<HTMLDivElement>(null);
   const [labelHeight, setLabelHeight] = React.useState('auto');
+
+  const { isEmpty } = useReadOnlyFormFieldContext();
+
   const mergedClassNames = cx(
     styles[baseClass],
     {
@@ -127,10 +139,21 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
                 }}
               >
                 <label
-                  className={styles[`${baseClass}__label-left-node`]}
+                  className={cx(
+                    styles[`${baseClass}__label-left-node`],
+                    readOnly &&
+                      styles[`${baseClass}__label-left-node--read-only`]
+                  )}
                   htmlFor={labelFor}
                 >
-                  <Text as="span" size="sm" bold={boldLabel}>
+                  <Text
+                    as="span"
+                    size="sm"
+                    bold={!readOnly && boldLabel}
+                    customColor={
+                      isEmpty ? 'var(--content-basic-secondary)' : undefined
+                    }
+                  >
                     {labelText}
                   </Text>
                 </label>
@@ -174,3 +197,14 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
     </div>
   );
 };
+
+export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
+  readOnly,
+  ...props
+}) => {
+  return (
+    <ReadOnlyFormFieldContextProvider readOnly={readOnly}>
+      <FormFieldContent readOnly={readOnly} {...props} />
+    </ReadOnlyFormFieldContextProvider>
+  );
+};
diff --git a/packages/react-components/src/components/Input/Input.module.scss b/packages/react-components/src/components/Input/Input.module.scss
index 1fc294b39..e2958b012 100644
--- a/packages/react-components/src/components/Input/Input.module.scss
+++ b/packages/react-components/src/components/Input/Input.module.scss
@@ -81,11 +81,6 @@ $base-class: 'input';
     }
   }
 
-  &--read-only {
-    border-color: var(--border-basic-disabled);
-    background-color: var(--surface-primary-disabled);
-  }
-
   &--error,
   &--error:hover {
     border-color: var(--border-basic-negative);
diff --git a/packages/react-components/src/components/Input/Input.stories.tsx b/packages/react-components/src/components/Input/Input.stories.tsx
index b2a01c16b..f18fcdc34 100644
--- a/packages/react-components/src/components/Input/Input.stories.tsx
+++ b/packages/react-components/src/components/Input/Input.stories.tsx
@@ -63,6 +63,9 @@ export const States = (): React.ReactElement => (
     <StoryDescriptor title="Disabled">
       <Input disabled={true} placeholder={placeholderText} />
     </StoryDescriptor>
+    <StoryDescriptor title="ReadOnly">
+      <Input readOnly value="My input test value" />
+    </StoryDescriptor>
   </>
 );
 
@@ -135,6 +138,13 @@ export const InputPromoStates = (): React.ReactElement => (
     <StoryDescriptor title="Disabled">
       <InputPromoComponent disabled={true} placeholder={placeholderText} />
     </StoryDescriptor>
+    <StoryDescriptor title="ReadOnly">
+      <InputPromoComponent
+        readOnly
+        placeholder={placeholderText}
+        value="My test value"
+      />
+    </StoryDescriptor>
   </>
 );
 
diff --git a/packages/react-components/src/components/Input/Input.tsx b/packages/react-components/src/components/Input/Input.tsx
index d9c9a3126..c77fffb93 100644
--- a/packages/react-components/src/components/Input/Input.tsx
+++ b/packages/react-components/src/components/Input/Input.tsx
@@ -6,8 +6,10 @@ import {
 } from '@livechat/design-system-icons';
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { ReadOnlyText } from '../ReadOnlyText';
 import { Text } from '../Typography';
 
 import {
@@ -46,11 +48,14 @@ export const InputComponent = React.forwardRef<
       mainClassName,
       isPromo = false,
       cropOnBlur = true,
+      noDataFallbackText = 'No data',
       ...inputProps
     },
     ref
   ) => {
     const innerRef = React.useRef<HTMLInputElement>(null);
+    const { readOnly } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnly || inputProps.readOnly;
 
     React.useImperativeHandle(ref, () => innerRef.current!, []);
     const [isFocused, setIsFocused] = React.useState(false);
@@ -63,7 +68,6 @@ export const InputComponent = React.forwardRef<
         [styles[`${baseClass}--focused`]]: isFocused,
         [styles[`${baseClass}--error`]]: error,
         [styles[`${baseClass}--crop`]]: cropOnBlur,
-        [styles[`${baseClass}--read-only`]]: inputProps.readOnly,
       },
       className
     );
@@ -79,6 +83,15 @@ export const InputComponent = React.forwardRef<
       innerRef.current?.focus();
     };
 
+    if (computedReadOnly) {
+      return (
+        <ReadOnlyText
+          value={inputProps.value?.toString()}
+          noDataFallbackText={noDataFallbackText}
+        />
+      );
+    }
+
     return (
       <Text
         as="div"
diff --git a/packages/react-components/src/components/Input/types.ts b/packages/react-components/src/components/Input/types.ts
index 17b2b3e3b..4a672add7 100644
--- a/packages/react-components/src/components/Input/types.ts
+++ b/packages/react-components/src/components/Input/types.ts
@@ -23,6 +23,10 @@ export interface IInputGlobalProps
    * Set to enable ellipsis
    */
   cropOnBlur?: boolean;
+  /**
+   * Set the text to display with read-only state when there is no data. Default to 'No data'
+   */
+  noDataFallbackText?: string;
 }
 
 export interface IInputProps extends IInputGlobalProps {
diff --git a/packages/react-components/src/components/NumericInput/NumericInput.stories.tsx b/packages/react-components/src/components/NumericInput/NumericInput.stories.tsx
index aef913f5a..f77ee7625 100644
--- a/packages/react-components/src/components/NumericInput/NumericInput.stories.tsx
+++ b/packages/react-components/src/components/NumericInput/NumericInput.stories.tsx
@@ -52,6 +52,11 @@ NumericInputWithDisabled.args = {
   disabled: true,
 };
 
+export const NumericInputWithReadOnly = StoryTemplate.bind({});
+NumericInputWithReadOnly.args = {
+  readOnly: true,
+};
+
 export const NumericInputWithError = StoryTemplate.bind({});
 NumericInputWithError.args = {
   error: 'Error',
diff --git a/packages/react-components/src/components/NumericInput/NumericInput.tsx b/packages/react-components/src/components/NumericInput/NumericInput.tsx
index d49d197e0..4aca00116 100644
--- a/packages/react-components/src/components/NumericInput/NumericInput.tsx
+++ b/packages/react-components/src/components/NumericInput/NumericInput.tsx
@@ -3,8 +3,10 @@ import * as React from 'react';
 import { ChevronUp, ChevronDown } from '@livechat/design-system-icons';
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import { KeyCodes } from '../../utils/keyCodes';
 import { Icon } from '../Icon';
+import { ReadOnlyText } from '../ReadOnlyText';
 
 import styles from './NumericInput.module.scss';
 
@@ -19,6 +21,7 @@ export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   disabled?: boolean;
   noControls?: boolean;
   onChange: (value: string) => void;
+  noDataFallbackText?: string;
 };
 
 export const NumericInput: React.FC<
@@ -33,9 +36,12 @@ export const NumericInput: React.FC<
   noControls,
   style,
   onChange,
+  noDataFallbackText = 'No data',
   ...restProps
 }) => {
   const inputRef = React.useRef<null | HTMLInputElement>(null);
+  const { readOnly } = useReadOnlyFormFieldContext();
+  const computedReadOnly = readOnly || restProps.readOnly;
 
   const mergedClassNames = cx(
     styles[baseClass],
@@ -111,6 +117,15 @@ export const NumericInput: React.FC<
     return updateValue(-1);
   };
 
+  if (computedReadOnly) {
+    return (
+      <ReadOnlyText
+        value={value?.toString()}
+        noDataFallbackText={noDataFallbackText}
+      />
+    );
+  }
+
   return (
     <div className={mergedClassNames} style={style}>
       <input
diff --git a/packages/react-components/src/components/Picker/Picker.stories.tsx b/packages/react-components/src/components/Picker/Picker.stories.tsx
index 5b472a1d5..0c9899af1 100644
--- a/packages/react-components/src/components/Picker/Picker.stories.tsx
+++ b/packages/react-components/src/components/Picker/Picker.stories.tsx
@@ -87,6 +87,17 @@ export const States = (): React.ReactElement => (
         disabled
       />
     </StoryDescriptor>
+    <StoryDescriptor title="ReadOnly">
+      <PickerComponent
+        options={DEFAULT_PICKER_OPTIONS}
+        onSelect={noop}
+        inputProps={{ readOnly: true }}
+        selected={[
+          { key: 'two', name: 'Option two' },
+          { key: 'three', name: 'Option three' },
+        ]}
+      />
+    </StoryDescriptor>
     <StoryDescriptor title="Error">
       <PickerComponent options={DEFAULT_PICKER_OPTIONS} onSelect={noop} error />
     </StoryDescriptor>
diff --git a/packages/react-components/src/components/Picker/Picker.tsx b/packages/react-components/src/components/Picker/Picker.tsx
index 3b7016903..ffc277e0f 100644
--- a/packages/react-components/src/components/Picker/Picker.tsx
+++ b/packages/react-components/src/components/Picker/Picker.tsx
@@ -3,6 +3,9 @@ import * as React from 'react';
 import { FloatingNode, FloatingPortal } from '@floating-ui/react';
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
+import { ReadOnlyText } from '../ReadOnlyText';
+
 import { PickerList } from './components/PickerList';
 import { PickerTrigger } from './components/PickerTrigger';
 import { PickerTriggerBody } from './components/PickerTriggerBody';
@@ -44,6 +47,7 @@ export const Picker: React.FC<IPickerProps> = ({
   useClickHookProps,
   virtuosoProps,
   inputProps,
+  noDataFallbackText = 'No data',
   ...props
 }) => {
   const [open, setOpen] = React.useState(openedOnInit);
@@ -51,6 +55,8 @@ export const Picker: React.FC<IPickerProps> = ({
   const isControlled = isVisible !== undefined;
   const isOpen = isControlled ? isVisible : open;
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const { readOnly } = useReadOnlyFormFieldContext();
+  const computedReadOnly = readOnly || inputProps?.readOnly;
 
   const handleVisibilityChange = (newValue: boolean, event?: Event) => {
     if (newValue) {
@@ -111,6 +117,18 @@ export const Picker: React.FC<IPickerProps> = ({
     searchPhrase,
   });
 
+  if (computedReadOnly) {
+    return (
+      <ReadOnlyText
+        value={selected
+          ?.map((option) => (!option.groupHeader ? option.name : null))
+          .filter(Boolean)
+          .join(', ')}
+        noDataFallbackText={noDataFallbackText}
+      />
+    );
+  }
+
   return (
     <div id={id} className={cx(styles['picker-wrapper'], className)}>
       <PickerTrigger
diff --git a/packages/react-components/src/components/Picker/types.ts b/packages/react-components/src/components/Picker/types.ts
index 62669303c..e00d249be 100644
--- a/packages/react-components/src/components/Picker/types.ts
+++ b/packages/react-components/src/components/Picker/types.ts
@@ -156,4 +156,8 @@ export interface IPickerProps extends ComponentCoreProps {
    * Additional props for the input element
    */
   inputProps?: InputHTMLAttributes<HTMLInputElement> | Record<string, unknown>;
+  /**
+   * Set the text to display with read-only state when there is no data. Default to 'No data'
+   */
+  noDataFallbackText?: string;
 }
diff --git a/packages/react-components/src/components/RadioButton/RadioButton.module.scss b/packages/react-components/src/components/RadioButton/RadioButton.module.scss
index 1f23c6c85..05eb3eaa0 100644
--- a/packages/react-components/src/components/RadioButton/RadioButton.module.scss
+++ b/packages/react-components/src/components/RadioButton/RadioButton.module.scss
@@ -59,9 +59,25 @@
     cursor: default;
   }
 
-  &--selected {
+  &--read-only {
+    cursor: default;
+    pointer-events: none;
+
     .radio-button__circle {
-      border-color: var(--action-primary-default);
+      border-color: var(--content-basic-primary);
+      background-color: var(--surface-primary-default);
+    }
+
+    .radio-button__inner-circle {
+      background-color: var(--content-basic-primary);
+    }
+  }
+
+  &--selected {
+    &:not(.radio-button--read-only) {
+      .radio-button__circle {
+        border-color: var(--action-primary-default);
+      }
     }
 
     .radio-button__inner-circle {
diff --git a/packages/react-components/src/components/RadioButton/RadioButton.stories.tsx b/packages/react-components/src/components/RadioButton/RadioButton.stories.tsx
index 2561e8861..6fbf5ba68 100644
--- a/packages/react-components/src/components/RadioButton/RadioButton.stories.tsx
+++ b/packages/react-components/src/components/RadioButton/RadioButton.stories.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 
 import { Meta } from '@storybook/react';
 
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
 import {
   RadioButton as RadioButtonComponent,
   RadioButtonProps,
@@ -33,3 +35,24 @@ RadioButton.args = {
   description: 'Help text',
   children: 'Radio label',
 };
+
+export const RadioButtonReadOnly = ({
+  children,
+  ...args
+}: RadioButtonProps): React.ReactElement => (
+  <>
+    <StoryDescriptor title="Checked">
+      <RadioButtonComponent {...args} checked>
+        {children}
+      </RadioButtonComponent>
+    </StoryDescriptor>
+    <StoryDescriptor title="UnChecked">
+      <RadioButtonComponent {...args}>{children}</RadioButtonComponent>
+    </StoryDescriptor>
+  </>
+);
+
+RadioButtonReadOnly.args = {
+  ...RadioButton.args,
+  readOnly: true,
+};
diff --git a/packages/react-components/src/components/RadioButton/RadioButton.tsx b/packages/react-components/src/components/RadioButton/RadioButton.tsx
index 606966c3e..802cdb3f3 100644
--- a/packages/react-components/src/components/RadioButton/RadioButton.tsx
+++ b/packages/react-components/src/components/RadioButton/RadioButton.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import { FieldDescription } from '../FieldDescription';
 import { Text } from '../Typography';
 
@@ -12,6 +13,7 @@ export interface RadioButtonProps
   description?: React.ReactNode;
   checked?: boolean;
   disabled?: boolean;
+  readOnly?: boolean;
 }
 
 const baseClass = 'radio-button';
@@ -21,9 +23,13 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
     { children, className = '', description, checked, disabled, ...props },
     ref
   ) => {
+    const { readOnly } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnly || props.readOnly;
+
     const mergedClassNames = cx(styles[baseClass], className, {
       [styles[`${baseClass}--selected`]]: checked,
       [styles[`${baseClass}--disabled`]]: disabled,
+      [styles[`${baseClass}--read-only`]]: computedReadOnly,
     });
 
     return (
diff --git a/packages/react-components/src/components/ReadOnlyText/ReadOnlyText.tsx b/packages/react-components/src/components/ReadOnlyText/ReadOnlyText.tsx
new file mode 100644
index 000000000..d74e2ba74
--- /dev/null
+++ b/packages/react-components/src/components/ReadOnlyText/ReadOnlyText.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
+import { Text } from '../Typography';
+
+export interface ReadOnlyTextProps {
+  /**
+   * The value to display
+   */
+  value?: string;
+  /**
+   * Text to show when no value is provided
+   */
+  noDataFallbackText?: string;
+}
+
+export const ReadOnlyText = ({
+  value,
+  noDataFallbackText = 'No data',
+}: ReadOnlyTextProps) => {
+  const { setIsEmpty } = useReadOnlyFormFieldContext();
+
+  useEffect(() => {
+    setIsEmpty(!value);
+  }, [value, setIsEmpty]);
+
+  return (
+    <Text
+      noMargin
+      semiBold={!!value}
+      customColor={!value ? 'var(--content-basic-secondary)' : undefined}
+      role="textbox"
+      aria-readonly="true"
+    >
+      {value || noDataFallbackText}
+    </Text>
+  );
+};
diff --git a/packages/react-components/src/components/ReadOnlyText/index.ts b/packages/react-components/src/components/ReadOnlyText/index.ts
new file mode 100644
index 000000000..fa4b890d9
--- /dev/null
+++ b/packages/react-components/src/components/ReadOnlyText/index.ts
@@ -0,0 +1,2 @@
+export { ReadOnlyText } from './ReadOnlyText';
+export type { ReadOnlyTextProps } from './ReadOnlyText';
diff --git a/packages/react-components/src/components/TagInput/TagInput.stories.tsx b/packages/react-components/src/components/TagInput/TagInput.stories.tsx
index c67266682..ab2dca039 100644
--- a/packages/react-components/src/components/TagInput/TagInput.stories.tsx
+++ b/packages/react-components/src/components/TagInput/TagInput.stories.tsx
@@ -99,3 +99,9 @@ export const Sizes = (): React.ReactElement => (
     </StoryDescriptor>
   </>
 );
+
+export const ReadOnlyTagInput = ({ ...args }) => {
+  const [tags, setTags] = React.useState(['tag1', 'tag2']);
+
+  return <TagInput {...args} tags={tags} onChange={setTags} readOnly />;
+};
diff --git a/packages/react-components/src/components/TagInput/TagInput.tsx b/packages/react-components/src/components/TagInput/TagInput.tsx
index 9831f0034..69117cbf1 100644
--- a/packages/react-components/src/components/TagInput/TagInput.tsx
+++ b/packages/react-components/src/components/TagInput/TagInput.tsx
@@ -2,8 +2,10 @@ import * as React from 'react';
 
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
 import { KeyCodes } from '../../utils/keyCodes';
 import { FieldError } from '../FieldError';
+import { ReadOnlyText } from '../ReadOnlyText';
 import { Text } from '../Typography';
 
 import { EditableTag } from './components/EditableTag';
@@ -34,6 +36,8 @@ export const TagInput = <T extends TagInputValues>({
   inputClassName,
   onBlur,
   addOnBlur = true,
+  readOnly,
+  noDataFallbackText = 'No data',
   ...props
 }: TagInputProps<T>): React.ReactElement => {
   const mergedClassNames = cx(
@@ -51,6 +55,8 @@ export const TagInput = <T extends TagInputValues>({
 
   const [inputValue, setInputValue] = React.useState('');
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const { readOnly: readOnlyContext } = useReadOnlyFormFieldContext();
+  const computedReadOnly = readOnlyContext || readOnly;
 
   const addTag = (value: string) => {
     if (value.trim() !== '') {
@@ -113,6 +119,19 @@ export const TagInput = <T extends TagInputValues>({
     onChange([...(tags || []), ...newTags] as T[]);
   };
 
+  const getTagValue = (tag: T): string => {
+    if (typeof tag === 'string') return tag;
+    return tag.value || (typeof tag.children === 'string' ? tag.children : '');
+  };
+  if (computedReadOnly) {
+    return (
+      <ReadOnlyText
+        value={tags?.filter(Boolean).map(getTagValue).join(', ')}
+        noDataFallbackText={noDataFallbackText}
+      />
+    );
+  }
+
   const renderTag = (tag: T, index: number) => {
     if (typeof tag === 'string') {
       return (
diff --git a/packages/react-components/src/components/TagInput/types.ts b/packages/react-components/src/components/TagInput/types.ts
index 79125ef88..bd212dcf3 100644
--- a/packages/react-components/src/components/TagInput/types.ts
+++ b/packages/react-components/src/components/TagInput/types.ts
@@ -43,6 +43,10 @@ export interface TagInputProps<T>
    * Add Tag on blur
    */
   addOnBlur?: boolean;
+  /**
+   * Set the text to display with read-only state when there is no data. Default to 'No data'
+   */
+  noDataFallbackText?: string;
 }
 
 export type TagInputValues =
diff --git a/packages/react-components/src/components/Textarea/Textarea.stories.tsx b/packages/react-components/src/components/Textarea/Textarea.stories.tsx
index 75be22f69..0187b8647 100644
--- a/packages/react-components/src/components/Textarea/Textarea.stories.tsx
+++ b/packages/react-components/src/components/Textarea/Textarea.stories.tsx
@@ -40,5 +40,8 @@ export const States = (): React.ReactElement => (
         placeholder={placeholderText}
       />
     </StoryDescriptor>
+    <StoryDescriptor title="Read only">
+      <Textarea readOnly value={exampleText} placeholder={placeholderText} />
+    </StoryDescriptor>
   </>
 );
diff --git a/packages/react-components/src/components/Textarea/Textarea.tsx b/packages/react-components/src/components/Textarea/Textarea.tsx
index 824d7b01a..f2da47127 100644
--- a/packages/react-components/src/components/Textarea/Textarea.tsx
+++ b/packages/react-components/src/components/Textarea/Textarea.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 
 import cx from 'clsx';
 
+import { useReadOnlyFormFieldContext } from '../../providers/ReadOnlyFormFieldProvider';
+import { ReadOnlyText } from '../ReadOnlyText';
 import { Text } from '../Typography';
 
 import styles from './Textarea.module.scss';
@@ -12,11 +14,17 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   className?: string;
   error?: boolean;
+  noDataFallbackText?: string;
 }
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, error, ...textareaProps }, ref) => {
+  (
+    { className, noDataFallbackText = 'No data', error, ...textareaProps },
+    ref
+  ) => {
     const { disabled, onBlur, onFocus } = textareaProps;
+    const { readOnly } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnly || textareaProps.readOnly;
     const [isFocused, setIsFocused] = React.useState(false);
     const mergedClassNames = cx(className, styles[baseClass], {
       [styles[`${baseClass}--disabled`]]: disabled,
@@ -38,6 +46,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       onFocus?.(e);
     };
 
+    if (computedReadOnly) {
+      return (
+        <ReadOnlyText
+          value={textareaProps?.value?.toString()}
+          noDataFallbackText={noDataFallbackText}
+        />
+      );
+    }
+
     return (
       <Text as="div" className={mergedClassNames}>
         <textarea
diff --git a/packages/react-components/src/providers/ReadOnlyFormFieldProvider.tsx b/packages/react-components/src/providers/ReadOnlyFormFieldProvider.tsx
new file mode 100644
index 000000000..4f3d434c4
--- /dev/null
+++ b/packages/react-components/src/providers/ReadOnlyFormFieldProvider.tsx
@@ -0,0 +1,43 @@
+import { ReactNode, createContext, useContext, useState } from 'react';
+import type { FC } from 'react';
+
+interface ReadOnlyFormFieldContextValue {
+  readOnly: boolean;
+  isEmpty: boolean;
+  setIsEmpty: (isEmpty: boolean) => void;
+}
+
+const ReadOnlyFormFieldContext = createContext<ReadOnlyFormFieldContextValue>({
+  readOnly: false,
+  isEmpty: false,
+  setIsEmpty: () => {},
+});
+
+export interface ReadOnlyFormFieldContextProps {
+  readOnly?: boolean;
+  children?: ReactNode;
+  defaultIsEmpty?: boolean;
+}
+
+export const ReadOnlyFormFieldContextProvider: FC<
+  ReadOnlyFormFieldContextProps
+> = ({ children, readOnly = false, defaultIsEmpty = false }) => {
+  const [isEmpty, setIsEmpty] = useState(defaultIsEmpty);
+
+  return (
+    <ReadOnlyFormFieldContext.Provider
+      value={{
+        readOnly,
+        isEmpty,
+        setIsEmpty,
+      }}
+    >
+      {children}
+    </ReadOnlyFormFieldContext.Provider>
+  );
+};
+
+export const useReadOnlyFormFieldContext = () =>
+  useContext(ReadOnlyFormFieldContext);
+
+export default ReadOnlyFormFieldContext;