From 5601aad96989cc93ec2cb67c87b887e780296be9 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Fri, 8 Nov 2024 11:28:11 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20`Textfield`=20?=
 =?UTF-8?q?to=20use=20`Field`=20(#2710)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolves #2713

- Adds `DefaultProps` to `Field`
- Adds `counter` which takes a `number` or `FieldCounterProps`
- Kept `error` as we can look at this vs changes in `ValidationMessage`
later
- Will look closer at affix in #2748

---------

Co-authored-by: barsnes <tobias.barsnes@digdir.no>
---
 .changeset/eleven-experts-raise.md            |   5 +
 .changeset/loud-bobcats-look.md               |   5 +
 .changeset/olive-waves-build.md               |   5 +
 .changeset/popular-jeans-happen.md            |   5 +
 .changeset/real-zoos-fail.md                  |   5 +
 .changeset/witty-moose-scream.md              |   5 +
 packages/css/field.css                        |   6 +-
 .../ErrorSummary/ErrorSummary.stories.tsx     |   1 +
 .../react/src/components/form/Field/Field.mdx |   2 +
 .../react/src/components/form/Field/Field.tsx |   3 +-
 .../react/src/components/form/Input/Input.tsx |   3 +-
 .../src/components/form/Textarea/Textarea.mdx |   3 -
 .../form/Textarea/Textarea.stories.tsx        |  15 -
 .../components/form/Textfield/Textfield.mdx   |  36 ++-
 .../form/Textfield/Textfield.stories.tsx      |  57 +++-
 .../form/Textfield/Textfield.test.tsx         |  60 +---
 .../components/form/Textfield/Textfield.tsx   | 291 ++++++------------
 .../components/form/Textfield/useTextfield.ts |  49 ---
 packages/react/stories/showcase.module.css    |   7 -
 packages/react/stories/showcase.stories.tsx   |   1 -
 packages/react/stories/testing.stories.tsx    |   3 +-
 21 files changed, 213 insertions(+), 354 deletions(-)
 create mode 100644 .changeset/eleven-experts-raise.md
 create mode 100644 .changeset/loud-bobcats-look.md
 create mode 100644 .changeset/olive-waves-build.md
 create mode 100644 .changeset/popular-jeans-happen.md
 create mode 100644 .changeset/real-zoos-fail.md
 create mode 100644 .changeset/witty-moose-scream.md
 delete mode 100644 packages/react/src/components/form/Textfield/useTextfield.ts

diff --git a/.changeset/eleven-experts-raise.md b/.changeset/eleven-experts-raise.md
new file mode 100644
index 0000000000..e5fd9700da
--- /dev/null
+++ b/.changeset/eleven-experts-raise.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Removed `htmlSize`, you can now use native `size`
diff --git a/.changeset/loud-bobcats-look.md b/.changeset/loud-bobcats-look.md
new file mode 100644
index 0000000000..889d9ab212
--- /dev/null
+++ b/.changeset/loud-bobcats-look.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Refactored `characterLimit` to `counter` and now use new `Field.Counter` sub-component
diff --git a/.changeset/olive-waves-build.md b/.changeset/olive-waves-build.md
new file mode 100644
index 0000000000..189df40863
--- /dev/null
+++ b/.changeset/olive-waves-build.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Now works as expected with `data-size`
diff --git a/.changeset/popular-jeans-happen.md b/.changeset/popular-jeans-happen.md
new file mode 100644
index 0000000000..c591e323ee
--- /dev/null
+++ b/.changeset/popular-jeans-happen.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Added `multiline` for switching between `input` and `textarea`
diff --git a/.changeset/real-zoos-fail.md b/.changeset/real-zoos-fail.md
new file mode 100644
index 0000000000..d4533224ce
--- /dev/null
+++ b/.changeset/real-zoos-fail.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Removed `hideLabel`, use `aria-label` or `aria-describedby` for "hidden" labels
diff --git a/.changeset/witty-moose-scream.md b/.changeset/witty-moose-scream.md
new file mode 100644
index 0000000000..5dff1a2114
--- /dev/null
+++ b/.changeset/witty-moose-scream.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Textfield: Update to use `Field` internally
diff --git a/packages/css/field.css b/packages/css/field.css
index 0fbaf4adef..351bb66957 100644
--- a/packages/css/field.css
+++ b/packages/css/field.css
@@ -73,7 +73,11 @@
   display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
   position: relative;
   white-space: nowrap;
-  width: fit-content;
+  align-self: stretch; /* If ds-field is placed inside a flex container  we need to fill width */
+
+  &:has(input[size]) {
+    width: fit-content;
+  }
 
   & :not(.ds-input) {
     padding-inline: var(--dsc-field-affix-padding-inline);
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
index 47538fc328..7e076bdc8a 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx
@@ -45,6 +45,7 @@ export const WithForm: Story = () => (
     <Textfield
       label='Telefon'
       id='telefon'
+      type='tel'
       error='Telefonnummer kan kun inneholde siffer'
     />
 
diff --git a/packages/react/src/components/form/Field/Field.mdx b/packages/react/src/components/form/Field/Field.mdx
index 777ac8547c..54de73ae5a 100644
--- a/packages/react/src/components/form/Field/Field.mdx
+++ b/packages/react/src/components/form/Field/Field.mdx
@@ -18,4 +18,6 @@ Det er viktig at samme informasjon som vises i prefixet eller suffixet også er
 
 ## Antall tegn
 
+Bruk `Field.Counter` for å vise antall tegn som er skrevet i et tekstfelt.
+
 <Canvas of={FieldStories.Counter} />
diff --git a/packages/react/src/components/form/Field/Field.tsx b/packages/react/src/components/form/Field/Field.tsx
index f049723132..3b2ab68ff0 100644
--- a/packages/react/src/components/form/Field/Field.tsx
+++ b/packages/react/src/components/form/Field/Field.tsx
@@ -2,9 +2,10 @@ import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
+import type { DefaultProps } from '../../../types';
 import { fieldObserver } from './fieldObserver';
 
-export type FieldProps = HTMLAttributes<HTMLDivElement>;
+export type FieldProps = HTMLAttributes<HTMLDivElement> & DefaultProps;
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
   { className, ...rest },
   ref,
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index 541dd531d5..b7140ab6ec 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -4,10 +4,11 @@ import { forwardRef } from 'react';
 import type { DefaultProps } from '../../../types';
 
 type InputAttr = InputHTMLAttributes<HTMLInputElement>;
+
 export type InputProps = {
   /** Supported `input` types */
   type?: InputAttr['type'];
-  /** Defines the width of <Input> in count of characters.
+  /** Defines the width of `Input` in count of characters.
    */
   size?: number;
   /** Disables element
diff --git a/packages/react/src/components/form/Textarea/Textarea.mdx b/packages/react/src/components/form/Textarea/Textarea.mdx
index 694fb07217..f8997b6b43 100644
--- a/packages/react/src/components/form/Textarea/Textarea.mdx
+++ b/packages/react/src/components/form/Textarea/Textarea.mdx
@@ -9,9 +9,6 @@ import * as TextareaStories from './Textarea.stories';
 <Primary />
 <Controls />
 
-## Antall tegn
-
-{/* <Canvas of={TextareaStories.WithCharacterCounter} /> */}
 
 ## Kontrollert
 
diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
index 032a025b27..a3c15b95ec 100644
--- a/packages/react/src/components/form/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -45,21 +45,6 @@ export const Preview: Story = {
   ),
 };
 
-// export const WithCharacterCounter: Story = {
-//   args: {
-//     cols: 40,
-//     characterLimit: {
-//       maxCount: 5,
-//     },
-//   },
-//   render: (args) => (
-//     <>
-//       <Label>Label</Label>
-//       <Textarea {...args} />
-//     </>
-//   ),
-// };
-
 export const FullWidth: Story = {
   args: {
     cols: 40,
diff --git a/packages/react/src/components/form/Textfield/Textfield.mdx b/packages/react/src/components/form/Textfield/Textfield.mdx
index 67002da786..5547ea8830 100644
--- a/packages/react/src/components/form/Textfield/Textfield.mdx
+++ b/packages/react/src/components/form/Textfield/Textfield.mdx
@@ -7,11 +7,32 @@ import * as TextfieldStories from './Textfield.stories';
 
 # Textfield
 
-`Textfield` kalles tekstfelt på norsk. Det er et inndatafelt som for eksempel gir brukerne mulighet til å skrive korte tekster eller tall.
+`Textfield` kalles tekstfelt på norsk. Det er et inndatafelt som for eksempel gir brukerne mulighet til å skrive korte tekster eller tall.  
+ 
+<br/>
+
+- Du kan velge mellom både `input` og `textarea` for å lage tekstfelt.
+- `Textfield` er en ferdig sammensatt `Field` komponent for standard oppsett av et tekstfelt.  
+- Ønsker du mer kontroll eller funksjonalitet, komponer med [Field](/docs/komponenter-field--docs) komponenten direkte.
+
 
 <Primary />
 <Controls />
 
+## Slik bruker du Textfield
+
+```tsx
+import { Textfield } from '@digdir/designsystemet-react';
+
+<Textfield label="Navn" />
+```
+
+## Multiline
+
+Du endrer til `textarea` ved å sette `multiline` til `true`. Da kan brukerne skrive lengre tekster.
+
+<Canvas of={TextfieldStories.Rows} />
+
 ## Prefix/Suffix
 
 Prefixer og suffixer er nyttige for å vise enheter, valuta eller andre typer informasjon som er relevant for feltet.
@@ -22,17 +43,14 @@ Det er viktig at samme informasjon som vises i prefixet eller suffixet også er
 
 ## Antall tegn
 
-<Canvas of={TextfieldStories.WithCharacterCounter} />
+Bruk `counter` til å begrense antall tegn brukerne kan skrive i feltet.
+
+<Canvas of={TextfieldStories.Counter} />
 
 ## Kontrollert
 
 <Canvas of={TextfieldStories.Controlled} />
 
-## Html size
-
-`size` attributtet kan brukes for å angi bredden på tekstfeltet. Verdien kan være et tall fra 1 til 99.
-
-<Canvas of={TextfieldStories.HtmlSize} />
 
 ## Retningslinjer for når du skal bruke `Textfield`
 
@@ -82,7 +100,3 @@ Ikke bruk deaktivert tilstand (disabled state) på tekstfelt. Tenk heller over o
 ### Prefiks og suffiks
 
 Prefiks og suffiks er et ekstra visuelt hjelpemiddel, som blir ignorert av skjermlesere. Vi må alltid ha en beskrivende ledetekst. Prefiks og suffiks er plassert utenfor inndatafeltene de tilhører. Da unngår vi at de ikke skaper trøbbel i noen nettlesere, som kan sette inn et ikon i inndatafeltet (for eksempel ikoner for å vise eller lage passord).
-
-## CSS Variabler
-
-<CssVariables css={css} />
diff --git a/packages/react/src/components/form/Textfield/Textfield.stories.tsx b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
index cd2473907a..c44651c42a 100644
--- a/packages/react/src/components/form/Textfield/Textfield.stories.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
@@ -10,6 +10,39 @@ type Story = StoryObj<typeof Textfield>;
 export default {
   title: 'Komponenter/Textfield',
   component: Textfield,
+  argTypes: {
+    multiline: {
+      type: 'boolean',
+    },
+    // Using argType here to exclude values from React.HTMLInputTypeAttribute
+    type: {
+      control: 'select',
+      options: [
+        'checkbox',
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'radio',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+        // 'button',
+        'color',
+        'file',
+        // 'hidden',
+        // 'image',
+        // 'range',
+        // 'reset',
+        // 'submit',
+      ],
+    },
+  },
 } as Meta;
 
 export const Preview: Story = {
@@ -18,38 +51,38 @@ export const Preview: Story = {
     disabled: false,
     readOnly: false,
     'data-size': 'md',
+    multiline: false,
     description: '',
     error: '',
+    counter: 0,
   },
 };
 
-export const WithCharacterCounter: Story = {
+export const Rows: Story = {
   args: {
     label: 'Label',
-    characterLimit: {
-      maxCount: 5,
-    },
+    multiline: true,
+    rows: 4,
   },
 };
 
-export const HtmlSize: Story = {
+export const Adornments: Story = {
   args: {
-    label: 'Label',
-    htmlSize: 10,
+    prefix: 'NOK',
+    suffix: 'pr. mnd',
+    label: 'Hvor mange kroner koster det per måned?',
   },
 };
 
-export const Adornments: Story = {
+export const Counter: Story = {
   args: {
-    prefix: 'NOK',
-    suffix: 'pr. mnd',
-    'data-size': 'md',
+    counter: 10,
     label: 'Hvor mange kroner koster det per måned?',
   },
 };
 
 export const Controlled: StoryFn<typeof Textfield> = () => {
-  const [value, setValue] = useState<string>();
+  const [value, setValue] = useState<string>('');
   return (
     <>
       <Textfield
diff --git a/packages/react/src/components/form/Textfield/Textfield.test.tsx b/packages/react/src/components/form/Textfield/Textfield.test.tsx
index a0a6e421f4..f7e03e4d0e 100644
--- a/packages/react/src/components/form/Textfield/Textfield.test.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.test.tsx
@@ -8,29 +8,25 @@ import { Textfield } from './Textfield';
 const user = userEvent.setup();
 
 describe('Textfield', () => {
-  test('has correct value and label', () => {
+  it('has correct value and label', () => {
     render({ value: 'test', label: 'label' });
     expect(screen.getByLabelText('label')).toBeDefined();
     expect(screen.getByDisplayValue('test')).toBeDefined();
   });
 
-  test('has correct description', () => {
+  it('has correct description', () => {
     render({ description: 'description' });
     expect(
       screen.getByRole('textbox', { description: 'description' }),
     ).toBeDefined();
   });
 
-  test('has correct description and label when label is hidden', () => {
-    render({ description: 'description', label: 'label', hideLabel: true });
-
-    expect(screen.getByLabelText('label')).toBeDefined();
-    expect(
-      screen.getByRole('textbox', { description: 'description' }),
-    ).toBeDefined();
+  it('should become a textarea when multiline is true', () => {
+    render({ multiline: true });
+    expect(screen.getByRole('textbox')).toBeInstanceOf(HTMLTextAreaElement);
   });
 
-  test('is invalid with correct error message', () => {
+  it('is invalid with correct error message', () => {
     render({ error: 'error-message' });
 
     const input = screen.getByRole('textbox', { description: 'error-message' });
@@ -38,48 +34,6 @@ describe('Textfield', () => {
     expect(input).toBeInvalid();
   });
 
-  test('is invalid with correct error message from errorId', () => {
-    renderRtl(
-      <>
-        <span id='my-error'>my error message</span>
-        <Textfield errorId='my-error' error />
-      </>,
-    );
-
-    const input = screen.getByRole('textbox', {
-      description: 'my error message',
-    });
-    expect(input).toBeDefined();
-    expect(input).toBeInvalid();
-  });
-
-  it('should have max allowed characters label for screen readers', () => {
-    render({
-      characterLimit: {
-        maxCount: 10,
-        srLabel: 'Max 10 characters is allowed',
-        label: (count: number) => `${count} characters remaining`,
-      },
-    });
-    const screenReaderText = screen.getByText('Max 10 characters is allowed');
-    expect(screenReaderText).toBeInTheDocument();
-  });
-
-  it('should countdown remaining characters', async () => {
-    const user = userEvent.setup();
-    render({
-      label: 'First name',
-      characterLimit: {
-        maxCount: 10,
-        label: (count: number) => `${count} characters remaining`,
-        srLabel: 'characters remaining',
-      },
-    });
-    const inputField = screen.getByLabelText('First name');
-    await act(async () => await user.type(inputField, 'Peter'));
-    expect(screen.getByText('5 characters remaining')).toBeInTheDocument();
-  });
-
   it('Triggers onBlur event when field loses focus', async () => {
     const onBlur = vi.fn();
     render({ onBlur });
@@ -133,7 +87,7 @@ describe('Textfield', () => {
   });
 });
 
-const render = (props: Partial<TextfieldProps> = {}) =>
+const render = (props: TextfieldProps = {}) =>
   renderRtl(
     <Textfield
       {...{
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index 775cecc5e2..7dfa771b56 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -1,217 +1,112 @@
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef, useId, useState } from 'react';
+import { type ForwardedRef, type ReactNode, forwardRef } from 'react';
 
 import type { DefaultProps } from '../../../types';
-import { omit } from '../../../utilities';
 import { Label } from '../../Label';
-import { Paragraph } from '../../Paragraph';
 import { ValidationMessage } from '../../ValidationMessage';
-import type { CharacterLimitProps } from '../CharacterCounter';
-import { CharacterCounter } from '../CharacterCounter';
-import type { FormFieldProps } from '../useFormField';
+import {
+  Field,
+  FieldAffix,
+  FieldAffixWrapper,
+  type FieldCounterProps,
+  FieldDescription,
+} from '../Field';
+import { Input, type InputProps } from '../Input';
+import { Textarea, type TextareaProps } from '../Textarea';
 
-import { useTextfield } from './useTextfield';
+type InputProps_ = Omit<InputProps, 'prefix' | 'className' | 'style'>;
+type TextareaProps_ = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;
 
-export type TextfieldProps = {
+type SharedTextfieldProps = {
+  /** Classname on the wrapper element`Field` */
+  className?: InputProps['className'];
+  /** Style on the wrapper element `Field` */
+  style?: InputProps['style'];
   /** Label */
   label?: ReactNode;
-  /** Visually hides `label` and `description` (still available for screen readers)  */
-  hideLabel?: boolean;
-  /** Prefix for field. */
+  /** Description */
+  description?: ReactNode;
+  /** Prefix */
   prefix?: string;
-  /** Suffix for field. */
+  /** Suffix */
   suffix?: string;
-  /** Supported `input` types */
-  type?:
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'file'
-    | 'month'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'time'
-    | 'url'
-    | 'week';
-  /**
-   *  The characterLimit function calculates remaining characters based on `maxCount`
-   *
-   *  Provide a `label` function that takes count as parameter and returns a message.
-   *
-   *  Use `srLabel` to describe `maxCount` for screen readers.
-   *
-   *  Defaults to Norwegian if no labels are provided.
+  /** Error message for field */
+  error?: ReactNode;
+  /** Uses `Field.Counter` to display a character counter
+   * Pass a number to set a limit, or an object to configure the counter
    */
-  characterLimit?: CharacterLimitProps;
-  /** Exposes the HTML `size` attribute.
-   * @default 20
-   */
-  htmlSize?: number;
-} & FormFieldProps &
-  InputHTMLAttributes<HTMLInputElement> &
-  DefaultProps;
+  counter?: FieldCounterProps | number;
+} & DefaultProps;
+
+type TextfieldTextareaProps = {
+  /** Use to render a `Textarea` instead of `Input` for multiline support  */
+  multiline: true;
+} & TextareaProps_;
+
+type TextfieldInputProps = {
+  /** Use to render a `Textarea` instead of `Input` for multiline support  */
+  multiline?: never | false;
+} & InputProps_;
 
-/** Text input field
+export type TextfieldProps = SharedTextfieldProps &
+  (TextfieldTextareaProps | TextfieldInputProps);
+
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
  *
+ * Rest props are passed to the `Input` or `Textarea` component.
  * @example
  * ```tsx
  * <Textfield label="Textfield label">
  * ```
  */
-export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
-  (props, ref) => {
-    const {
-      label,
-      description,
-      suffix,
-      prefix,
-      style,
-      characterLimit,
-      hideLabel,
-      type = 'text',
-      htmlSize = 20,
-      className,
-      ...rest
-    } = props;
-
-    const {
-      inputProps,
-      descriptionId,
-      hasError,
-      errorId,
-      size = 'md',
-      readOnly,
-    } = useTextfield(props);
-
-    const [inputValue, setInputValue] = useState(
-      props.value || props.defaultValue,
-    );
-    const characterLimitId = `textfield-charactercount-${useId()}`;
-    const hasCharacterLimit = characterLimit != null;
-
-    const describedBy =
-      cl(
-        inputProps['aria-describedby'],
-        hasCharacterLimit && characterLimitId,
-      ) || undefined;
-
-    return (
-      <Paragraph asChild data-size={size}>
-        <div
-          style={style}
-          className={cl(
-            `ds-textfield`,
-            `ds-textfield--${size}`,
-            readOnly && `ds-textfield--readonly`,
-            hasError && `ds-textfield--error`,
-            className,
-          )}
-        >
-          {label && (
-            <Label
-              data-size={size}
-              weight='medium'
-              htmlFor={inputProps.id}
-              className={cl(`ds-textfield__label`, hideLabel && `ds-sr-only`)}
-            >
-              {readOnly && (
-                <PadlockLockedFillIcon
-                  aria-hidden
-                  className='ds-textfield__readonly__icon'
-                />
-              )}
-              <span>{label}</span>
-            </Label>
-          )}
-          {description && (
-            <Paragraph asChild data-size={size}>
-              <div
-                id={descriptionId}
-                className={cl(
-                  `ds-textfield__description`,
-                  hideLabel && `ds-sr-only`,
-                )}
-              >
-                {description}
-              </div>
-            </Paragraph>
-          )}
-          <div className='ds-textfield__field'>
-            {prefix && (
-              <Paragraph asChild data-size={size} variant='short'>
-                <div
-                  className={cl(
-                    `ds-textfield__adornment`,
-                    `ds-textfield__prefix`,
-                  )}
-                  aria-hidden='true'
-                >
-                  {prefix}
-                </div>
-              </Paragraph>
-            )}
-            <input
-              className={cl(
-                `ds-textfield__input`,
-                `ds-focus`,
-                prefix && `ds-textfield__input--with-prefix`,
-                suffix && `ds-textfield__input--with-suffix`,
-              )}
-              ref={ref}
-              type={type}
-              disabled={inputProps.disabled}
-              aria-describedby={describedBy}
-              size={htmlSize}
-              {...omit(['size', 'error', 'errorId'], rest)}
-              {...inputProps}
-              onChange={(e) => {
-                inputProps?.onChange?.(e);
-                setInputValue(e.target.value);
-              }}
-            />
-            {suffix && (
-              <Paragraph asChild data-size={size} variant='short'>
-                <div
-                  className={cl(
-                    `ds-textfield__adornment`,
-                    `ds-textfield__suffix`,
-                  )}
-                  aria-hidden='true'
-                >
-                  {suffix}
-                </div>
-              </Paragraph>
-            )}
-          </div>
-          {hasCharacterLimit && (
-            <CharacterCounter
-              data-size={size}
-              value={inputValue ? inputValue.toString() : ''}
-              id={characterLimitId}
-              {...characterLimit}
-            />
-          )}
-          <div
-            className='ds-textfield__error-message'
-            id={errorId}
-            aria-live='polite'
-            aria-relevant='additions removals'
-          >
-            {hasError && (
-              <ValidationMessage data-size={size}>
-                {props.error}
-              </ValidationMessage>
-            )}
-          </div>
-        </div>
-      </Paragraph>
-    );
+export const Textfield = forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  TextfieldProps
+>(function Textfield(
+  {
+    label,
+    description,
+    error,
+    multiline,
+    prefix,
+    suffix,
+    'data-size': size,
+    counter,
+    style,
+    className,
+    ...rest
   },
-);
-
-Textfield.displayName = 'Textfield';
+  ref,
+) {
+  return (
+    <Field {...{ className, style, 'data-size': size }}>
+      {!!label && <Label>{label}</Label>}
+      {!!description && <FieldDescription>{description}</FieldDescription>}
+      <FieldAffixWrapper>
+        {prefix === undefined || <FieldAffix>{prefix}</FieldAffix>}
+        {multiline === true ? (
+          <Textarea
+            ref={ref as ForwardedRef<HTMLTextAreaElement>}
+            aria-invalid={!!error}
+            {...(rest as TextareaProps_)}
+          />
+        ) : (
+          <Input
+            ref={ref as ForwardedRef<HTMLInputElement>}
+            aria-invalid={!!error}
+            {...(rest as InputProps_)}
+          />
+        )}
+        {suffix === undefined || <FieldAffix>{suffix}</FieldAffix>}
+      </FieldAffixWrapper>
+      {!!error && <ValidationMessage>{error}</ValidationMessage>}
+      {!!counter && (
+        <Field.Counter
+          {...(typeof counter === 'number' ? { limit: counter } : counter)}
+        />
+      )}
+    </Field>
+  );
+});
diff --git a/packages/react/src/components/form/Textfield/useTextfield.ts b/packages/react/src/components/form/Textfield/useTextfield.ts
deleted file mode 100644
index 7f83f285c0..0000000000
--- a/packages/react/src/components/form/Textfield/useTextfield.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import { useContext } from 'react';
-
-import { FieldsetContext } from '../Fieldset/FieldsetContext';
-import type { FormField } from '../useFormField';
-import { useFormField } from '../useFormField';
-
-import type { TextfieldProps } from './Textfield';
-
-type UseTextfield = (props: TextfieldProps) => FormField & {
-  inputProps?: Pick<
-    InputHTMLAttributes<HTMLInputElement>,
-    'readOnly' | 'type' | 'name' | 'required' | 'onClick' | 'onChange'
-  >;
-};
-/** Handles props for `Textfield` in context with `Fieldset` */
-export const useTextfield: UseTextfield = (props) => {
-  const fieldset = useContext(FieldsetContext);
-  const {
-    inputProps,
-    readOnly,
-    size = fieldset?.size ?? 'md',
-    ...rest
-  } = useFormField(props, 'textfield');
-
-  return {
-    ...rest,
-    readOnly,
-    size,
-    inputProps: {
-      ...inputProps,
-      readOnly,
-      onClick: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onClick?.(e);
-      },
-      onChange: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onChange?.(e);
-      },
-    },
-  };
-};
diff --git a/packages/react/stories/showcase.module.css b/packages/react/stories/showcase.module.css
index 9eae2956a3..dada18b0b3 100644
--- a/packages/react/stories/showcase.module.css
+++ b/packages/react/stories/showcase.module.css
@@ -79,8 +79,6 @@
 
 .userLink {
   margin-top: 20px;
-  margin-left: auto;
-  font-size: 16px;
 }
 
 .userTitle {
@@ -95,11 +93,6 @@
   margin-top: 32px;
 }
 
-.userPar {
-  margin-bottom: -4px;
-  margin-top: -7px;
-}
-
 .tabs button {
   min-height: 40px;
 }
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index b9fdfba633..d4d669ef6f 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -126,7 +126,6 @@ export const Showcase: StoryFn = () => {
           <Heading className={cl(classes.cardTitle, classes.userTitle)}>
             Opprett ny bruker
           </Heading>
-
           <Textfield
             label='Navn'
             placeholder='Ola Normann'
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index f7dcc6eec7..2cb5a415d0 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -74,8 +74,7 @@ export const MediumRow: StoryFn<{
         }}
       >
         <Textfield
-          hideLabel
-          label='Kontroller meg!'
+          aria-label='Kontroller meg!'
           data-size={size}
           prefix='prefix'
           suffix='suffix'