From a11fc174ccd4e2c00e1d7a169d615ece25020961 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 11:59:57 +0200
Subject: [PATCH 01/26] :art: radio & checkbox readOnly

---
 .../core/react/src/form/Fieldset/Fieldset.tsx   | 13 +++++++++++--
 .../core/react/src/form/checkbox/Checkbox.tsx   |  5 ++++-
 .../src/form/checkbox/checkbox.stories.tsx      | 16 ++++++++++++++++
 .../core/react/src/form/checkbox/useCheckbox.ts | 13 ++++++++++++-
 @navikt/core/react/src/form/radio/Radio.tsx     |  8 +++++---
 .../core/react/src/form/radio/radio.stories.tsx |  8 ++++++++
 @navikt/core/react/src/form/radio/useRadio.ts   | 13 ++++++++++++-
 @navikt/core/react/src/form/useFormField.ts     | 17 ++++++++++++++---
 8 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
index e572ba7ee60..4cdaa353294 100644
--- a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
+++ b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
@@ -21,6 +21,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>(
@@ -57,6 +61,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       showErrorMsg,
       hasError,
       size,
+      readOnly,
       inputDescriptionId,
     } = useFieldset(props);
 
@@ -82,17 +87,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
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index da611a540ab..107ae188b08 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -42,7 +42,7 @@ export interface CheckboxProps
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { inputProps, hasError, size } = useCheckbox(props);
+    const { inputProps, hasError, size, readOnly } = useCheckbox(props);
 
     return (
       <div
@@ -53,6 +53,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
+            "navds-checkbox--readonly": readOnly,
           }
         )}
       >
@@ -65,10 +66,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "hideLabel",
             "indeterminate",
             "errorId",
+            "readOnly",
           ])}
           {...inputProps}
           type="checkbox"
           className="navds-checkbox__input"
+          aria-readonly={readOnly}
           aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
           ref={(el) => {
             if (el) {
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 29ae8dbc13d..c3af7110481 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -190,3 +190,19 @@ export const Indeterminate = () => {
     </>
   );
 };
+
+export const Readonly = () => (
+  <div className="colgap">
+    <CheckboxGroup legend="Group legend" defaultValue={["tekst2"]} readOnly>
+      <Checkbox value="tekst">Checkboxtekst</Checkbox>
+      <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+    </CheckboxGroup>
+    <hr />
+    <Checkbox value="tekst1" readOnly>
+      Checkboxtekst
+    </Checkbox>
+    <Checkbox value="tekst1" checked readOnly>
+      Checkboxtekst
+    </Checkbox>
+  </div>
+);
diff --git a/@navikt/core/react/src/form/checkbox/useCheckbox.ts b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
index e519758e147..4830a372b56 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,7 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
 
   return {
     ...rest,
+    readOnly,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
@@ -39,9 +40,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..445f58492e8 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,20 +23,22 @@ 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}
+        aria-readonly={readOnly}
       />
       <label htmlFor={inputProps.id} className="navds-radio__label">
         <span className="navds-radio__content">
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 81a37ecca44..4ec543c0724 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -92,3 +92,11 @@ export const GroupDescription = () => (
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
 );
+
+export const Readonly = () => (
+  <RadioGroup legend="Group legend" defaultValue="tekst2" readOnly>
+    <Radio value="tekst">Radiotekst</Radio>
+    <Radio value="tekst2">Radiotekst</Radio>
+    <Radio value="tekst3">Radiotekst</Radio>
+  </RadioGroup>
+);
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/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index 3b0213492a9..88f0f11af31 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,14 @@ 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;
+
+  const hasError: boolean =
+    !disabled && !readOnly && !!(error || fieldset?.error);
+  const showErrorMsg =
+    !disabled && !readOnly && !!error && typeof error !== "boolean";
+
+  const ariaInvalid = { ...(hasError ? { "aria-invalid": true } : {}) };
 
   return {
     showErrorMsg,
@@ -55,9 +65,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]:

From 945fecf587152b947168f95e0bd8bbbfd32a25ca Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 12:08:11 +0200
Subject: [PATCH 02/26] :art: Select readonly

---
 @navikt/core/react/src/form/Select.tsx        | 24 +++++++++++++++++--
 .../react/src/form/stories/select.stories.tsx |  8 +++++++
 @navikt/core/react/src/form/useFormField.ts   |  2 +-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx
index 4f177a4bf8d..edb44bb2f9f 100644
--- a/@navikt/core/react/src/form/Select.tsx
+++ b/@navikt/core/react/src/form/Select.tsx
@@ -55,7 +55,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       hasError,
       size,
       inputDescriptionId,
-    } = useFormField(props, "textField");
+      readOnly,
+    } = useFormField(props, "select");
 
     const {
       children,
@@ -68,6 +69,22 @@ 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", " "].includes(evt.key)) {
+          evt.preventDefault();
+        }
+      },
+    };
+
     return (
       <div
         className={cl(
@@ -77,6 +94,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
+            "navds-select--readonly": readOnly,
           }
         )}
       >
@@ -103,14 +121,16 @@ 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",
               "navds-body-short",
               `navds-body--${size ?? "medium"}`
             )}
+            aria-readonly={readOnly}
             size={props.htmlSize}
           >
             {children}
diff --git a/@navikt/core/react/src/form/stories/select.stories.tsx b/@navikt/core/react/src/form/stories/select.stories.tsx
index 70b41e05279..1d37d37fe63 100644
--- a/@navikt/core/react/src/form/stories/select.stories.tsx
+++ b/@navikt/core/react/src/form/stories/select.stories.tsx
@@ -114,3 +114,11 @@ export const HideLabel = () => {
     </Select>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <Select label="Ipsum enim quis culpa" readOnly>
+      {content}
+    </Select>
+  );
+};
diff --git a/@navikt/core/react/src/form/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index 88f0f11af31..b71cefe02d3 100644
--- a/@navikt/core/react/src/form/useFormField.ts
+++ b/@navikt/core/react/src/form/useFormField.ts
@@ -50,7 +50,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
   const inputDescriptionId = `${prefix}-description-${genId}`;
 
   const disabled = fieldset?.disabled || props.disabled;
-  const readOnly = fieldset?.readOnly || props.readOnly;
+  const readOnly = fieldset?.readOnly || props.readOnly || undefined;
 
   const hasError: boolean =
     !disabled && !readOnly && !!(error || fieldset?.error);

From c936b30f4ff7fbd83784a20c95be8c4843aca29d Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 12:13:14 +0200
Subject: [PATCH 03/26] :art: switch readonly

---
 @navikt/core/react/src/form/Switch.tsx        | 26 +++++++++++++------
 .../react/src/form/stories/switch.stories.tsx | 12 +++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index cb74eaa99aa..f690209a123 100644
--- a/@navikt/core/react/src/form/Switch.tsx
+++ b/@navikt/core/react/src/form/Switch.tsx
@@ -68,7 +68,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 +90,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 +100,33 @@ 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}
+          aria-readonly={readOnly}
           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">
diff --git a/@navikt/core/react/src/form/stories/switch.stories.tsx b/@navikt/core/react/src/form/stories/switch.stories.tsx
index 49357894773..af3183ee4fe 100644
--- a/@navikt/core/react/src/form/stories/switch.stories.tsx
+++ b/@navikt/core/react/src/form/stories/switch.stories.tsx
@@ -116,3 +116,15 @@ export const HideLabel = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Switch readOnly>Label text</Switch>
+
+      <Switch checked readOnly>
+        Label text
+      </Switch>
+    </div>
+  );
+};

From afac339fc9f93f5e5603d3e71dda18c23cfc8289 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:00:33 +0200
Subject: [PATCH 04/26] :art: Readonly stories and props on all form-components

---
 @navikt/core/react/src/date/DateInput.tsx     |  3 +++
 @navikt/core/react/src/form/TextField.tsx     |  3 +++
 @navikt/core/react/src/form/Textarea.tsx      |  3 +++
 .../src/form/checkbox/checkbox.stories.tsx    |  9 +++++++
 .../react/src/form/radio/radio.stories.tsx    | 27 +++++++++++++++----
 @navikt/core/react/src/form/search/Search.tsx |  3 +++
 .../react/src/form/search/search.stories.tsx  | 15 +++++++++++
 .../stories/confirmation-panel.stories.tsx    | 25 +++++++++++++++++
 .../react/src/form/stories/select.stories.tsx | 15 ++++++++---
 .../react/src/form/stories/switch.stories.tsx |  4 ++-
 .../src/form/stories/text-field.stories.tsx   | 13 +++++++++
 .../src/form/stories/textarea.stories.tsx     | 13 +++++++++
 12 files changed, 124 insertions(+), 9 deletions(-)

diff --git a/@navikt/core/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 871ca97a288..1fd4026418f 100644
--- a/@navikt/core/react/src/date/DateInput.tsx
+++ b/@navikt/core/react/src/date/DateInput.tsx
@@ -35,6 +35,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     label,
     description,
     variant = "datepicker",
+    readOnly,
     ...rest
   } = props;
 
@@ -71,6 +72,7 @@ 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,
         }
       )}
     >
@@ -102,6 +104,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",
diff --git a/@navikt/core/react/src/form/TextField.tsx b/@navikt/core/react/src/form/TextField.tsx
index b59b8ef47f6..70b3e820f75 100644
--- a/@navikt/core/react/src/form/TextField.tsx
+++ b/@navikt/core/react/src/form/TextField.tsx
@@ -62,6 +62,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       htmlSize,
       hideLabel = false,
       type = "text",
+      readOnly,
       ...rest
     } = props;
 
@@ -75,6 +76,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,
           }
         )}
       >
@@ -105,6 +107,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 bb6e8856f59..cacb2296689 100644
--- a/@navikt/core/react/src/form/Textarea.tsx
+++ b/@navikt/core/react/src/form/Textarea.tsx
@@ -85,6 +85,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       hideLabel = false,
       resize,
       i18n,
+      readOnly,
       ...rest
     } = props;
 
@@ -115,6 +116,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,
           }
@@ -152,6 +154,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.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index c3af7110481..c1020377c8f 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -197,6 +197,15 @@ export const Readonly = () => (
       <Checkbox value="tekst">Checkboxtekst</Checkbox>
       <Checkbox value="tekst2">Checkboxtekst</Checkbox>
     </CheckboxGroup>
+    <CheckboxGroup
+      legend="Group legend"
+      error="errormessage"
+      defaultValue={["tekst2"]}
+      readOnly
+    >
+      <Checkbox value="tekst">Checkboxtekst</Checkbox>
+      <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+    </CheckboxGroup>
     <hr />
     <Checkbox value="tekst1" readOnly>
       Checkboxtekst
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 4ec543c0724..57d2d28bb67 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -94,9 +94,26 @@ export const GroupDescription = () => (
 );
 
 export const Readonly = () => (
-  <RadioGroup legend="Group legend" defaultValue="tekst2" readOnly>
-    <Radio value="tekst">Radiotekst</Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-    <Radio value="tekst3">Radiotekst</Radio>
-  </RadioGroup>
+  <div className="colgap">
+    <RadioGroup
+      legend="Group legend"
+      description="Group description"
+      defaultValue="tekst2"
+      readOnly
+    >
+      <Radio value="tekst">Radiotekst</Radio>
+      <Radio value="tekst2">Radiotekst</Radio>
+      <Radio value="tekst3">Radiotekst</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Group legend"
+      defaultValue="tekst2"
+      readOnly
+      error="errormessage"
+    >
+      <Radio value="tekst">Radiotekst</Radio>
+      <Radio value="tekst2">Radiotekst</Radio>
+      <Radio value="tekst3">Radiotekst</Radio>
+    </RadioGroup>
+  </div>
 );
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index 00b39d33b76..27cb67e0006 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -130,6 +130,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
+      readOnly,
       ...rest
     } = props;
 
@@ -186,6 +187,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
+            "navds-search--readonly": readOnly,
             "navds-search--with-size": !!htmlSize,
           }
         )}
@@ -227,6 +229,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               onChange={(e) => handleChange(e.target.value)}
               type="search"
               role="searchbox"
+              readOnly={readOnly}
               className={cl(
                 className,
                 "navds-search__input",
diff --git a/@navikt/core/react/src/form/search/search.stories.tsx b/@navikt/core/react/src/form/search/search.stories.tsx
index 8a7481b8a42..89b23d2270f 100644
--- a/@navikt/core/react/src/form/search/search.stories.tsx
+++ b/@navikt/core/react/src/form/search/search.stories.tsx
@@ -189,3 +189,18 @@ export const HtmlSize = () => (
     />
   </div>
 );
+
+export const Readonly = () => (
+  <div className="colgap">
+    <Search label="Label søk" variant="simple" hideLabel={false} />
+    <Search label="Label søk" variant="primary" hideLabel={false} />
+    <Search label="Label søk" variant="secondary" hideLabel={false} />
+    <Search
+      label="Label søk"
+      description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+      error="errormessage"
+      variant="simple"
+      hideLabel={false}
+    />
+  </div>
+);
diff --git a/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx b/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
index 24376f992c1..02ff6326c23 100644
--- a/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
+++ b/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
@@ -94,3 +94,28 @@ export const Error = () => {
     </div>
   );
 };
+
+export const Readonly = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="colgap">
+      <ConfirmationPanel
+        checked={!checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+        readOnly
+      >
+        {content}
+      </ConfirmationPanel>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
+        readOnly
+      >
+        {content}
+      </ConfirmationPanel>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/form/stories/select.stories.tsx b/@navikt/core/react/src/form/stories/select.stories.tsx
index 1d37d37fe63..0649ac8061a 100644
--- a/@navikt/core/react/src/form/stories/select.stories.tsx
+++ b/@navikt/core/react/src/form/stories/select.stories.tsx
@@ -117,8 +117,17 @@ export const HideLabel = () => {
 
 export const Readonly = () => {
   return (
-    <Select label="Ipsum enim quis culpa" readOnly>
-      {content}
-    </Select>
+    <div className="colgap">
+      <Select
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit."
+        readOnly
+      >
+        {content}
+      </Select>
+      <Select label="Ipsum enim quis culpa" readOnly error="errormessage">
+        {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 af3183ee4fe..e540ee889d5 100644
--- a/@navikt/core/react/src/form/stories/switch.stories.tsx
+++ b/@navikt/core/react/src/form/stories/switch.stories.tsx
@@ -120,7 +120,9 @@ export const HideLabel = () => {
 export const Readonly = () => {
   return (
     <div className="colgap">
-      <Switch readOnly>Label text</Switch>
+      <Switch description="Consectetur labore velit eiusmod." readOnly>
+        Label text
+      </Switch>
 
       <Switch checked readOnly>
         Label text
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..39181b8a7b6 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,16 @@ export const Disabled = () => {
 export const HideLabel = () => {
   return <TextField label="Ipsum enim quis culpa" hideLabel />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <TextField
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        readOnly
+      />
+      <TextField label="Ipsum enim quis culpa" readOnly error="Errormessage" />
+    </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..4ee21ef4dd6 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -120,3 +120,16 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
+
+export const Readonly = () => {
+  return (
+    <div className="colgap">
+      <Textarea
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        readOnly
+      />
+      <Textarea label="Ipsum enim quis culpa" readOnly error="errormessage" />
+    </div>
+  );
+};

From f2c23619826f91b7966407900ed7139908b69188 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:05:38 +0200
Subject: [PATCH 05/26] :art: Readonly not allowed when disabled

---
 @navikt/core/react/src/form/useFormField.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/form/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index b71cefe02d3..a07064bee8e 100644
--- a/@navikt/core/react/src/form/useFormField.ts
+++ b/@navikt/core/react/src/form/useFormField.ts
@@ -50,7 +50,8 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
   const inputDescriptionId = `${prefix}-description-${genId}`;
 
   const disabled = fieldset?.disabled || props.disabled;
-  const readOnly = fieldset?.readOnly || props.readOnly || undefined;
+  const readOnly =
+    ((fieldset?.readOnly || props.readOnly) && !disabled) || undefined;
 
   const hasError: boolean =
     !disabled && !readOnly && !!(error || fieldset?.error);

From 8a0e8aa1cd8a34d5b8437ab69bf349f4ac4fc3c3 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:16:36 +0200
Subject: [PATCH 06/26] :art: Textfield readonly

---
 @navikt/core/css/form/text-field.css | 9 ++++-----
 @navikt/core/css/form/textarea.css   | 9 ++++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/@navikt/core/css/form/text-field.css b/@navikt/core/css/form/text-field.css
index 1822f9aef2d..f57fef0a89b 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;
 }

From 1348a43bf59ff9d343de99b2418a9673800a19d6 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:35:58 +0200
Subject: [PATCH 07/26] :art: default-state readonly checkbox

---
 @navikt/core/css/form/radio-checkbox.css      | 26 +++++++++++++++++++
 .../src/form/checkbox/checkbox.stories.tsx    |  3 +++
 2 files changed, 29 insertions(+)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index b6cacca1c96..5693235b438 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,
@@ -244,3 +247,26 @@
 .navds-radio--disabled > .navds-radio__label {
   cursor: not-allowed;
 }
+
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__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 {
+  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-checkbox--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
+}
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index c1020377c8f..99fe708667b 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -196,6 +196,9 @@ export const Readonly = () => (
     <CheckboxGroup legend="Group legend" defaultValue={["tekst2"]} readOnly>
       <Checkbox value="tekst">Checkboxtekst</Checkbox>
       <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+      <Checkbox value="tekst2" indeterminate>
+        Checkboxtekst
+      </Checkbox>
     </CheckboxGroup>
     <CheckboxGroup
       legend="Group legend"

From f7e8ec406c7c4c48d4d84d201252a16be6bc5bb1 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:47:04 +0200
Subject: [PATCH 08/26] :art: Readonly checkbox

---
 @navikt/core/css/form/radio-checkbox.css      | 19 +++++++++++++++++--
 .../src/form/checkbox/checkbox.stories.tsx    |  4 +++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 5693235b438..5cf2faf9854 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -105,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;
 }
 
@@ -267,6 +267,21 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-radio__input:focus-visible + .navds-radio__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-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-default);
+}
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 99fe708667b..553afb2f943 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -206,7 +206,9 @@ export const Readonly = () => (
       defaultValue={["tekst2"]}
       readOnly
     >
-      <Checkbox value="tekst">Checkboxtekst</Checkbox>
+      <Checkbox value="tekst" description="testdescription">
+        Checkboxtekst
+      </Checkbox>
       <Checkbox value="tekst2">Checkboxtekst</Checkbox>
     </CheckboxGroup>
     <hr />

From 9798ae03444501de10b8438113e096a06731ab86 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:53:31 +0200
Subject: [PATCH 09/26] :art: radio-readonly

---
 @navikt/core/css/form/radio-checkbox.css      | 20 +++++++++++++++----
 .../react/src/form/radio/radio.stories.tsx    |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 5cf2faf9854..435d6dec887 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -248,11 +248,14 @@
   cursor: not-allowed;
 }
 
-.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label) {
+/* 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-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
   color: var(--a-text-default);
 }
 
@@ -261,7 +264,11 @@
   + .navds-checkbox__label::before,
 .navds-checkbox--readonly
   > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
-  + .navds-checkbox__label::before {
+  + .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);
 }
@@ -277,11 +284,16 @@
   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-default);
+  background-color: var(--a-icon-subtle);
 }
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 57d2d28bb67..30d89b8aa3d 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -102,7 +102,9 @@ export const Readonly = () => (
       readOnly
     >
       <Radio value="tekst">Radiotekst</Radio>
-      <Radio value="tekst2">Radiotekst</Radio>
+      <Radio value="tekst2" description="testdescription">
+        Radiotekst
+      </Radio>
       <Radio value="tekst3">Radiotekst</Radio>
     </RadioGroup>
     <RadioGroup

From ce595c1cb2d0cdc9abf48c132189cfa880575a9f Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:54:44 +0200
Subject: [PATCH 10/26] :fire: Fjernet readonly fra confirmationpanel

---
 .../core/react/src/form/ConfirmationPanel.tsx |  2 +-
 .../stories/confirmation-panel.stories.tsx    | 25 -------------------
 2 files changed, 1 insertion(+), 26 deletions(-)

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/stories/confirmation-panel.stories.tsx b/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
index 02ff6326c23..24376f992c1 100644
--- a/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
+++ b/@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx
@@ -94,28 +94,3 @@ export const Error = () => {
     </div>
   );
 };
-
-export const Readonly = () => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <div className="colgap">
-      <ConfirmationPanel
-        checked={!checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-        readOnly
-      >
-        {content}
-      </ConfirmationPanel>
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
-        readOnly
-      >
-        {content}
-      </ConfirmationPanel>
-    </div>
-  );
-};

From 5dd7307be6e95edec9df53c16e6fc71a8b016647 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 14:55:59 +0200
Subject: [PATCH 11/26] :art: Select readonly

---
 @navikt/core/css/form/select.css | 6 ++++++
 1 file changed, 6 insertions(+)

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;
+}

From bd07e9b47799c82a417b188aabd017bdfad433e2 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 15:09:46 +0200
Subject: [PATCH 12/26] :art: switch readonly

---
 @navikt/core/css/form/switch.css | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

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);
+  }
+}

From c17a1c97989aa701cb617a4f7fac77bac6dac890 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 15:28:07 +0200
Subject: [PATCH 13/26] :art: Datepicker readonly

---
 @navikt/core/css/date.css                     |  6 ++++++
 @navikt/core/css/form/text-field.css          |  2 +-
 @navikt/core/react/src/date/DateInput.tsx     |  5 +++--
 .../date/datepicker/datepicker.stories.tsx    | 21 +++++++++++++++++++
 .../react/src/date/hooks/useDatepicker.tsx    |  3 +++
 .../react/src/date/hooks/useMonthPicker.tsx   |  3 +++
 .../src/date/hooks/useRangeDatepicker.tsx     |  3 +++
 7 files changed, 40 insertions(+), 3 deletions(-)

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/text-field.css b/@navikt/core/css/form/text-field.css
index f57fef0a89b..8effbba6ac8 100644
--- a/@navikt/core/css/form/text-field.css
+++ b/@navikt/core/css/form/text-field.css
@@ -73,7 +73,7 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--readonly > .navds-text-field__input {
+.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/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 1fd4026418f..3758ebcccbb 100644
--- a/@navikt/core/react/src/date/DateInput.tsx
+++ b/@navikt/core/react/src/date/DateInput.tsx
@@ -35,7 +35,6 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     label,
     description,
     variant = "datepicker",
-    readOnly,
     ...rest
   } = props;
 
@@ -58,6 +57,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     errorId,
     showErrorMsg,
     hasError,
+    readOnly,
   } = useFormField(props, conditionalVariables.prefix);
 
   return (
@@ -73,6 +73,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-form-field--disabled": !!inputProps.disabled,
           "navds-text-field--disabled": !!inputProps.disabled,
           "navds-text-field--readonly": readOnly,
+          "navds-date__field--readonly": readOnly,
         }
       )}
     >
@@ -114,7 +115,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           size={14}
         />
         <button
-          disabled={inputProps.disabled}
+          disabled={inputProps.disabled || readOnly}
           tabIndex={open ? -1 : 0}
           onClick={() => onOpen()}
           type="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..7fd29691125 100644
--- a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
+++ b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
@@ -341,3 +341,24 @@ 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}
+          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,

From a2aa1452bbc96e03b5218b1a5ad25b5c9117d4f7 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 15:37:51 +0200
Subject: [PATCH 14/26] :fire: Fjernet readonly fra Search

---
 @navikt/core/react/src/form/search/Search.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index 27cb67e0006..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;
   /**
@@ -130,7 +130,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
-      readOnly,
       ...rest
     } = props;
 
@@ -187,7 +186,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-            "navds-search--readonly": readOnly,
             "navds-search--with-size": !!htmlSize,
           }
         )}
@@ -223,13 +221,12 @@ 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)}
               type="search"
               role="searchbox"
-              readOnly={readOnly}
               className={cl(
                 className,
                 "navds-search__input",

From 2c2993255d7d4f3f4df59378daa3954f61fb1ade Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 16:01:11 +0200
Subject: [PATCH 15/26] :art: Padlock-icon

---
 @navikt/core/css/form/form.css                     |  6 ++++++
 @navikt/core/react/src/date/DateInput.tsx          |  2 ++
 @navikt/core/react/src/form/Fieldset/Fieldset.tsx  |  2 ++
 @navikt/core/react/src/form/ReadOnlyIcon.tsx       | 14 ++++++++++++++
 @navikt/core/react/src/form/Select.tsx             |  2 ++
 @navikt/core/react/src/form/Switch.tsx             |  2 ++
 @navikt/core/react/src/form/TextField.tsx          |  2 ++
 @navikt/core/react/src/form/Textarea.tsx           |  2 ++
 .../react/src/form/stories/text-field.stories.tsx  |  2 +-
 9 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 @navikt/core/react/src/form/ReadOnlyIcon.tsx

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/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 3758ebcccbb..54ed24d9b70 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,
@@ -84,6 +85,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
+        <ReadOnlyIcon readOnly={readOnly} />
         {label}
       </Label>
       {!!description && (
diff --git a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
index 4cdaa353294..ae579904580 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 = {
   /**
@@ -111,6 +112,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
+            <ReadOnlyIcon readOnly={readOnly} />
             {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..94f6942f149
--- /dev/null
+++ b/@navikt/core/react/src/form/ReadOnlyIcon.tsx
@@ -0,0 +1,14 @@
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+export const ReadOnlyIcon = ({ readOnly }: { readOnly?: boolean }) => {
+  if (readOnly) {
+    return (
+      <PadlockLockedFillIcon
+        aria-hidden
+        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 edb44bb2f9f..9a0d15939a0 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,
@@ -105,6 +106,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
         {!!description && (
diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index f690209a123..deb200c5722 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
@@ -146,6 +147,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
+              <ReadOnlyIcon readOnly={readOnly} />
               {children}
             </BodyShort>
             {description && (
diff --git a/@navikt/core/react/src/form/TextField.tsx b/@navikt/core/react/src/form/TextField.tsx
index 70b3e820f75..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
@@ -87,6 +88,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
 
diff --git a/@navikt/core/react/src/form/Textarea.tsx b/@navikt/core/react/src/form/Textarea.tsx
index cacb2296689..ac59caa0414 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
@@ -129,6 +130,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
+          <ReadOnlyIcon readOnly={readOnly} />
           {label}
         </Label>
         {!!description && (
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 39181b8a7b6..e6abb35b5bc 100644
--- a/@navikt/core/react/src/form/stories/text-field.stories.tsx
+++ b/@navikt/core/react/src/form/stories/text-field.stories.tsx
@@ -88,7 +88,7 @@ export const Readonly = () => {
   return (
     <div className="colgap">
       <TextField
-        label="Ipsum enim quis culpa"
+        label="lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
         description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         readOnly
       />

From fbc8e53655c2a561f2380124ed0abb08db61fdc0 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 26 Jun 2023 16:12:22 +0200
Subject: [PATCH 16/26] :memo: changenset

---
 .changeset/shy-cameras-tickle-duplicate.md | 5 +++++
 .changeset/shy-cameras-tickle.md           | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/shy-cameras-tickle-duplicate.md
 create mode 100644 .changeset/shy-cameras-tickle.md

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

From ef04479f7f1b12ff7d1f4db01e48a5ddad7300c3 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 27 Jun 2023 09:42:06 +0200
Subject: [PATCH 17/26] =?UTF-8?q?:art:=20Switch-like=20padlock=20p=C3=A5?=
 =?UTF-8?q?=20single=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 @navikt/core/react/src/form/checkbox/Checkbox.tsx   | 4 +++-
 @navikt/core/react/src/form/checkbox/useCheckbox.ts | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index 107ae188b08..c9ca0187b47 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, readOnly } = useCheckbox(props);
+    const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
     return (
       <div
@@ -92,6 +93,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             })}
           >
             <BodyShort as="span" size={size}>
+              {!nested && <ReadOnlyIcon readOnly={readOnly} />}
               {props.children}
             </BodyShort>
             {props.description && (
diff --git a/@navikt/core/react/src/form/checkbox/useCheckbox.ts b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
index 4830a372b56..40bbe84ba8f 100644
--- a/@navikt/core/react/src/form/checkbox/useCheckbox.ts
+++ b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
@@ -31,6 +31,7 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
   return {
     ...rest,
     readOnly,
+    nested: !!checkboxGroup,
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value

From 8f797f6e16a7e99ea5ea156f3565760e98e5c03a Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 27 Jun 2023 09:54:47 +0200
Subject: [PATCH 18/26] :bug: Fikset sortering av stories

---
 .storybook/preview.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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: "",
     },

From 7001c3f6848d24b32b75226bea7a8f003782bdeb Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 27 Jun 2023 09:57:02 +0200
Subject: [PATCH 19/26] :fire: Fjernet readonly-story fra search

---
 .../core/react/src/form/search/search.stories.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/@navikt/core/react/src/form/search/search.stories.tsx b/@navikt/core/react/src/form/search/search.stories.tsx
index 89b23d2270f..8a7481b8a42 100644
--- a/@navikt/core/react/src/form/search/search.stories.tsx
+++ b/@navikt/core/react/src/form/search/search.stories.tsx
@@ -189,18 +189,3 @@ export const HtmlSize = () => (
     />
   </div>
 );
-
-export const Readonly = () => (
-  <div className="colgap">
-    <Search label="Label søk" variant="simple" hideLabel={false} />
-    <Search label="Label søk" variant="primary" hideLabel={false} />
-    <Search label="Label søk" variant="secondary" hideLabel={false} />
-    <Search
-      label="Label søk"
-      description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      error="errormessage"
-      variant="simple"
-      hideLabel={false}
-    />
-  </div>
-);

From b9181adb470a7915868b8ca91d796c2e3e9800a3 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 27 Jun 2023 10:08:22 +0200
Subject: [PATCH 20/26] :memo: Bedre tekster for readmore stories for testing

---
 .../date/datepicker/datepicker.stories.tsx    |  1 +
 .../src/form/checkbox/checkbox.stories.tsx    | 30 +++++++++++--------
 .../react/src/form/radio/radio.stories.tsx    | 26 ++++++++--------
 .../react/src/form/stories/select.stories.tsx |  6 ++--
 .../react/src/form/stories/switch.stories.tsx |  6 ++--
 .../src/form/stories/text-field.stories.tsx   |  7 +++--
 .../src/form/stories/textarea.stories.tsx     | 12 ++++++--
 7 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
index 7fd29691125..80c6fac84a9 100644
--- a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
+++ b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
@@ -355,6 +355,7 @@ export const Readonly = () => {
         <DatePicker.Input
           size="medium"
           {...inputProps}
+          value="01.02.2021"
           label="Velg dato"
           readOnly
         />
diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 553afb2f943..1d5b6536cdd 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -193,30 +193,34 @@ export const Indeterminate = () => {
 
 export const Readonly = () => (
   <div className="colgap">
-    <CheckboxGroup legend="Group legend" defaultValue={["tekst2"]} readOnly>
-      <Checkbox value="tekst">Checkboxtekst</Checkbox>
-      <Checkbox value="tekst2">Checkboxtekst</Checkbox>
-      <Checkbox value="tekst2" indeterminate>
-        Checkboxtekst
+    <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="Group legend"
-      error="errormessage"
-      defaultValue={["tekst2"]}
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue={["Eple"]}
       readOnly
     >
-      <Checkbox value="tekst" description="testdescription">
-        Checkboxtekst
+      <Checkbox value="eple" description="Epler kommer i 4 varianter">
+        Eple
       </Checkbox>
-      <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+      <Checkbox value="banan">Banan</Checkbox>
     </CheckboxGroup>
     <hr />
     <Checkbox value="tekst1" readOnly>
-      Checkboxtekst
+      Eple single
     </Checkbox>
     <Checkbox value="tekst1" checked readOnly>
-      Checkboxtekst
+      Banan single
     </Checkbox>
   </div>
 );
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 30d89b8aa3d..ca48152231a 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -96,26 +96,26 @@ export const GroupDescription = () => (
 export const Readonly = () => (
   <div className="colgap">
     <RadioGroup
-      legend="Group legend"
-      description="Group description"
-      defaultValue="tekst2"
+      legend="Hvilken frukt vil du ha?"
+      description="Du kan bare velge en frukt"
+      defaultValue="eple"
       readOnly
     >
-      <Radio value="tekst">Radiotekst</Radio>
-      <Radio value="tekst2" description="testdescription">
-        Radiotekst
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan" description="Bananer er importert fra X">
+        Banan
       </Radio>
-      <Radio value="tekst3">Radiotekst</Radio>
+      <Radio value="druer">Druer</Radio>
     </RadioGroup>
     <RadioGroup
-      legend="Group legend"
-      defaultValue="tekst2"
+      legend="Hvilken frukt vil du ha?"
+      defaultValue="eple"
       readOnly
-      error="errormessage"
+      error="Du må velge en frukt"
     >
-      <Radio value="tekst">Radiotekst</Radio>
-      <Radio value="tekst2">Radiotekst</Radio>
-      <Radio value="tekst3">Radiotekst</Radio>
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan">Banan</Radio>
+      <Radio value="druer">Druer</Radio>
     </RadioGroup>
   </div>
 );
diff --git a/@navikt/core/react/src/form/stories/select.stories.tsx b/@navikt/core/react/src/form/stories/select.stories.tsx
index 0649ac8061a..6d74ccf3fb0 100644
--- a/@navikt/core/react/src/form/stories/select.stories.tsx
+++ b/@navikt/core/react/src/form/stories/select.stories.tsx
@@ -119,13 +119,13 @@ export const Readonly = () => {
   return (
     <div className="colgap">
       <Select
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit."
+        label="Hvilkets land er du fra?"
+        description="Velg landet du bor 180 dagen i året"
         readOnly
       >
         {content}
       </Select>
-      <Select label="Ipsum enim quis culpa" readOnly error="errormessage">
+      <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 e540ee889d5..a01b7f8693a 100644
--- a/@navikt/core/react/src/form/stories/switch.stories.tsx
+++ b/@navikt/core/react/src/form/stories/switch.stories.tsx
@@ -120,12 +120,12 @@ export const HideLabel = () => {
 export const Readonly = () => {
   return (
     <div className="colgap">
-      <Switch description="Consectetur labore velit eiusmod." readOnly>
-        Label text
+      <Switch description="Slår av alle notifikasjoner" readOnly>
+        Notifikasjoner
       </Switch>
 
       <Switch checked readOnly>
-        Label text
+        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 e6abb35b5bc..141e88d3842 100644
--- a/@navikt/core/react/src/form/stories/text-field.stories.tsx
+++ b/@navikt/core/react/src/form/stories/text-field.stories.tsx
@@ -88,11 +88,12 @@ export const Readonly = () => {
   return (
     <div className="colgap">
       <TextField
-        label="lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        label="Bosted"
+        description="Skriv bosted i Norge"
         readOnly
+        value="Oslo"
       />
-      <TextField label="Ipsum enim quis culpa" readOnly error="Errormessage" />
+      <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 4ee21ef4dd6..1cd7a843329 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -125,11 +125,17 @@ export const Readonly = () => {
   return (
     <div className="colgap">
       <Textarea
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        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"
       />
-      <Textarea label="Ipsum enim quis culpa" readOnly error="errormessage" />
     </div>
   );
 };

From f4b4cfa2fc4129eeffa4ea8ead9697233387b1dc Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 27 Jun 2023 15:26:28 +0200
Subject: [PATCH 21/26] :art: Readonly on radiogroup-wrapper

---
 @navikt/core/react/src/form/radio/Radio.tsx      | 1 -
 @navikt/core/react/src/form/radio/RadioGroup.tsx | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/form/radio/Radio.tsx b/@navikt/core/react/src/form/radio/Radio.tsx
index 445f58492e8..0dee1b1ebee 100644
--- a/@navikt/core/react/src/form/radio/Radio.tsx
+++ b/@navikt/core/react/src/form/radio/Radio.tsx
@@ -38,7 +38,6 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         {...inputProps}
         className="navds-radio__input"
         ref={ref}
-        aria-readonly={readOnly}
       />
       <label htmlFor={inputProps.id} className="navds-radio__label">
         <span className="navds-radio__content">
diff --git a/@navikt/core/react/src/form/radio/RadioGroup.tsx b/@navikt/core/react/src/form/radio/RadioGroup.tsx
index 8352741e604..a4c30211596 100644
--- a/@navikt/core/react/src/form/radio/RadioGroup.tsx
+++ b/@navikt/core/react/src/form/radio/RadioGroup.tsx
@@ -82,6 +82,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
+        aria-readonly={fieldset?.readOnly}
       >
         <RadioGroupContext.Provider
           value={{

From aed9c293e33ba767f03c13b5b7c303bc48a09210 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Fri, 30 Jun 2023 13:07:09 +0200
Subject: [PATCH 22/26] :bug: Fikset readonly opplesing for skjermleser

---
 .../core/react/src/form/Fieldset/Fieldset.tsx |  4 ++-
 @navikt/core/react/src/form/ReadOnlyIcon.tsx  | 10 ++++--
 @navikt/core/react/src/form/Select.tsx        | 10 ++++--
 @navikt/core/react/src/form/Switch.tsx        |  3 +-
 .../core/react/src/form/checkbox/Checkbox.tsx |  5 +--
 .../react/src/form/checkbox/CheckboxGroup.tsx |  1 +
 .../core/react/src/form/radio/RadioGroup.tsx  |  4 ++-
 .../react/src/form/radio/radio.stories.tsx    | 14 ++++----
 @navikt/core/react/src/form/useFormField.ts   |  1 +
 yarn.lock                                     | 36 +++++++++----------
 10 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
index ae579904580..3217e8425aa 100644
--- a/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
+++ b/@navikt/core/react/src/form/Fieldset/Fieldset.tsx
@@ -52,6 +52,7 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
+  nativeReadOnly?: boolean;
 }
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
@@ -75,6 +76,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
+      nativeReadOnly = true,
       ...rest
     } = props;
 
@@ -112,7 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
-            <ReadOnlyIcon readOnly={readOnly} />
+            <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
index 94f6942f149..6b17e8f440e 100644
--- a/@navikt/core/react/src/form/ReadOnlyIcon.tsx
+++ b/@navikt/core/react/src/form/ReadOnlyIcon.tsx
@@ -1,11 +1,17 @@
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
 import React from "react";
 
-export const ReadOnlyIcon = ({ readOnly }: { readOnly?: boolean }) => {
+export const ReadOnlyIcon = ({
+  readOnly,
+  nativeReadOnly = true,
+}: {
+  readOnly?: boolean;
+  nativeReadOnly?: boolean;
+}) => {
   if (readOnly) {
     return (
       <PadlockLockedFillIcon
-        aria-hidden
+        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
         className="navds-form-field__readonly-icon"
       />
     );
diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx
index 9a0d15939a0..517258e3229 100644
--- a/@navikt/core/react/src/form/Select.tsx
+++ b/@navikt/core/react/src/form/Select.tsx
@@ -80,7 +80,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         }
       },
       onKeyDown: (evt) => {
-        if (readOnly && ["ArrowDown", "ArrowUp", " "].includes(evt.key)) {
+        if (
+          readOnly &&
+          ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
+            evt.key
+          )
+        ) {
           evt.preventDefault();
         }
       },
@@ -106,7 +111,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
           {label}
         </Label>
         {!!description && (
@@ -132,7 +137,6 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
               "navds-body-short",
               `navds-body--${size ?? "medium"}`
             )}
-            aria-readonly={readOnly}
             size={props.htmlSize}
           >
             {children}
diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index deb200c5722..b95e773c16b 100644
--- a/@navikt/core/react/src/form/Switch.tsx
+++ b/@navikt/core/react/src/form/Switch.tsx
@@ -109,7 +109,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           {...omit(rest, ["size", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           disabled={inputProps.disabled ?? loading}
-          aria-readonly={readOnly}
           checked={checkedProp}
           defaultChecked={defaultChecked}
           ref={ref}
@@ -147,7 +146,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} />
+              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
               {children}
             </BodyShort>
             {description && (
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index c9ca0187b47..07aae01836e 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -72,7 +72,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           {...inputProps}
           type="checkbox"
           className="navds-checkbox__input"
-          aria-readonly={readOnly}
           aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
           ref={(el) => {
             if (el) {
@@ -93,7 +92,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             })}
           >
             <BodyShort as="span" size={size}>
-              {!nested && <ReadOnlyIcon readOnly={readOnly} />}
+              {!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/radio/RadioGroup.tsx b/@navikt/core/react/src/form/radio/RadioGroup.tsx
index a4c30211596..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,13 +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"}`
         )}
-        aria-readonly={fieldset?.readOnly}
+        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 ca48152231a..5444a9e83f6 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -93,7 +93,7 @@ export const GroupDescription = () => (
   </RadioGroup>
 );
 
-export const Readonly = () => (
+export const UUDemo = () => (
   <div className="colgap">
     <RadioGroup
       legend="Hvilken frukt vil du ha?"
@@ -108,14 +108,14 @@ export const Readonly = () => (
       <Radio value="druer">Druer</Radio>
     </RadioGroup>
     <RadioGroup
-      legend="Hvilken frukt vil du ha?"
-      defaultValue="eple"
+      legend="Når har du ferie?"
+      defaultValue="1"
       readOnly
-      error="Du må velge en frukt"
+      error="du må velge en ferie"
     >
-      <Radio value="eple">Eple</Radio>
-      <Radio value="banan">Banan</Radio>
-      <Radio value="druer">Druer</Radio>
+      <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/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index a07064bee8e..b8278deab7a 100644
--- a/@navikt/core/react/src/form/useFormField.ts
+++ b/@navikt/core/react/src/form/useFormField.ts
@@ -77,6 +77,7 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
           [errorId]: showErrorMsg,
           [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
         }) || undefined,
+
       disabled,
     },
   };
diff --git a/yarn.lock b/yarn.lock
index 5ae97eb4767..f601d248dff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3787,7 +3787,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.4.1, @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.0
-    "@navikt/ds-tokens": ^4.4.0
+    "@navikt/ds-css": ^4.4.1
+    "@navikt/ds-tokens": ^4.4.1
     "@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.0
+    "@navikt/ds-css": 4.4.1
     "@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.0, @navikt/ds-css@^4.4.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@4.4.1, @navikt/ds-css@^4.4.1, @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.0
+    "@navikt/ds-tokens": ^4.4.1
     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.0, @navikt/ds-react@^4.4.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@4.4.1, @navikt/ds-react@^4.4.1, @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.0
+    "@navikt/aksel-icons": ^4.4.1
     "@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.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.4.1, @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.0
+    "@navikt/ds-tokens": ^4.4.1
     "@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.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.4.1, @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.0
-    "@navikt/ds-css": ^4.4.0
-    "@navikt/ds-react": ^4.4.0
-    "@navikt/ds-tailwind": ^4.4.0
-    "@navikt/ds-tokens": ^4.4.0
+    "@navikt/aksel-icons": ^4.4.1
+    "@navikt/ds-css": ^4.4.1
+    "@navikt/ds-react": ^4.4.1
+    "@navikt/ds-tailwind": ^4.4.1
+    "@navikt/ds-tokens": ^4.4.1
     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.0
-    "@navikt/ds-react": 4.4.0
+    "@navikt/ds-css": 4.4.1
+    "@navikt/ds-react": 4.4.1
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0

From d7192dcee8ca07921f3a44f813b176c558f8c667 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 3 Jul 2023 09:12:21 +0200
Subject: [PATCH 23/26] :memo: Checkbox stories imports

---
 @navikt/core/react/src/form/checkbox/checkbox.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 1d5b6536cdd..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",

From 9630516fa767c3c3d72a04d120a776ceceb088f3 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 3 Jul 2023 09:29:41 +0200
Subject: [PATCH 24/26] :memo: Readonly-demoer for aksel

---
 .../pages/eksempler/checkbox/disabled.tsx     |  2 +-
 .../pages/eksempler/checkbox/readonly.tsx     | 30 +++++++++++++++++++
 .../pages/eksempler/datepicker/readonly.tsx   | 27 +++++++++++++++++
 .../pages/eksempler/monthpicker/input.tsx     |  4 +--
 .../pages/eksempler/monthpicker/readonly.tsx  | 28 +++++++++++++++++
 .../eksempler/monthpicker/validation.tsx      | 12 ++++----
 .../pages/eksempler/radio/disabled.tsx        |  2 +-
 .../pages/eksempler/radio/readonly.tsx        | 30 +++++++++++++++++++
 .../pages/eksempler/select/disabled.tsx       |  2 +-
 .../pages/eksempler/select/readonly.tsx       | 24 +++++++++++++++
 .../pages/eksempler/switch/disabled.tsx       |  2 +-
 .../pages/eksempler/switch/readonly.tsx       | 24 +++++++++++++++
 .../pages/eksempler/textarea/disabled.tsx     |  2 +-
 .../pages/eksempler/textarea/readonly.tsx     | 17 +++++++++++
 .../pages/eksempler/textfield/disabled.tsx    |  2 +-
 .../pages/eksempler/textfield/readonly.tsx    | 17 +++++++++++
 16 files changed, 209 insertions(+), 16 deletions(-)
 create mode 100644 aksel.nav.no/website/pages/eksempler/checkbox/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/datepicker/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/monthpicker/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/radio/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/select/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/switch/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/textarea/readonly.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/textfield/readonly.tsx

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 1220b46cbe6..361eb7cf3e8 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,
+};

From cdaaeb5610808dcfae97dca863f749613a3f8901 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 3 Jul 2023 11:44:05 +0200
Subject: [PATCH 25/26] :art: Required-prop warning i console

---
 @navikt/core/react/src/date/DateInput.tsx   | 2 +-
 @navikt/core/react/src/form/useFormField.ts | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 54ed24d9b70..f76edc17d92 100644
--- a/@navikt/core/react/src/date/DateInput.tsx
+++ b/@navikt/core/react/src/date/DateInput.tsx
@@ -118,7 +118,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         />
         <button
           disabled={inputProps.disabled || readOnly}
-          tabIndex={open ? -1 : 0}
+          tabIndex={readOnly ? -1 : open ? -1 : 0}
           onClick={() => onOpen()}
           type="button"
           className="navds-date__field-button"
diff --git a/@navikt/core/react/src/form/useFormField.ts b/@navikt/core/react/src/form/useFormField.ts
index b8278deab7a..6059264acda 100644
--- a/@navikt/core/react/src/form/useFormField.ts
+++ b/@navikt/core/react/src/form/useFormField.ts
@@ -60,6 +60,15 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
 
   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,
     hasError,

From 728f9d742db7a9662a29dbe8977e79d43e264ea6 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 3 Jul 2023 11:45:21 +0200
Subject: [PATCH 26/26] :arrow_up: yarn lock

---
 yarn.lock | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

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