diff --git a/.changeset/shy-cameras-tickle-duplicate.md b/.changeset/shy-cameras-tickle-duplicate.md
new file mode 100644
index 00000000000..5a786bcae36
--- /dev/null
+++ b/.changeset/shy-cameras-tickle-duplicate.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": minor
+---
+
+Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state
diff --git a/.changeset/shy-cameras-tickle.md b/.changeset/shy-cameras-tickle.md
new file mode 100644
index 00000000000..8463171d1a8
--- /dev/null
+++ b/.changeset/shy-cameras-tickle.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
index 58a1183893b..47c3fb6c8f2 100644
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -4,7 +4,7 @@ import "./layout.css";
 export const parameters = {
   options: {
     storySort: {
-      method: "",
+      method: "alphabetical",
       order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
       locales: "",
     },
diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
index 33343edb516..15d3000fb5f 100644
--- a/@navikt/core/css/date.css
+++ b/@navikt/core/css/date.css
@@ -282,3 +282,9 @@
 .navds-date__popover:where(.navds-popover) {
   border: none;
 }
+
+/* Readonly */
+
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+}
diff --git a/@navikt/core/css/form/form.css b/@navikt/core/css/form/form.css
index 6c19bf25774..31001f882cc 100644
--- a/@navikt/core/css/form/form.css
+++ b/@navikt/core/css/form/form.css
@@ -36,3 +36,9 @@
 .navds-form-field__subdescription {
   color: var(--ac-form-subdescription, var(--a-text-subtle));
 }
+
+.navds-form-field__readonly-icon {
+  margin-right: var(--a-spacing-2);
+  vertical-align: middle;
+  margin-bottom: 3px;
+}
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index b6cacca1c96..435d6dec887 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -22,6 +22,9 @@
   cursor: pointer;
   display: flex;
   gap: var(--a-spacing-2);
+
+  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -102,7 +105,7 @@
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
-  border-radius: 1px; /* Custom value OK */
+  border-radius: 1px;
   flex-shrink: 0;
 }
 
@@ -244,3 +247,53 @@
 .navds-radio--disabled > .navds-radio__label {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--a-text-default);
+}
+
+.navds-checkbox--readonly
+  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-checkbox--readonly
+  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
+.navds-radio--readonly
+  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-radio__label::before {
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  background-color: var(--a-icon-subtle);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__ac-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--a-icon-subtle);
+}
diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
index d56f5665ee8..f0230b52ab2 100644
--- a/@navikt/core/css/form/select.css
+++ b/@navikt/core/css/form/select.css
@@ -79,3 +79,9 @@
 .navds-select__input:disabled > option {
   color: var(--a-text-default);
 }
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
index f36c5c036dc..d62157d7180 100644
--- a/@navikt/core/css/form/switch.css
+++ b/@navikt/core/css/form/switch.css
@@ -178,3 +178,40 @@
 .navds-switch__input:disabled ~ .navds-switch__label-wrapper {
   cursor: not-allowed;
 }
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(20px);
+  }
+}
diff --git a/@navikt/core/css/form/text-field.css b/@navikt/core/css/form/text-field.css
index 1822f9aef2d..8effbba6ac8 100644
--- a/@navikt/core/css/form/text-field.css
+++ b/@navikt/core/css/form/text-field.css
@@ -73,11 +73,10 @@
   cursor: not-allowed;
 }
 
-.navds-text-field__input[readonly] {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }
 
 /**
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index 60d3a28e8c3..af7eddb6769 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -99,9 +99,8 @@
   cursor: not-allowed;
 }
 
-.navds-textarea__input[readonly] {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
 }
diff --git a/@navikt/core/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 871ca97a288..f76edc17d92 100644
--- a/@navikt/core/react/src/date/DateInput.tsx
+++ b/@navikt/core/react/src/date/DateInput.tsx
@@ -4,6 +4,7 @@ import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -57,6 +58,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     errorId,
     showErrorMsg,
     hasError,
+    readOnly,
   } = useFormField(props, conditionalVariables.prefix);
 
   return (
@@ -71,6 +73,8 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-date__field--error": hasError,
           "navds-form-field--disabled": !!inputProps.disabled,
           "navds-text-field--disabled": !!inputProps.disabled,
+          "navds-text-field--readonly": readOnly,
+          "navds-date__field--readonly": readOnly,
         }
       )}
     >
@@ -81,6 +85,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
+        <ReadOnlyIcon readOnly={readOnly} />
         {label}
       </Label>
       {!!description && (
@@ -102,6 +107,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...inputProps}
           autoComplete="off"
           aria-controls={ariaId}
+          readOnly={readOnly}
           className={cl(
             "navds-date__field-input",
             "navds-text-field__input",
@@ -111,8 +117,8 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           size={14}
         />
         <button
-          disabled={inputProps.disabled}
-          tabIndex={open ? -1 : 0}
+          disabled={inputProps.disabled || readOnly}
+          tabIndex={readOnly ? -1 : open ? -1 : 0}
           onClick={() => onOpen()}
           type="button"
           className="navds-date__field-button"
diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
index fecd86dc6d1..80c6fac84a9 100644
--- a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
+++ b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
@@ -341,3 +341,25 @@ export const Size = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input
+          size="medium"
+          {...inputProps}
+          value="01.02.2021"
+          label="Velg dato"
+          readOnly
+        />
+      </DatePicker>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/date/hooks/useDatepicker.tsx b/@navikt/core/react/src/date/hooks/useDatepicker.tsx
index 41e648a0a8e..613aa78c809 100644
--- a/@navikt/core/react/src/date/hooks/useDatepicker.tsx
+++ b/@navikt/core/react/src/date/hooks/useDatepicker.tsx
@@ -204,6 +204,9 @@ export const useDatepicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,
diff --git a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx
index a4916c5c3e8..0491d3a7c1f 100644
--- a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx
+++ b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx
@@ -201,6 +201,9 @@ export const useMonthpicker = (
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && handleOpen(true);
     let day = parseDate(
       e.target.value,
diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx
index 4d2afb58cb6..120e48f1ba7 100644
--- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx
+++ b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx
@@ -321,6 +321,9 @@ export const useRangeDatepicker = (
   };
 
   const handleFocus = (e, src: RangeT) => {
+    if (e.target.readOnly) {
+      return;
+    }
     !open && openOnFocus && setOpen(true);
     let day = parseDate(
       e.target.value,
diff --git a/@navikt/core/react/src/form/ConfirmationPanel.tsx b/@navikt/core/react/src/form/ConfirmationPanel.tsx
index c8a3ad63e5a..f32fd45b056 100644
--- a/@navikt/core/react/src/form/ConfirmationPanel.tsx
+++ b/@navikt/core/react/src/form/ConfirmationPanel.tsx
@@ -6,7 +6,7 @@ import { useFormField } from "./useFormField";
 export interface ConfirmationPanelProps
   extends Omit<
     CheckboxProps,
-    "children" | "indeterminate" | "hideLabel" | "error"
+    "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
   > {
   /**
    * Additional information on panel
diff --git a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
index e572ba7ee60..3217e8425aa 100644
--- a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
+++ b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
@@ -3,6 +3,7 @@ import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export type FieldsetContextProps = {
   /**
@@ -21,6 +22,10 @@ export type FieldsetContextProps = {
    * Sets fieldset and all form-children to disabled
    */
   disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 };
 
 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
@@ -47,6 +52,7 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
+  nativeReadOnly?: boolean;
 }
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
@@ -57,6 +63,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       showErrorMsg,
       hasError,
       size,
+      readOnly,
       inputDescriptionId,
     } = useFieldset(props);
 
@@ -69,6 +76,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
+      nativeReadOnly = true,
       ...rest
     } = props;
 
@@ -82,17 +90,21 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           }),
           size,
           disabled: props.disabled ?? false,
+          readOnly,
         }}
       >
         <fieldset
-          {...omit(rest, ["errorId", "error", "size"])}
+          {...omit(rest, ["errorId", "error", "size", "readOnly"])}
           {...inputProps}
           ref={ref}
           className={cl(
             className,
             "navds-fieldset",
             `navds-fieldset--${size}`,
-            { "navds-fieldset--error": hasError }
+            {
+              "navds-fieldset--error": hasError,
+              "navds-fieldset--readonly": readOnly,
+            }
           )}
         >
           <Label
@@ -102,6 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
+            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
             {legend}
           </Label>
           {!!description && (
diff --git a/@navikt/core/react/src/form/ReadOnlyIcon.tsx b/@navikt/core/react/src/form/ReadOnlyIcon.tsx
new file mode 100644
index 00000000000..6b17e8f440e
--- /dev/null
+++ b/@navikt/core/react/src/form/ReadOnlyIcon.tsx
@@ -0,0 +1,20 @@
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+export const ReadOnlyIcon = ({
+  readOnly,
+  nativeReadOnly = true,
+}: {
+  readOnly?: boolean;
+  nativeReadOnly?: boolean;
+}) => {
+  if (readOnly) {
+    return (
+      <PadlockLockedFillIcon
+        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
+        className="navds-form-field__readonly-icon"
+      />
+    );
+  }
+  return null;
+};
diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx
index 4f177a4bf8d..517258e3229 100644
--- a/@navikt/core/react/src/form/Select.tsx
+++ b/@navikt/core/react/src/form/Select.tsx
@@ -4,6 +4,7 @@ import React, { forwardRef, SelectHTMLAttributes } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 export interface SelectProps
   extends FormFieldProps,
@@ -55,7 +56,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       hasError,
       size,
       inputDescriptionId,
-    } = useFormField(props, "textField");
+      readOnly,
+    } = useFormField(props, "select");
 
     const {
       children,
@@ -68,6 +70,27 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       ...rest
     } = props;
 
+    const readOnlyEventHandlers = {
+      onMouseDown: (evt) => {
+        // NOTE: does not prevent click
+        if (readOnly) {
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          evt.target.focus();
+        }
+      },
+      onKeyDown: (evt) => {
+        if (
+          readOnly &&
+          ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
+            evt.key
+          )
+        ) {
+          evt.preventDefault();
+        }
+      },
+    };
+
     return (
       <div
         className={cl(
@@ -77,6 +100,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
+            "navds-select--readonly": readOnly,
           }
         )}
       >
@@ -87,6 +111,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
           {label}
         </Label>
         {!!description && (
@@ -103,8 +128,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         )}
         <div className="navds-select__container" style={style}>
           <select
-            {...omit(rest, ["error", "errorId", "size"])}
+            {...omit(rest, ["error", "errorId", "size", "readOnly"])}
             {...inputProps}
+            {...readOnlyEventHandlers}
             ref={ref}
             className={cl(
               "navds-select__input",
diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index 28f41e0678c..6cf8548ebaa 100644
--- a/@navikt/core/react/src/form/Switch.tsx
+++ b/@navikt/core/react/src/form/Switch.tsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 const SelectedIcon = () => (
   <svg
@@ -68,7 +69,7 @@ export interface SwitchProps
  */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   (props, ref) => {
-    const { inputProps, size } = useFormField(props, "switch");
+    const { inputProps, size, readOnly } = useFormField(props, "switch");
 
     const {
       children,
@@ -90,11 +91,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(e.target.checked);
-      props.onChange && props.onChange(e);
-    };
-
     return (
       <div
         className={cl(
@@ -105,18 +101,32 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           {
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
+            "navds-switch--readonly": readOnly,
           }
         )}
       >
         <input
-          {...omit(rest, ["size"])}
+          {...omit(rest, ["size", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           disabled={inputProps.disabled ?? loading}
           checked={checkedProp}
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => handleChange(e)}
+          onChange={(e) => {
+            if (readOnly) {
+              return;
+            }
+            setChecked(e.target.checked);
+            props.onChange && props.onChange(e);
+          }}
+          onClick={(e) => {
+            if (readOnly) {
+              e.preventDefault();
+              return;
+            }
+            props?.onClick?.(e);
+          }}
           className={cl(className, "navds-switch__input")}
         />
         <span className="navds-switch__track">
@@ -136,6 +146,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
+              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
               {children}
             </BodyShort>
             {description && (
diff --git a/@navikt/core/react/src/form/TextField.tsx b/@navikt/core/react/src/form/TextField.tsx
index b59b8ef47f6..959ef2a74f7 100644
--- a/@navikt/core/react/src/form/TextField.tsx
+++ b/@navikt/core/react/src/form/TextField.tsx
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -62,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       htmlSize,
       hideLabel = false,
       type = "text",
+      readOnly,
       ...rest
     } = props;
 
@@ -75,6 +77,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--readonly": readOnly,
           }
         )}
       >
@@ -85,6 +88,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
 
@@ -105,6 +109,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {...inputProps}
           ref={ref}
           type={type}
+          readOnly={readOnly}
           className={cl(
             "navds-text-field__input",
             "navds-body-short",
diff --git a/@navikt/core/react/src/form/Textarea.tsx b/@navikt/core/react/src/form/Textarea.tsx
index 9f879197731..b2823017a09 100644
--- a/@navikt/core/react/src/form/Textarea.tsx
+++ b/@navikt/core/react/src/form/Textarea.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
+import { ReadOnlyIcon } from "./ReadOnlyIcon";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -85,6 +86,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       hideLabel = false,
       resize,
       i18n,
+      readOnly,
       ...rest
     } = props;
 
@@ -115,6 +117,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           `navds-form-field--${size}`,
           {
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
           }
@@ -127,6 +130,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
         {!!description && (
@@ -152,6 +156,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             }
             minRows={getMinRows()}
             ref={ref}
+            readOnly={readOnly}
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index da611a540ab..07aae01836e 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -4,6 +4,7 @@ import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { FormFieldProps } from "../useFormField";
 import useCheckbox from "./useCheckbox";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 
 export interface CheckboxProps
   extends FormFieldProps,
@@ -42,7 +43,7 @@ export interface CheckboxProps
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { inputProps, hasError, size } = useCheckbox(props);
+    const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
     return (
       <div
@@ -53,6 +54,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
+            "navds-checkbox--readonly": readOnly,
           }
         )}
       >
@@ -65,6 +67,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "hideLabel",
             "indeterminate",
             "errorId",
+            "readOnly",
           ])}
           {...inputProps}
           type="checkbox"
@@ -89,6 +92,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             })}
           >
             <BodyShort as="span" size={size}>
+              {!nested && (
+                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              )}
               {props.children}
             </BodyShort>
             {props.description && (
diff --git a/@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx b/@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx
index 0a5243f6218..f2ed41a53aa 100644
--- a/@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx
+++ b/@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx
@@ -81,6 +81,7 @@ export const CheckboxGroup = forwardRef<
           "navds-checkbox-group",
           `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 29ae8dbc13d..3c885cd343c 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react";
 
 export default {
   title: "ds-react/Checkbox",
@@ -190,3 +190,37 @@ export const Indeterminate = () => {
     </>
   );
 };
+
+export const Readonly = () => (
+  <div className="colgap">
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      readOnly
+    >
+      <Checkbox value="banan">Banan</Checkbox>
+      <Checkbox value="eple">Eple</Checkbox>
+      <Checkbox value="druer" indeterminate>
+        Druer
+      </Checkbox>
+    </CheckboxGroup>
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue={["Eple"]}
+      readOnly
+    >
+      <Checkbox value="eple" description="Epler kommer i 4 varianter">
+        Eple
+      </Checkbox>
+      <Checkbox value="banan">Banan</Checkbox>
+    </CheckboxGroup>
+    <hr />
+    <Checkbox value="tekst1" readOnly>
+      Eple single
+    </Checkbox>
+    <Checkbox value="tekst1" checked readOnly>
+      Banan single
+    </Checkbox>
+  </div>
+);
diff --git a/@navikt/core/react/src/form/checkbox/useCheckbox.ts b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
index e519758e147..40bbe84ba8f 100644
--- a/@navikt/core/react/src/form/checkbox/useCheckbox.ts
+++ b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
@@ -10,7 +10,7 @@ import { omit } from "../..";
 const useCheckbox = ({ children, ...props }: CheckboxProps) => {
   const checkboxGroup = useContext(CheckboxGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "checkbox"
   );
@@ -30,6 +30,8 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
 
   return {
     ...rest,
+    readOnly,
+    nested: !!checkboxGroup,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
@@ -39,9 +41,19 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
         ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         checkboxGroup && checkboxGroup.toggleValue(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
     },
   };
 };
diff --git a/@navikt/core/react/src/form/radio/Radio.tsx b/@navikt/core/react/src/form/radio/Radio.tsx
index 8d72601cf55..0dee1b1ebee 100644
--- a/@navikt/core/react/src/form/radio/Radio.tsx
+++ b/@navikt/core/react/src/form/radio/Radio.tsx
@@ -6,7 +6,7 @@ import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
 
 export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Radio label
@@ -23,17 +23,18 @@ export interface RadioProps
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError } = useRadio(props);
+  const { inputProps, size, hasError, readOnly } = useRadio(props);
 
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
         "navds-radio--disabled": inputProps.disabled,
+        "navds-radio--readonly": readOnly,
       })}
     >
       <input
-        {...omit(props, ["children", "size", "description"])}
+        {...omit(props, ["children", "size", "description", "readOnly"])}
         {...inputProps}
         className="navds-radio__input"
         ref={ref}
diff --git a/@navikt/core/react/src/form/radio/RadioGroup.tsx b/@navikt/core/react/src/form/radio/RadioGroup.tsx
index 8352741e604..5012776bc8c 100644
--- a/@navikt/core/react/src/form/radio/RadioGroup.tsx
+++ b/@navikt/core/react/src/form/radio/RadioGroup.tsx
@@ -65,6 +65,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
       value,
       onChange = () => {},
       required,
+      readOnly,
       ...rest
     },
     ref
@@ -76,12 +77,14 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     return (
       <Fieldset
         {...rest}
+        readOnly={readOnly}
         ref={ref}
         className={cl(
           className,
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        nativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 81a37ecca44..5444a9e83f6 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -92,3 +92,30 @@ export const GroupDescription = () => (
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );
+
+export const UUDemo = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvilken frukt vil du ha?"
+      description="Du kan bare velge en frukt"
+      defaultValue="eple"
+      readOnly
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan" description="Bananer er importert fra X">
+        Banan
+      </Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Når har du ferie?"
+      defaultValue="1"
+      readOnly
+      error="du må velge en ferie"
+    >
+      <Radio value="1">August</Radio>
+      <Radio value="2">Juli</Radio>
+      <Radio value="3">Juni</Radio>
+    </RadioGroup>
+  </div>
+);
diff --git a/@navikt/core/react/src/form/radio/useRadio.ts b/@navikt/core/react/src/form/radio/useRadio.ts
index 82fbc762058..3787badb28c 100644
--- a/@navikt/core/react/src/form/radio/useRadio.ts
+++ b/@navikt/core/react/src/form/radio/useRadio.ts
@@ -10,7 +10,7 @@ import { omit } from "../..";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(
+  const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
     "radio"
   );
@@ -25,6 +25,7 @@ export const useRadio = (props: RadioProps) => {
 
   return {
     ...rest,
+    readOnly,
     inputProps: {
       ...inputProps,
       name: radioGroup?.name,
@@ -37,9 +38,19 @@ export const useRadio = (props: RadioProps) => {
           ? undefined
           : radioGroup?.value === props.value,
       onChange: (e) => {
+        if (readOnly) {
+          return;
+        }
         props.onChange && props.onChange(e);
         radioGroup?.onChange && radioGroup.onChange(props.value);
       },
+      onClick: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          return;
+        }
+        props?.onClick?.(e);
+      },
       required: radioGroup?.required,
       type: "radio",
     },
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index 00b39d33b76..ca081e0a0d2 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -27,7 +27,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -221,7 +221,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["error", "errorId", "size"])}
+              {...omit(rest, ["error", "errorId", "size", "readOnly"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
diff --git a/@navikt/core/react/src/form/stories/select.stories.tsx b/@navikt/core/react/src/form/stories/select.stories.tsx
index 70b41e05279..6d74ccf3fb0 100644
--- a/@navikt/core/react/src/form/stories/select.stories.tsx
+++ b/@navikt/core/react/src/form/stories/select.stories.tsx
@@ -114,3 +114,20 @@ export const HideLabel = () => {
     </Select>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Select
+        label="Hvilkets land er du fra?"
+        description="Velg landet du bor 180 dagen i året"
+        readOnly
+      >
+        {content}
+      </Select>
+      <Select label="Hvilkets land er du fra?" readOnly error="feilmelding">
+        {content}
+      </Select>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/stories/switch.stories.tsx b/@navikt/core/react/src/form/stories/switch.stories.tsx
index 49357894773..a01b7f8693a 100644
--- a/@navikt/core/react/src/form/stories/switch.stories.tsx
+++ b/@navikt/core/react/src/form/stories/switch.stories.tsx
@@ -116,3 +116,17 @@ export const HideLabel = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Switch description="Slår av alle notifikasjoner" readOnly>
+        Notifikasjoner
+      </Switch>
+
+      <Switch checked readOnly>
+        Notifikasjoner
+      </Switch>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/stories/text-field.stories.tsx b/@navikt/core/react/src/form/stories/text-field.stories.tsx
index a4a14b29ba5..141e88d3842 100644
--- a/@navikt/core/react/src/form/stories/text-field.stories.tsx
+++ b/@navikt/core/react/src/form/stories/text-field.stories.tsx
@@ -83,3 +83,17 @@ export const Disabled = () => {
 export const HideLabel = () => {
   return <TextField label="Ipsum enim quis culpa" hideLabel />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <TextField
+        label="Bosted"
+        description="Skriv bosted i Norge"
+        readOnly
+        value="Oslo"
+      />
+      <TextField label="Bosted" readOnly error="feilmelding" value="Oslo" />
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
index b665dba4f29..1cd7a843329 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -120,3 +120,22 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        description="Beskriv i korte punkter"
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        readOnly
+      />
+      <Textarea
+        label="På hvilket grunnlag har du tatt denne vurderingen?"
+        readOnly
+        value="Denne vurderingen ble gjort på grunnlag av X og Y"
+        error="feilmelding"
+      />
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index 3b0213492a9..6059264acda 100644
--- a/@navikt/core/react/src/form/useFormField.ts
+++ b/@navikt/core/react/src/form/useFormField.ts
@@ -29,6 +29,10 @@ export interface FormFieldProps {
    * Override internal id
    */
   id?: string;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
 }
 
 /**
@@ -46,8 +50,24 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
   const inputDescriptionId = `${prefix}-description-${genId}`;
 
   const disabled = fieldset?.disabled || props.disabled;
-  const hasError: boolean = !disabled && !!(error || fieldset?.error);
-  const showErrorMsg = !disabled && !!error && typeof error !== "boolean";
+  const readOnly =
+    ((fieldset?.readOnly || props.readOnly) && !disabled) || undefined;
+
+  const hasError: boolean =
+    !disabled && !readOnly && !!(error || fieldset?.error);
+  const showErrorMsg =
+    !disabled && !readOnly && !!error && typeof error !== "boolean";
+
+  const ariaInvalid = { ...(hasError ? { "aria-invalid": true } : {}) };
+
+  if ((props as any)?.required && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:"
+    );
+    console.warn(
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471"
+    );
+  }
 
   return {
     showErrorMsg,
@@ -55,9 +75,10 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
     errorId,
     inputDescriptionId,
     size: size ?? fieldset?.size ?? "medium",
+    readOnly,
     inputProps: {
       id,
-      "aria-invalid": hasError,
+      ...ariaInvalid,
       "aria-describedby":
         cl(props["aria-describedby"], {
           [inputDescriptionId]:
@@ -65,6 +86,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
           [errorId]: showErrorMsg,
           [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
         }) || undefined,
+
       disabled,
     },
   };
diff --git a/aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx b/aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx
index 6a787ac1798..7aaa7fcc4b1 100644
--- a/aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx
@@ -25,5 +25,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx b/aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx
new file mode 100644
index 00000000000..c53043d648e
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx
@@ -0,0 +1,30 @@
+import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const handleChange = (val: any[]) => console.log(val);
+
+  return (
+    <CheckboxGroup
+      legend="Hvor vil du sitte?"
+      onChange={(val: any[]) => handleChange(val)}
+      value={["Midterst"]}
+      readOnly
+    >
+      <Checkbox value="Bakerst">Bakerst</Checkbox>
+      <Checkbox value="Midterst">Midterst</Checkbox>
+      <Checkbox value="Fremst">Fremst</Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/datepicker/readonly.tsx b/aksel.nav.no/website/pages/eksempler/datepicker/readonly.tsx
new file mode 100644
index 00000000000..e5a2328a6ac
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/datepicker/readonly.tsx
@@ -0,0 +1,27 @@
+import { DatePicker, useDatepicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" readOnly />
+    </DatePicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx b/aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx
index b09555a570f..7971c30283e 100644
--- a/aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx
+++ b/aksel.nav.no/website/pages/eksempler/monthpicker/input.tsx
@@ -11,9 +11,7 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input {...inputProps} label="Velg månede" />
-        </div>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
       </MonthPicker>
       {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
     </div>
diff --git a/aksel.nav.no/website/pages/eksempler/monthpicker/readonly.tsx b/aksel.nav.no/website/pages/eksempler/monthpicker/readonly.tsx
new file mode 100644
index 00000000000..24d01201684
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/monthpicker/readonly.tsx
@@ -0,0 +1,28 @@
+import { MonthPicker, useMonthpicker } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const { monthpickerProps, inputProps } = useMonthpicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Aug 23 2025"),
+    defaultSelected: new Date("Aug 28 2020"),
+    onMonthChange: console.log,
+  });
+
+  return (
+    <MonthPicker {...monthpickerProps}>
+      <MonthPicker.Input {...inputProps} label="Velg månede" readOnly />
+    </MonthPicker>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 99,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx b/aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx
index ca2d7957e26..923c047fa29 100644
--- a/aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx
+++ b/aksel.nav.no/website/pages/eksempler/monthpicker/validation.tsx
@@ -16,13 +16,11 @@ const Example = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps}>
-        <div className="grid gap-4">
-          <MonthPicker.Input
-            {...inputProps}
-            label="Velg månede"
-            error={hasError && "Du må velge månede"}
-          />
-        </div>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg månede"
+          error={hasError && "Du må velge månede"}
+        />
       </MonthPicker>
     </div>
   );
diff --git a/aksel.nav.no/website/pages/eksempler/radio/disabled.tsx b/aksel.nav.no/website/pages/eksempler/radio/disabled.tsx
index e53479db3e0..39cafa8a128 100644
--- a/aksel.nav.no/website/pages/eksempler/radio/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/radio/disabled.tsx
@@ -25,5 +25,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/radio/readonly.tsx b/aksel.nav.no/website/pages/eksempler/radio/readonly.tsx
new file mode 100644
index 00000000000..c3a64d67335
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/radio/readonly.tsx
@@ -0,0 +1,30 @@
+import { Radio, RadioGroup } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  const handleChange = (val: any) => console.log(val);
+
+  return (
+    <RadioGroup
+      legend="Velg din aldersgruppe."
+      onChange={(val: any) => handleChange(val)}
+      value="20"
+      readOnly
+    >
+      <Radio value="10">10-20 år</Radio>
+      <Radio value="20">21-45 år</Radio>
+      <Radio value="40">46-80 år</Radio>
+    </RadioGroup>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/select/disabled.tsx b/aksel.nav.no/website/pages/eksempler/select/disabled.tsx
index bf37d5bf38f..edb2cf12d42 100644
--- a/aksel.nav.no/website/pages/eksempler/select/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/select/disabled.tsx
@@ -20,5 +20,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/select/readonly.tsx b/aksel.nav.no/website/pages/eksempler/select/readonly.tsx
new file mode 100644
index 00000000000..abd110ccf5f
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/select/readonly.tsx
@@ -0,0 +1,24 @@
+import { Select } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Select label="Hvilket land har du bosted i." readOnly value="sverige">
+      <option value="">Velg land</option>
+      <option value="norge">Norge</option>
+      <option value="sverige">Sverige</option>
+      <option value="danmark">Danmark</option>
+    </Select>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/switch/disabled.tsx b/aksel.nav.no/website/pages/eksempler/switch/disabled.tsx
index 92324c727e8..ba0b10da892 100644
--- a/aksel.nav.no/website/pages/eksempler/switch/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/switch/disabled.tsx
@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 7,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/switch/readonly.tsx b/aksel.nav.no/website/pages/eksempler/switch/readonly.tsx
new file mode 100644
index 00000000000..472300c99f0
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/switch/readonly.tsx
@@ -0,0 +1,24 @@
+import { Switch } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-4">
+      <Switch readOnly>Slå på notifikasjoner</Switch>
+      <Switch readOnly checked>
+        Slå på notifikasjoner
+      </Switch>
+    </div>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/textarea/disabled.tsx b/aksel.nav.no/website/pages/eksempler/textarea/disabled.tsx
index 7b1510c124f..16d37c2d6e2 100644
--- a/aksel.nav.no/website/pages/eksempler/textarea/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/textarea/disabled.tsx
@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 10,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/textarea/readonly.tsx b/aksel.nav.no/website/pages/eksempler/textarea/readonly.tsx
new file mode 100644
index 00000000000..9cc2f8275fb
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/textarea/readonly.tsx
@@ -0,0 +1,17 @@
+import { Textarea } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <Textarea label="Har du noen tilbakemeldinger?" readOnly />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/textfield/disabled.tsx b/aksel.nav.no/website/pages/eksempler/textfield/disabled.tsx
index cb3df8709c6..9c4f6157e8b 100644
--- a/aksel.nav.no/website/pages/eksempler/textfield/disabled.tsx
+++ b/aksel.nav.no/website/pages/eksempler/textfield/disabled.tsx
@@ -13,5 +13,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 10,
+  index: 99,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/textfield/readonly.tsx b/aksel.nav.no/website/pages/eksempler/textfield/readonly.tsx
new file mode 100644
index 00000000000..2c04444f8d7
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/textfield/readonly.tsx
@@ -0,0 +1,17 @@
+import { TextField } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return <TextField label="Har du noen tilbakemeldinger?" readOnly />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 98,
+};
diff --git a/yarn.lock b/yarn.lock
index 3639811bc08..94aafd9faac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3787,7 +3787,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.4.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.5.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3814,8 +3814,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^4.4.2
-    "@navikt/ds-tokens": ^4.4.2
+    "@navikt/ds-css": ^4.5.0
+    "@navikt/ds-tokens": ^4.5.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3832,7 +3832,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 4.4.2
+    "@navikt/ds-css": 4.5.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3856,11 +3856,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@4.4.2, @navikt/ds-css@^4.4.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@4.5.0, @navikt/ds-css@^4.5.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^4.4.2
+    "@navikt/ds-tokens": ^4.5.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3873,12 +3873,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@4.4.2, @navikt/ds-react@^4.4.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@4.5.0, @navikt/ds-react@^4.5.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^4.4.2
+    "@navikt/aksel-icons": ^4.5.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3914,11 +3914,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^4.4.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^4.4.2
+    "@navikt/ds-tokens": ^4.5.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3929,7 +3929,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^4.4.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7996,11 +7996,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^4.4.2
-    "@navikt/ds-css": ^4.4.2
-    "@navikt/ds-react": ^4.4.2
-    "@navikt/ds-tailwind": ^4.4.2
-    "@navikt/ds-tokens": ^4.4.2
+    "@navikt/aksel-icons": ^4.5.0
+    "@navikt/ds-css": ^4.5.0
+    "@navikt/ds-react": ^4.5.0
+    "@navikt/ds-tailwind": ^4.5.0
+    "@navikt/ds-tokens": ^4.5.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22408,8 +22408,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 4.4.2
-    "@navikt/ds-react": 4.4.2
+    "@navikt/ds-css": 4.5.0
+    "@navikt/ds-react": 4.5.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0