diff --git a/src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx b/src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx
index 9ca2d516f1..0d0a48ce1e 100644
--- a/src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx
+++ b/src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx
@@ -31,8 +31,7 @@ import { $isLinkNode, $isAutoLinkNode, toggleLink, $createLinkNode, TOGGLE_LINK_
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister, $findMatchingParent } from "@lexical/utils";
 import { colors, misc, shadows, spacing, stackOrder } from "@ndla/core";
-import { FieldErrorMessage, FormControl, InputV3, Label } from "@ndla/forms";
-import { Button } from "@ndla/primitives";
+import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
 import { getSelectedNode } from "./EditorToolbar";
 
 const VERTICAL_GAP = 10;
@@ -398,12 +397,10 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
   return open ? (
     <FloatingContainer ref={editorRef} data-visible={!!open}>
       <InputWrapper>
-        <FormControl id="text" isRequired isInvalid={!!textError}>
-          <Label margin="none" textStyle="label-small">
-            {t("markdownEditor.link.text")}
-          </Label>
+        <FieldRoot required invalid={!!textError}>
+          <FieldLabel>{t("markdownEditor.link.text")}</FieldLabel>
           <StyledFieldErrorMessage data-disabled={editedLinkText.length < 1}>{textError}</StyledFieldErrorMessage>
-          <InputV3
+          <FieldInput
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={!linkUrl}
             name="text"
@@ -415,13 +412,11 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
               monitorInputInteraction(event);
             }}
           />
-        </FormControl>
-        <FormControl id="url" isRequired isInvalid={!!urlError}>
-          <Label margin="none" textStyle="label-small">
-            {t("markdownEditor.link.url")}
-          </Label>
+        </FieldRoot>
+        <FieldRoot required invalid={!!urlError}>
+          <FieldLabel>{t("markdownEditor.link.url")}</FieldLabel>
           <StyledFieldErrorMessage data-disabled={editedLinkUrl.length < 1}>{urlError}</StyledFieldErrorMessage>
-          <InputV3
+          <FieldInput
             name="url"
             ref={inputRef}
             data-link-input=""
@@ -433,7 +428,7 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
               monitorInputInteraction(event);
             }}
           />
-        </FormControl>
+        </FieldRoot>
       </InputWrapper>
       <ButtonWrapper>
         <Button variant="secondary" onClick={handleLinkDeletion} disabled={!editedLinkElement}>
diff --git a/src/components/MyNdla/NewFolder.tsx b/src/components/MyNdla/NewFolder.tsx
index cf610227c2..4be1f6a613 100644
--- a/src/components/MyNdla/NewFolder.tsx
+++ b/src/components/MyNdla/NewFolder.tsx
@@ -11,11 +11,18 @@ import { useTranslation } from "react-i18next";
 import { useApolloClient } from "@apollo/client";
 import styled from "@emotion/styled";
 import { spacing } from "@ndla/core";
-import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, Label } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
 import { Cross } from "@ndla/icons/action";
 import { Done } from "@ndla/icons/editor";
-import { IconButton } from "@ndla/primitives";
+import {
+  IconButton,
+  FieldErrorMessage,
+  FieldHelper,
+  FieldInput,
+  FieldLabel,
+  FieldRoot,
+  InputContainer,
+} from "@ndla/primitives";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 import { getFolder, useAddFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations";
 import { useUserAgent } from "../../UserAgentContext";
@@ -32,12 +39,6 @@ const StyledSpinner = styled(Spinner)`
   margin: ${spacing.small};
 `;
 
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-  padding-right: ${spacing.xsmall};
-`;
-
 const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) => {
   const [name, setName] = useState(initialValue);
   const hasWritten = useRef(false);
@@ -101,11 +102,11 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) =>
   }, [name, validationT, siblingNames]);
 
   return (
-    <FormControl id="folder-name" isRequired isInvalid={!!error}>
-      <Label visuallyHidden>{t("treeStructure.newFolder.folderName")}</Label>
+    <FieldRoot required invalid={!!error}>
+      <FieldLabel srOnly>{t("treeStructure.newFolder.folderName")}</FieldLabel>
       <FieldErrorMessage>{error}</FieldErrorMessage>
       <InputContainer>
-        <InputV3
+        <FieldInput
           autoComplete="off"
           disabled={loading}
           ref={inputRef}
@@ -127,26 +128,24 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) =>
             }
           }}
         />
-        <Row>
-          {!loading ? (
-            <>
-              {!error && (
-                <IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
-                  <Done />
-                </IconButton>
-              )}
-              <IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
-                <Cross />
+        {!loading ? (
+          <>
+            {!error && (
+              <IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
+                <Done />
               </IconButton>
-            </>
-          ) : (
-            <FieldHelper>
-              <StyledSpinner size="normal" aria-label={t("loading")} />
-            </FieldHelper>
-          )}
-        </Row>
+            )}
+            <IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
+              <Cross />
+            </IconButton>
+          </>
+        ) : (
+          <FieldHelper>
+            <StyledSpinner size="normal" aria-label={t("loading")} />
+          </FieldHelper>
+        )}
       </InputContainer>
-    </FormControl>
+    </FieldRoot>
   );
 };
 
diff --git a/src/containers/MyNdla/Arena/components/ArenaCategoryForm.tsx b/src/containers/MyNdla/Arena/components/ArenaCategoryForm.tsx
index 246f53bc5d..1cca954002 100644
--- a/src/containers/MyNdla/Arena/components/ArenaCategoryForm.tsx
+++ b/src/containers/MyNdla/Arena/components/ArenaCategoryForm.tsx
@@ -13,10 +13,10 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import { LoadingButton } from "@ndla/button";
-import { colors, spacing } from "@ndla/core";
-import { FormControl, InputV3, Label, FieldErrorMessage, CheckboxItem, Select } from "@ndla/forms";
+import { spacing } from "@ndla/core";
+import { CheckboxItem, Label, Select } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
-import { Button } from "@ndla/primitives";
+import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
 import { INewCategory } from "@ndla/types-backend/myndla-api";
 import { GQLArenaCategoryV2Fragment, GQLTopiclessArenaCategoryV2 } from "../../../../graphqlTypes";
 import useValidationTranslation from "../../../../util/useValidationTranslation";
@@ -36,15 +36,6 @@ const ButtonRow = styled.div`
   gap: ${spacing.small};
 `;
 
-const StyledLabel = styled(Label)`
-  margin: 0;
-  margin-bottom: ${spacing.xxsmall};
-`;
-
-const StyledInput = styled(InputV3)`
-  background: ${colors.white};
-`;
-
 const CheckboxWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
@@ -143,12 +134,12 @@ const ArenaCategoryForm = ({
           },
         }}
         render={({ field, fieldState }) => (
-          <FormControl id="title" isRequired isInvalid={!!fieldState.error?.message}>
-            <StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.title")}</StyledLabel>
+          <FieldRoot required invalid={!!fieldState.error?.message}>
+            <FieldLabel>{t("myNdla.arena.admin.category.form.title")}</FieldLabel>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
-            <StyledInput {...field} />
+            <FieldInput {...field} />
             <FieldLength value={field.value.length ?? 0} maxLength={titleMaxLength} />
-          </FormControl>
+          </FieldRoot>
         )}
       />
       <Controller
@@ -158,11 +149,11 @@ const ArenaCategoryForm = ({
           required: false,
         }}
         render={({ field, fieldState }) => (
-          <FormControl id="editor" isRequired isInvalid={!!fieldState.error?.message}>
-            <StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.description")}</StyledLabel>
+          <FieldRoot required invalid={!!fieldState.error?.message}>
+            <FieldLabel>{t("myNdla.arena.admin.category.form.description")}</FieldLabel>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
-            <StyledInput {...field} />
-          </FormControl>
+            <FieldInput {...field} />
+          </FieldRoot>
         )}
       />
       <Controller
@@ -170,8 +161,8 @@ const ArenaCategoryForm = ({
         name={"parentCategoryId"}
         rules={{ required: false }}
         render={({ field, fieldState }) => (
-          <FormControl id="parentCategoryId" isInvalid={!!fieldState.error?.message}>
-            <StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.parentCategoryId")}</StyledLabel>
+          <FieldRoot invalid={!!fieldState.error?.message}>
+            <FieldLabel>{t("myNdla.arena.admin.category.form.parentCategoryId")}</FieldLabel>
             <Select {...field}>
               <option>{t("myNdla.arena.admin.category.form.noParentCategory")}</option>
               {possibleParents.map((parent) => (
@@ -180,7 +171,7 @@ const ArenaCategoryForm = ({
                 </option>
               ))}
             </Select>
-          </FormControl>
+          </FieldRoot>
         )}
       />
       <Controller
@@ -190,7 +181,7 @@ const ArenaCategoryForm = ({
           required: false,
         }}
         render={({ field, fieldState }) => (
-          <FormControl id="visible" isInvalid={!!fieldState.error?.message}>
+          <FieldRoot invalid={!!fieldState.error?.message}>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
             <CheckboxWrapper>
               <CheckboxItem
@@ -206,7 +197,7 @@ const ArenaCategoryForm = ({
                 {t("myNdla.arena.admin.category.form.visible")}
               </Label>
             </CheckboxWrapper>
-          </FormControl>
+          </FieldRoot>
         )}
       />
       <ButtonRow>
diff --git a/src/containers/MyNdla/Arena/components/ArenaForm.tsx b/src/containers/MyNdla/Arena/components/ArenaForm.tsx
index c0382b6fb1..3af7018369 100644
--- a/src/containers/MyNdla/Arena/components/ArenaForm.tsx
+++ b/src/containers/MyNdla/Arena/components/ArenaForm.tsx
@@ -12,9 +12,10 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { LoadingButton } from "@ndla/button";
 import { colors, misc, spacing } from "@ndla/core";
-import { FormControl, InputV3, Label, FieldErrorMessage, CheckboxItem } from "@ndla/forms";
+import { CheckboxItem, Label } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
 import { InformationOutline } from "@ndla/icons/common";
+import { FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
 import { Text } from "@ndla/typography";
 import AlertModal from "./AlertModal";
 import { AuthContext } from "../../../../components/AuthenticationContext";
@@ -53,19 +54,10 @@ const InformationLabel = styled.div`
   align-items: center;
 `;
 
-const StyledLabel = styled(Label)`
-  margin: 0;
-  margin-bottom: ${spacing.xxsmall};
-`;
-
 const StyledInformationOutline = styled(InformationOutline)`
   overflow: unset !important;
 `;
 
-const StyledInput = styled(InputV3)`
-  background: ${colors.white};
-`;
-
 const CheckboxWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
@@ -140,12 +132,12 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
             },
           }}
           render={({ field, fieldState }) => (
-            <FormControl id="title" isRequired isInvalid={!!fieldState.error?.message}>
-              <StyledLabel textStyle="label-small">{t("title")}</StyledLabel>
+            <FieldRoot required invalid={!!fieldState.error?.message}>
+              <FieldLabel>{t("title")}</FieldLabel>
               <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
-              <StyledInput {...field} />
+              <FieldInput {...field} />
               <FieldLength value={field.value.length ?? 0} maxLength={titleMaxLength} />
-            </FormControl>
+            </FieldRoot>
           )}
         />
       )}
@@ -167,13 +159,14 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
           },
         }}
         render={({ field, fieldState }) => (
-          <FormControl id={id ? `editor-${id}` : "editor"} isRequired isInvalid={!!fieldState.error?.message}>
-            <StyledLabel textStyle="label-small" onClick={() => document.getElementById("field-editor")?.focus()}>
+          <FieldRoot id={id ? `editor-${id}` : "editor"} required invalid={!!fieldState.error?.message}>
+            <FieldLabel onClick={() => document.getElementById("field-editor")?.focus()}>
               {type === "post" ? t("myNdla.arena.new.post") : t("myNdla.arena.topic.topicContent")}
-            </StyledLabel>
+            </FieldLabel>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
             <Suspense fallback={<Spinner />}>
               <MarkdownEditor
+                id="field-editor"
                 setContentWritten={(val) => {
                   setValue("content", val, {
                     shouldDirty: true,
@@ -183,7 +176,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
                 {...field}
               />
             </Suspense>
-          </FormControl>
+          </FieldRoot>
         )}
       />
       {showLockedOption && (
@@ -192,7 +185,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
           name="locked"
           rules={{ required: false }}
           render={({ field, fieldState }) => (
-            <FormControl id="locked" isInvalid={!!fieldState.error?.message}>
+            <FieldRoot invalid={!!fieldState.error?.message}>
               <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
               <CheckboxWrapper>
                 <CheckboxItem
@@ -208,7 +201,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
                   {t("myNdla.arena.topic.locked")}
                 </Label>
               </CheckboxWrapper>
-            </FormControl>
+            </FieldRoot>
           )}
         />
       )}
diff --git a/src/containers/MyNdla/Arena/components/Users.tsx b/src/containers/MyNdla/Arena/components/Users.tsx
index ff6b94f55d..3b325c2f15 100644
--- a/src/containers/MyNdla/Arena/components/Users.tsx
+++ b/src/containers/MyNdla/Arena/components/Users.tsx
@@ -12,8 +12,8 @@ import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
 import { colors, spacing, misc } from "@ndla/core";
-import { InputV3 } from "@ndla/forms";
 import { Pager } from "@ndla/pager";
+import { Input } from "@ndla/primitives";
 import UserList from "./UserList";
 import { routes } from "../../../../routeHelpers";
 import { useArenaUsers } from "../../arenaQueries";
@@ -39,7 +39,7 @@ type SearchObject = {
   page: string;
 };
 
-const SearchInput = styled(InputV3)`
+const SearchInput = styled(Input)`
   width: 35%;
 `;
 
diff --git a/src/containers/MyNdla/Folders/components/FolderForm.tsx b/src/containers/MyNdla/Folders/components/FolderForm.tsx
index 55af5f7260..306a451b5c 100644
--- a/src/containers/MyNdla/Folders/components/FolderForm.tsx
+++ b/src/containers/MyNdla/Folders/components/FolderForm.tsx
@@ -12,9 +12,8 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { LoadingButton } from "@ndla/button";
 import { spacing } from "@ndla/core";
-import { FieldErrorMessage, FormControl, InputV3, Label, TextAreaV3 } from "@ndla/forms";
 import { ModalCloseButton } from "@ndla/modal";
-import { Button } from "@ndla/primitives";
+import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
 import { GQLFolder } from "../../../../graphqlTypes";
 import useValidationTranslation from "../../../../util/useValidationTranslation";
 import FieldLength from "../../components/FieldLength";
@@ -87,14 +86,12 @@ const FolderForm = ({ folder, onSave, siblings, loading }: EditFolderFormProps)
           },
         }}
         render={({ field, fieldState }) => (
-          <FormControl id="name" isInvalid={!!fieldState.error?.message}>
-            <Label textStyle="label-small" margin="none">
-              {t("validation.fields.name")}
-            </Label>
+          <FieldRoot invalid={!!fieldState.error?.message}>
+            <FieldLabel>{t("validation.fields.name")}</FieldLabel>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
-            <InputV3 {...field} />
+            <FieldInput {...field} />
             <FieldLength value={field.value?.length ?? 0} maxLength={nameMaxLength} />
-          </FormControl>
+          </FieldRoot>
         )}
       />
       <Controller
@@ -111,14 +108,12 @@ const FolderForm = ({ folder, onSave, siblings, loading }: EditFolderFormProps)
           },
         }}
         render={({ field, fieldState }) => (
-          <FormControl id="description" isInvalid={!!fieldState.error?.message}>
-            <Label textStyle="label-small" margin="none">
-              {t("validation.fields.description")}
-            </Label>
+          <FieldRoot invalid={!!fieldState.error?.message}>
+            <FieldLabel>{t("validation.fields.description")}</FieldLabel>
             <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
-            <TextAreaV3 {...field} />
+            <FieldInput {...field} />
             <FieldLength value={field.value?.length ?? 0} maxLength={descriptionMaxLength} />
-          </FormControl>
+          </FieldRoot>
         )}
       />
       <StyledParagraph>{t("myNdla.folder.sharedWarning")}</StyledParagraph>
diff --git a/src/containers/SearchPage/components/SearchHeader.tsx b/src/containers/SearchPage/components/SearchHeader.tsx
index 6309406255..dc63b57ca0 100644
--- a/src/containers/SearchPage/components/SearchHeader.tsx
+++ b/src/containers/SearchPage/components/SearchHeader.tsx
@@ -11,11 +11,10 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
 import { breakpoints, mq, spacing } from "@ndla/core";
-import { InputContainer, InputV3 } from "@ndla/forms";
 import { Cross, Plus } from "@ndla/icons/action";
 import { Search } from "@ndla/icons/common";
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
-import { Button, IconButton } from "@ndla/primitives";
+import { Button, IconButton, Input, InputContainer } from "@ndla/primitives";
 import { Text } from "@ndla/typography";
 import SubjectFilter from "./SubjectFilter";
 import { GQLCompetenceGoal, GQLCoreElement, GQLSubjectInfoFragment } from "../../../graphqlTypes";
@@ -45,10 +44,6 @@ const Wrapper = styled.div`
   }
 `;
 
-const StyledInputContainer = styled(InputContainer)`
-  background: transparent;
-`;
-
 const FiltersWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
@@ -130,8 +125,8 @@ const SearchHeader = ({
     <Wrapper>
       <form action="/search/" onSubmit={handleSearchSubmit}>
         <StyledSearchWrapper>
-          <StyledInputContainer>
-            <InputV3
+          <InputContainer>
+            <Input
               ref={inputRef}
               type="search"
               autoComplete="off"
@@ -154,7 +149,7 @@ const SearchHeader = ({
                 <Cross />
               </IconButton>
             )}
-          </StyledInputContainer>
+          </InputContainer>
           <IconButton
             variant="primary"
             type="submit"