diff --git a/frontend/libs/studio-components/.eslintrc.js b/frontend/libs/studio-components/.eslintrc.js
index 9a2d0585fe7..f1c32d3895e 100644
--- a/frontend/libs/studio-components/.eslintrc.js
+++ b/frontend/libs/studio-components/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
             selector: ['variable', 'function'],
             modifiers: ['exported'],
             format: ['PascalCase'],
-            prefix: ['Studio'],
+            prefix: ['Studio', 'use'],
           },
         ],
       },
diff --git a/frontend/libs/studio-components/src/components/StudioNumberInput/StudioDecimalInput.test.tsx b/frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.test.tsx
similarity index 100%
rename from frontend/libs/studio-components/src/components/StudioNumberInput/StudioDecimalInput.test.tsx
rename to frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.test.tsx
diff --git a/frontend/libs/studio-components/src/components/StudioNumberInput/StudioDecimalInput.tsx b/frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx
similarity index 60%
rename from frontend/libs/studio-components/src/components/StudioNumberInput/StudioDecimalInput.tsx
rename to frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx
index 2fd3486baed..e859f1ac9d2 100644
--- a/frontend/libs/studio-components/src/components/StudioNumberInput/StudioDecimalInput.tsx
+++ b/frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx
@@ -1,10 +1,10 @@
 import type { RefObject } from 'react';
 import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import type { TextfieldProps } from '@digdir/design-system-react';
-import { Textfield } from '@digdir/design-system-react';
 import { convertNumberToString, convertStringToNumber, isStringValidDecimalNumber } from './utils';
+import type { StudioTextfieldProps } from '../StudioTextfield';
+import { StudioTextfield } from '../StudioTextfield';
 
-export interface StudioDecimalInputProps extends Omit<TextfieldProps, 'onChange'> {
+export interface StudioDecimalInputProps extends Omit<StudioTextfieldProps, 'onChange'> {
   description: string;
   onChange: (value: number) => void;
   value?: number;
@@ -17,8 +17,6 @@ export const StudioDecimalInput = forwardRef(
     ref: RefObject<HTMLInputElement>,
   ) => {
     const [inputValue, setInputValue] = useState('');
-    const [hasBeenBlurred, setHasBeenBlurred] = useState(false);
-    const isEmpty = inputValue === '';
 
     useEffect(() => {
       const newInputValue = convertNumberToString(value);
@@ -29,25 +27,22 @@ export const StudioDecimalInput = forwardRef(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         const input = e.target.value;
         setInputValue(input);
-        if (isEmpty) setHasBeenBlurred(false);
         if (isStringValidDecimalNumber(input)) onChange(convertStringToNumber(input));
       },
-      [setInputValue, onChange, isEmpty, setHasBeenBlurred],
+      [setInputValue, onChange],
     );
 
-    const errorMessage = useMemo(() => {
-      const showErrorMessage =
-        hasBeenBlurred && !isEmpty && !isStringValidDecimalNumber(inputValue);
-      return showErrorMessage ? validationErrorMessage : undefined;
-    }, [hasBeenBlurred, isEmpty, inputValue, validationErrorMessage]);
+    const errorMessage = useMemo(
+      () => (!isStringValidDecimalNumber(inputValue) ? validationErrorMessage : undefined),
+      [inputValue, validationErrorMessage],
+    );
 
     return (
-      <Textfield
+      <StudioTextfield
         description={description}
         value={inputValue}
         onChange={handleInputChange}
-        error={errorMessage}
-        onBlur={() => setHasBeenBlurred(true)}
+        errorAfterBlur={errorMessage}
         inputMode='decimal'
         ref={ref}
         {...rest}
diff --git a/frontend/libs/studio-components/src/components/StudioNumberInput/index.ts b/frontend/libs/studio-components/src/components/StudioDecimalInput/index.ts
similarity index 100%
rename from frontend/libs/studio-components/src/components/StudioNumberInput/index.ts
rename to frontend/libs/studio-components/src/components/StudioDecimalInput/index.ts
diff --git a/frontend/libs/studio-components/src/components/StudioNumberInput/utils.test.ts b/frontend/libs/studio-components/src/components/StudioDecimalInput/utils.test.ts
similarity index 100%
rename from frontend/libs/studio-components/src/components/StudioNumberInput/utils.test.ts
rename to frontend/libs/studio-components/src/components/StudioDecimalInput/utils.test.ts
diff --git a/frontend/libs/studio-components/src/components/StudioNumberInput/utils.ts b/frontend/libs/studio-components/src/components/StudioDecimalInput/utils.ts
similarity index 100%
rename from frontend/libs/studio-components/src/components/StudioNumberInput/utils.ts
rename to frontend/libs/studio-components/src/components/StudioDecimalInput/utils.ts
diff --git a/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.module.css b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.module.css
new file mode 100644
index 00000000000..cff4d1f40db
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.module.css
@@ -0,0 +1,5 @@
+.studioLabelWrapper.withAsterisk::after {
+  content: '*';
+  color: var(--fds-semantic-text-warning-default);
+  margin-left: var(--fds-spacing-1);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.test.tsx b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.test.tsx
new file mode 100644
index 00000000000..831882e0d54
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { StudioLabelWrapper } from './StudioLabelWrapper';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('./StudioLabelWrapper.module.css', () => ({
+  studioLabelWrapper: 'studioLabelWrapper',
+  withAsterisk: 'withAsterisk',
+}));
+
+/* eslint-disable testing-library/no-node-access */
+describe('StudioLabelWrapper', () => {
+  it('Renders with given label', () => {
+    const label = 'test-label';
+    render(<StudioLabelWrapper>{label}</StudioLabelWrapper>);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it('Renders with withAsterisk class when "withAsterisk" is set', () => {
+    const { container } = render(<StudioLabelWrapper withAsterisk>Test</StudioLabelWrapper>);
+    expect(container.firstChild).toHaveClass('withAsterisk');
+  });
+
+  it.each([false, undefined])(
+    'Renders without withAsterisk class when "withAsterisk" is %s',
+    (withAsterisk) => {
+      const { container } = render(
+        <StudioLabelWrapper withAsterisk={withAsterisk}>Test</StudioLabelWrapper>,
+      );
+      expect(container.firstChild).not.toHaveClass('withAsterisk');
+    },
+  );
+
+  it('Appends given classname to internal classname', () => {
+    const className = 'test-class';
+    const { container } = render(
+      <StudioLabelWrapper className={className}>Test</StudioLabelWrapper>,
+    );
+    expect(container.firstChild).toHaveClass(className);
+    expect(container.firstChild).toHaveClass('studioLabelWrapper');
+  });
+
+  it('Forwards the ref object to the span element if given', () => {
+    const ref = React.createRef<HTMLSpanElement>();
+    const { container } = render(<StudioLabelWrapper ref={ref}>Test</StudioLabelWrapper>);
+    expect(ref.current).toBe(container.firstChild);
+  });
+});
diff --git a/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.tsx b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.tsx
new file mode 100644
index 00000000000..c520552e789
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioLabelWrapper/StudioLabelWrapper.tsx
@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
+import classes from './StudioLabelWrapper.module.css';
+import cn from 'classnames';
+
+export type StudioLabelWrapperProps = HTMLAttributes<HTMLSpanElement> & {
+  withAsterisk?: boolean;
+};
+
+const StudioLabelWrapper = forwardRef<HTMLSpanElement, StudioLabelWrapperProps>(
+  ({ children, className, withAsterisk, ...rest }, ref) => {
+    const finalClassName = cn(
+      classes.studioLabelWrapper,
+      withAsterisk && classes.withAsterisk,
+      className,
+    );
+
+    return (
+      <span className={finalClassName} {...rest} ref={ref}>
+        {children}
+      </span>
+    );
+  },
+);
+
+StudioLabelWrapper.displayName = 'StudioLabelWrapper';
+
+export { StudioLabelWrapper };
diff --git a/frontend/libs/studio-components/src/components/StudioLabelWrapper/index.ts b/frontend/libs/studio-components/src/components/StudioLabelWrapper/index.ts
new file mode 100644
index 00000000000..345cece0ebe
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioLabelWrapper/index.ts
@@ -0,0 +1,2 @@
+export { StudioLabelWrapper } from './StudioLabelWrapper';
+export type { StudioLabelWrapperProps } from './StudioLabelWrapper';
diff --git a/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.test.tsx b/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.test.tsx
new file mode 100644
index 00000000000..b1401080058
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.test.tsx
@@ -0,0 +1,155 @@
+import type { StudioTextareaProps } from './StudioTextarea';
+import { StudioTextarea } from './StudioTextarea';
+import { act, render, screen } from '@testing-library/react';
+import type { RefObject } from 'react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('StudioTextarea', () => {
+  it('Renders a textarea', () => {
+    renderTextarea();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders with given label', () => {
+    const label = 'test-label';
+    renderTextarea({ label });
+    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
+  });
+
+  it('Renders with given label when there is an asterisk', () => {
+    const label = 'test-label';
+    renderTextarea({ label, withAsterisk: true });
+    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
+  });
+
+  it('Renders with the given value', () => {
+    const value = 'test';
+    renderTextarea({ value });
+    expect(screen.getByRole('textbox')).toHaveValue(value);
+  });
+
+  it('Updates the value when the component rerenders with another value', () => {
+    const value = 'test';
+    const { rerender } = renderTextarea({ value });
+    expect(screen.getByRole('textbox')).toHaveValue(value);
+    const newValue = 'new value';
+    rerender(<StudioTextarea value={newValue} />);
+    expect(screen.getByRole('textbox')).toHaveValue(newValue);
+  });
+
+  it('Updates the value when the user types', async () => {
+    const user = userEvent.setup();
+    renderTextarea();
+    const textarea = screen.getByRole('textbox');
+    const newValue = 'new value';
+    await act(() => user.type(textarea, newValue));
+    expect(textarea).toHaveValue(newValue);
+  });
+
+  it('Calls the onChange handler when the user types', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    renderTextarea({ onChange });
+    const textarea = screen.getByRole('textbox');
+    const newValue = 'new value';
+    await act(() => user.type(textarea, newValue));
+    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    const expectedTarget = expect.objectContaining({ value: newValue });
+    const expectedEvent = expect.objectContaining({ target: expectedTarget });
+    expect(onChange).toHaveBeenLastCalledWith(expectedEvent);
+  });
+
+  it('Calls the onBlur handler when the user blurs', async () => {
+    const user = userEvent.setup();
+    const onBlur = jest.fn();
+    renderTextarea({ onBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.click(textarea));
+    await act(() => user.tab());
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('Does not display the after blur error message by default', () => {
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Does not display the after blur error message when the textarea is empty and the user blurs', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.click(textarea));
+    await act(() => user.tab());
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Does not display the after blur error message when the user types', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.type(textarea, 'test'));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Displays the message provided through the errorAfterBlur prop when the user types something and then blurs', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.type(textarea, 'test'));
+    await act(() => user.tab());
+    expect(screen.getByText(errorAfterBlur)).toBeInTheDocument();
+  });
+
+  it('Diplays the message provided through the errorAfterBlur prop when the user types something after blurring', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.type(textarea, 'test'));
+    await act(() => user.tab());
+    await act(() => user.type(textarea, 'test'));
+    expect(screen.getByText(errorAfterBlur)).toBeInTheDocument();
+  });
+
+  it('Does not display the message provided through the errorAfterBlur prop when the user empties the textarea after blurring', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextarea({ errorAfterBlur });
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.type(textarea, 'test'));
+    await act(() => user.tab());
+    await act(() => user.clear(textarea));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+    await act(() => user.type(textarea, 'test'));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Displays the error message if it is set in the "error" prop', async () => {
+    const user = userEvent.setup();
+    const error = 'error message';
+    renderTextarea({ error });
+    expect(screen.getByText(error)).toBeInTheDocument();
+    const textarea = screen.getByRole('textbox');
+    await act(() => user.type(textarea, 'test'));
+    expect(screen.getByText(error)).toBeInTheDocument();
+    await act(() => user.tab());
+    await act(() => user.clear(textarea));
+    expect(screen.getByText(error)).toBeInTheDocument();
+  });
+
+  it('Forwards the ref object to the textarea element if given', () => {
+    const ref = React.createRef<HTMLTextAreaElement>();
+    renderTextarea({}, ref);
+    expect(ref.current).toBe(screen.getByRole('textbox'));
+  });
+});
+
+const renderTextarea = (
+  props: Partial<StudioTextareaProps> = {},
+  ref?: RefObject<HTMLTextAreaElement>,
+) => render(<StudioTextarea {...props} ref={ref} />);
diff --git a/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.tsx b/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.tsx
new file mode 100644
index 00000000000..26f7b8b5993
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextarea/StudioTextarea.tsx
@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import type { TextareaProps } from '@digdir/design-system-react';
+import { Textarea } from '@digdir/design-system-react';
+import { useTextInputProps } from '../../hooks/useTextInputProps';
+import type { SharedTextInputProps } from '../../types/SharedTextInputProps';
+
+export type StudioTextareaProps = SharedTextInputProps<HTMLTextAreaElement>;
+
+const StudioTextarea = forwardRef<HTMLTextAreaElement, StudioTextareaProps>((props, ref) => {
+  const textareaProps: TextareaProps = useTextInputProps<HTMLTextAreaElement>(props);
+  return <Textarea ref={ref} {...textareaProps} />;
+});
+
+StudioTextarea.displayName = 'StudioTextarea';
+
+export { StudioTextarea };
diff --git a/frontend/libs/studio-components/src/components/StudioTextarea/index.ts b/frontend/libs/studio-components/src/components/StudioTextarea/index.ts
new file mode 100644
index 00000000000..dc407ac3ce6
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextarea/index.ts
@@ -0,0 +1,2 @@
+export { StudioTextarea } from './StudioTextarea';
+export type { StudioTextareaProps } from './StudioTextarea';
diff --git a/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.test.tsx b/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.test.tsx
new file mode 100644
index 00000000000..7e56b9f699e
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.test.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import type { StudioTextfieldProps } from './StudioTextfield';
+import { StudioTextfield } from './StudioTextfield';
+import { StudioTextarea } from '../StudioTextarea';
+import userEvent from '@testing-library/user-event';
+import type { RefObject } from 'react';
+
+describe('StudioTextfield', () => {
+  it('Renders a text field', () => {
+    renderTextfield();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders with given label', () => {
+    const label = 'test-label';
+    renderTextfield({ label });
+    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
+  });
+
+  it('Renders with given label when there is an asterisk', () => {
+    const label = 'test-label';
+    renderTextfield({ label, withAsterisk: true });
+    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
+  });
+
+  it('Renders with the given value', () => {
+    const value = 'test';
+    renderTextfield({ value });
+    expect(screen.getByRole('textbox')).toHaveValue(value);
+  });
+
+  it('Updates the value when the component rerenders with another value', () => {
+    const value = 'test';
+    const { rerender } = renderTextfield({ value });
+    expect(screen.getByRole('textbox')).toHaveValue(value);
+    const newValue = 'new value';
+    rerender(<StudioTextarea value={newValue} />);
+    expect(screen.getByRole('textbox')).toHaveValue(newValue);
+  });
+
+  it('Updates the value when the user types', async () => {
+    const user = userEvent.setup();
+    renderTextfield();
+    const textfield = screen.getByRole('textbox');
+    const newValue = 'new value';
+    await act(() => user.type(textfield, newValue));
+    expect(textfield).toHaveValue(newValue);
+  });
+
+  it('Calls the onChange handler when the user types', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    renderTextfield({ onChange });
+    const textfield = screen.getByRole('textbox');
+    const newValue = 'new value';
+    await act(() => user.type(textfield, newValue));
+    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    const expectedTarget = expect.objectContaining({ value: newValue });
+    const expectedEvent = expect.objectContaining({ target: expectedTarget });
+    expect(onChange).toHaveBeenLastCalledWith(expectedEvent);
+  });
+
+  it('Calls the onBlur handler when the user blurs', async () => {
+    const user = userEvent.setup();
+    const onBlur = jest.fn();
+    renderTextfield({ onBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.click(textfield));
+    await act(() => user.tab());
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('Does not display the after blur error message by default', () => {
+    const afterBlurError = 'error message';
+    renderTextfield({ errorAfterBlur: afterBlurError });
+    expect(screen.queryByText(afterBlurError)).not.toBeInTheDocument();
+  });
+
+  it('Does not display the after blur error message when the textarea is empty and the user blurs', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextfield({ errorAfterBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.click(textfield));
+    await act(() => user.tab());
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Does not display the message provided through the errorAfterBlur prop when the user types', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextfield({ errorAfterBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.type(textfield, 'test'));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Displays the message provided through the errorAfterBlur prop when the use types something and then blurs', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextfield({ errorAfterBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.type(textfield, 'test'));
+    await act(() => user.tab());
+    expect(screen.getByText(errorAfterBlur)).toBeInTheDocument();
+  });
+
+  it('Diplays the message provided through the errorAfterBlur prop when the user types something after blurring', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextfield({ errorAfterBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.type(textfield, 'test'));
+    await act(() => user.tab());
+    await act(() => user.type(textfield, 'test'));
+    expect(screen.getByText(errorAfterBlur)).toBeInTheDocument();
+  });
+
+  it('Does not display the message provided through the errorAfterBlur prop when the user empties the textarea after blurring', async () => {
+    const user = userEvent.setup();
+    const errorAfterBlur = 'error message';
+    renderTextfield({ errorAfterBlur });
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.type(textfield, 'test'));
+    await act(() => user.tab());
+    await act(() => user.clear(textfield));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+    await act(() => user.type(textfield, 'test'));
+    expect(screen.queryByText(errorAfterBlur)).not.toBeInTheDocument();
+  });
+
+  it('Displays the error message if it is set in the "error" prop', async () => {
+    const user = userEvent.setup();
+    const error = 'error message';
+    renderTextfield({ error });
+    expect(screen.getByText(error)).toBeInTheDocument();
+    const textfield = screen.getByRole('textbox');
+    await act(() => user.type(textfield, 'test'));
+    expect(screen.getByText(error)).toBeInTheDocument();
+    await act(() => user.tab());
+    await act(() => user.clear(textfield));
+    expect(screen.getByText(error)).toBeInTheDocument();
+  });
+
+  it('Forwards the ref object to the textarea element if given', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    renderTextfield({}, ref);
+    expect(ref.current).toBe(screen.getByRole('textbox'));
+  });
+});
+
+const renderTextfield = (
+  props: Partial<StudioTextfieldProps> = {},
+  ref?: RefObject<HTMLInputElement>,
+) => render(<StudioTextfield {...props} ref={ref} />);
diff --git a/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.tsx b/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.tsx
new file mode 100644
index 00000000000..b4a69735a86
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextfield/StudioTextfield.tsx
@@ -0,0 +1,15 @@
+import { Textfield } from '@digdir/design-system-react';
+import React, { forwardRef } from 'react';
+import type { SharedTextInputProps } from '../../types/SharedTextInputProps';
+import { useTextInputProps } from '../../hooks/useTextInputProps';
+
+export type StudioTextfieldProps = SharedTextInputProps<HTMLInputElement>;
+
+const StudioTextfield = forwardRef<HTMLInputElement, StudioTextfieldProps>((props, ref) => {
+  const textfieldProps = useTextInputProps<HTMLInputElement>(props);
+  return <Textfield ref={ref} {...textfieldProps} />;
+});
+
+StudioTextfield.displayName = 'StudioTextfield';
+
+export { StudioTextfield };
diff --git a/frontend/libs/studio-components/src/components/StudioTextfield/index.ts b/frontend/libs/studio-components/src/components/StudioTextfield/index.ts
new file mode 100644
index 00000000000..4dd72df8b03
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioTextfield/index.ts
@@ -0,0 +1,2 @@
+export { StudioTextfield } from './StudioTextfield';
+export type { StudioTextfieldProps } from './StudioTextfield';
diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts
index 60f36434144..15daa7f27fb 100644
--- a/frontend/libs/studio-components/src/components/index.ts
+++ b/frontend/libs/studio-components/src/components/index.ts
@@ -1,12 +1,15 @@
 export * from './StudioAnimateHeight';
 export * from './StudioButton';
 export * from './StudioCenter';
+export * from './StudioDecimalInput';
 export * from './StudioDeleteButton';
 export * from './StudioDropdownMenu';
 export * from './StudioGridSelector';
+export * from './StudioLabelWrapper';
 export * from './StudioModal';
 export * from './StudioNotFoundPage';
-export * from './StudioNumberInput';
 export * from './StudioPageSpinner';
 export * from './StudioSpinner';
+export * from './StudioTextarea';
+export * from './StudioTextfield';
 export * from './StudioTreeView';
diff --git a/frontend/libs/studio-components/src/hooks/useTextInputProps.tsx b/frontend/libs/studio-components/src/hooks/useTextInputProps.tsx
new file mode 100644
index 00000000000..5d84e5b87ec
--- /dev/null
+++ b/frontend/libs/studio-components/src/hooks/useTextInputProps.tsx
@@ -0,0 +1,58 @@
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useEffect, useState } from 'react';
+import type { AdditionalProps, SharedTextInputProps } from '../types/SharedTextInputProps';
+import { StudioLabelWrapper } from '../components/StudioLabelWrapper';
+import React from 'react';
+
+type ElementType = HTMLInputElement | HTMLTextAreaElement;
+
+export function useTextInputProps<E extends ElementType>(
+  props: SharedTextInputProps<E>,
+): Omit<SharedTextInputProps<E>, keyof AdditionalProps> {
+  const {
+    value = '',
+    onChange,
+    onBlur,
+    error,
+    errorAfterBlur,
+    label,
+    withAsterisk,
+    ...rest
+  } = props;
+
+  const [valueState, setValueState] = useState(value);
+  const [showError, setShowError] = useState(false);
+
+  const disableError = () => setShowError(false);
+  const enableError = () => setShowError(true);
+
+  useEffect(() => {
+    if (!value) disableError();
+    setValueState(value);
+  }, [value]);
+
+  const handleChange = (event: ChangeEvent<E>) => {
+    setValueState(event.target.value);
+    if (!event.target.value) disableError();
+    onChange?.(event);
+  };
+
+  const handleBlur = (event: FocusEvent<E>) => {
+    if (event.target.value) enableError();
+    onBlur?.(event);
+  };
+
+  const errorComponent = showError && errorAfterBlur ? errorAfterBlur : error;
+  const labelComponent = (
+    <StudioLabelWrapper withAsterisk={withAsterisk}>{label}</StudioLabelWrapper>
+  );
+
+  return {
+    ...rest,
+    value: valueState,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    error: errorComponent,
+    label: labelComponent,
+  } as Omit<SharedTextInputProps<E>, keyof AdditionalProps>;
+}
diff --git a/frontend/libs/studio-components/src/types/SharedTextInputProps.ts b/frontend/libs/studio-components/src/types/SharedTextInputProps.ts
new file mode 100644
index 00000000000..cbb44bf956f
--- /dev/null
+++ b/frontend/libs/studio-components/src/types/SharedTextInputProps.ts
@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TextareaProps, TextfieldProps } from '@digdir/design-system-react';
+
+export type SharedTextInputProps<E extends HTMLTextAreaElement | HTMLInputElement> =
+  HTMLAttributes<E> & DesignSystemProps<E> & AdditionalProps;
+
+type DesignSystemProps<E> = E extends HTMLInputElement
+  ? TextfieldProps
+  : E extends HTMLTextAreaElement
+    ? TextareaProps
+    : never;
+
+export type AdditionalProps = {
+  errorAfterBlur?: ReactNode;
+  withAsterisk?: boolean;
+};
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx
index 2828fab310e..7a552020acb 100644
--- a/frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector/NameField.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { NameError } from '../../types';
 import type { TextfieldProps } from '@digdir/design-system-react';
-import { AltinnTextField } from 'app-shared/components/AltinnTextField';
+import { StudioTextfield } from '@studio/components';
 import { extractNameFromPointer, replaceLastPointerSegment } from '@altinn/schema-model';
 import { isValidName } from '../../utils/ui-schema-utils';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +54,7 @@ export function NameField({ id, pointer, handleSave, label, ...props }: NameFiel
         }
       }}
       renderField={({ errorCode, customRequired, fieldProps }) => (
-        <AltinnTextField
+        <StudioTextfield
           {...fieldProps}
           id={id}
           onChange={(e) => fieldProps.onChange(e.target.value, e)}
diff --git a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.module.css b/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.module.css
deleted file mode 100644
index 74340d3f8cf..00000000000
--- a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.withAsterisk label::after {
-  content: '*';
-  color: #c30000;
-  margin-left: 0.2rem;
-}
diff --git a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.test.tsx b/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.test.tsx
deleted file mode 100644
index 69f1d5b201e..00000000000
--- a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { render as renderRtl, screen } from '@testing-library/react';
-import type { AltinnTextFieldProps } from 'app-shared/components/AltinnTextField/AltinnTextField';
-import { AltinnTextField } from 'app-shared/components/AltinnTextField/AltinnTextField';
-
-jest.mock('./AltinnTextField.module.css', () => ({
-  withAsterisk: 'withAsterisk',
-}));
-
-describe('AltinnTextField', () => {
-  it('Renders a text field', () => {
-    render();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-  });
-
-  it('Renders with given label', () => {
-    const label = 'test-label';
-    render({ label });
-    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
-  });
-
-  it('Renders with given label when there is an asterisk', () => {
-    const label = 'test-label';
-    render({ label, withAsterisk: true });
-    expect(screen.getByRole('textbox', { name: label })).toBeInTheDocument();
-  });
-
-  it.each([false, undefined])(
-    'Renders without withAsterisk class when "withAsterisk" is %s',
-    (withAsterisk) => {
-      const { container } = render({ withAsterisk });
-      expect(container.firstChild).not.toHaveClass('withAsterisk'); // eslint-disable-line testing-library/no-node-access
-    },
-  );
-
-  it('Renders with withAsterisk class when "withAsterisk" is true', () => {
-    const { container } = render({ withAsterisk: true });
-    expect(container.firstChild).toHaveClass('withAsterisk'); // eslint-disable-line testing-library/no-node-access
-  });
-});
-
-const render = (props: Partial<AltinnTextFieldProps> = {}) =>
-  renderRtl(<AltinnTextField {...props} />);
diff --git a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.tsx b/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.tsx
deleted file mode 100644
index 3619ee64219..00000000000
--- a/frontend/packages/shared/src/components/AltinnTextField/AltinnTextField.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { TextfieldProps } from '@digdir/design-system-react';
-import { Textfield } from '@digdir/design-system-react';
-import React from 'react';
-import cn from 'classnames';
-import classes from './AltinnTextField.module.css';
-
-export type AltinnTextFieldProps = TextfieldProps & {
-  withAsterisk?: boolean;
-};
-
-export const AltinnTextField = ({ withAsterisk, ...rest }: AltinnTextFieldProps) => (
-  <span className={cn(withAsterisk && classes.withAsterisk)}>
-    <Textfield {...rest} />
-  </span>
-);
diff --git a/frontend/packages/shared/src/components/AltinnTextField/index.ts b/frontend/packages/shared/src/components/AltinnTextField/index.ts
deleted file mode 100644
index 2855799edce..00000000000
--- a/frontend/packages/shared/src/components/AltinnTextField/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AltinnTextField } from './AltinnTextField';
-export type { AltinnTextFieldProps } from './AltinnTextField';