diff --git a/packages/css/documentation/coding-conventions.md b/packages/css/documentation/coding-conventions.md
index 944fd6a1c7..6190d39cf0 100644
--- a/packages/css/documentation/coding-conventions.md
+++ b/packages/css/documentation/coding-conventions.md
@@ -41,3 +41,9 @@ Still, we define its thickness and offset for the initial state.
 We use Sass mixins to extract common patterns, especially if they need more than 1 declaration.
 We collect reset styles in mixins as well.
 Both the name of the mixins and their documentation help explain the approach.
+
+## Form validation styling
+
+We style both the native invalid state (`:invalid`) as the invalid state you can set manually, using `aria-invalid`.
+We’re currently not sure how our users will implement forms, which is why both options are supported.
+[Native form validation isn’t without its issues](https://adrianroselli.com/2019/02/avoid-default-field-validation.html) though, so we might only support manual validation in the future.
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 8757fc4985..b22c3aae37 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -46,6 +46,16 @@
   }
 }
 
+.ams-search-field__input:invalid,
+.ams-search-field__input[aria-invalid="true"] {
+  box-shadow: var(--ams-search-field-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
+  }
+}
+
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
   opacity: 100%; // This resets the lower opacity set by Firefox
diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss
index f8de4f618b..70e12f99e5 100644
--- a/packages/css/src/components/select/select.scss
+++ b/packages/css/src/components/select/select.scss
@@ -37,12 +37,9 @@
   @include reset;
 }
 
+.ams-select:invalid,
 .ams-select[aria-invalid="true"] {
   box-shadow: var(--ams-select-invalid-box-shadow);
-
-  &:hover {
-    box-shadow: var(--ams-select-invalid-hover-box-shadow);
-  }
 }
 
 .ams-select:disabled {
@@ -55,6 +52,11 @@
   }
 }
 
+.ams-select:invalid:hover,
+.ams-select[aria-invalid="true"]:hover {
+  box-shadow: var(--ams-select-invalid-hover-box-shadow);
+}
+
 .ams-select__option:disabled {
   color: var(--ams-select-option-disabled-color);
 }
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index d6afa3f442..10446f0176 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -43,97 +43,97 @@ describe('Checkbox', () => {
     expect(wrapper).toHaveClass('ams-checkbox')
   })
 
-  // checked state
+  describe('Checked state', () => {
+    it('is not checked by default', () => {
+      render(<Checkbox />)
 
-  it('is not checked by default', () => {
-    render(<Checkbox />)
+      const input = screen.getByRole('checkbox')
 
-    const input = screen.getByRole('checkbox')
+      expect(input).not.toBeChecked()
+    })
 
-    expect(input).not.toBeChecked()
-  })
+    it('can have a checked state', () => {
+      const handleChange = () => {}
+      render(<Checkbox checked onChange={handleChange} />)
 
-  it('can have a checked state', () => {
-    const handleChange = () => {}
-    render(<Checkbox checked onChange={handleChange} />)
+      const input = screen.getByRole('checkbox')
 
-    const input = screen.getByRole('checkbox')
-
-    expect(input).toBeChecked()
+      expect(input).toBeChecked()
+    })
   })
 
-  // indeterminate state
-
-  it('is not indeterminate by default', () => {
-    render(<Checkbox />)
+  describe('Indeterminate state', () => {
+    it('is not indeterminate by default', () => {
+      render(<Checkbox />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).not.toBePartiallyChecked()
-  })
+      expect(input).not.toBePartiallyChecked()
+    })
 
-  it('can have an indeterminate state', () => {
-    render(<Checkbox indeterminate />)
+    it('can have an indeterminate state', () => {
+      render(<Checkbox indeterminate />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).toBePartiallyChecked()
+      expect(input).toBePartiallyChecked()
+    })
   })
 
-  // invalid state
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      render(<Checkbox />)
 
-  it('is not invalid by default', () => {
-    render(<Checkbox />)
-
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).not.toBeInvalid()
-  })
+      expect(input).not.toBeInvalid()
+    })
 
-  it('can have an invalid state', () => {
-    render(<Checkbox invalid />)
+    it('can have an invalid state', () => {
+      render(<Checkbox invalid />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).toHaveAttribute('aria-invalid')
-    expect(input).toBeInvalid()
-  })
+      expect(input).toHaveAttribute('aria-invalid')
+      expect(input).toBeInvalid()
+    })
 
-  it('omits non-essential invalid attributes when not invalid', () => {
-    render(<Checkbox invalid={false} />)
+    it('omits non-essential invalid attributes when not invalid', () => {
+      render(<Checkbox invalid={false} />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).not.toHaveAttribute('aria-invalid')
+      expect(input).not.toHaveAttribute('aria-invalid')
+    })
   })
 
-  // disabled state
-
-  it('is not disabled by default', () => {
-    render(<Checkbox />)
+  describe('Disabled state', () => {
+    it('is not disabled by default', () => {
+      render(<Checkbox />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).not.toBeDisabled()
-  })
+      expect(input).not.toBeDisabled()
+    })
 
-  it('can have a disabled state', () => {
-    render(<Checkbox disabled />)
+    it('can have a disabled state', () => {
+      render(<Checkbox disabled />)
 
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).toBeDisabled()
+      expect(input).toBeDisabled()
+    })
   })
 
-  // disabled invalid state
+  describe('Disabled invalid state', () => {
+    it('can have a disabled invalid state', () => {
+      render(<Checkbox disabled invalid />)
 
-  it('can have a disabled invalid state', () => {
-    render(<Checkbox disabled invalid />)
-
-    const input = screen.getByRole('checkbox')
+      const input = screen.getByRole('checkbox')
 
-    expect(input).toBeDisabled()
-    expect(input).toBeInvalid()
+      expect(input).toBeDisabled()
+      expect(input).toBeInvalid()
+    })
   })
 
   it('can trigger a change event', () => {
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index 52872b8246..b553a4eaef 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -12,7 +12,7 @@ export type CheckboxProps = {
   invalid?: boolean
   /** Allows being neither checked nor unchecked. */
   indeterminate?: boolean
-} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>
 
 export const Checkbox = forwardRef(
   (
@@ -38,11 +38,11 @@ export const Checkbox = forwardRef(
       <div className={clsx('ams-checkbox', className)}>
         <input
           {...restProps}
-          type="checkbox"
+          aria-invalid={invalid || undefined}
           className="ams-checkbox__input"
-          ref={innerRef}
           id={id}
-          aria-invalid={invalid || undefined}
+          ref={innerRef}
+          type="checkbox"
         />
         <label className="ams-checkbox__label" htmlFor={id}>
           <span className="ams-checkbox__checkmark" />
diff --git a/packages/react/src/DateInput/DateInput.test.tsx b/packages/react/src/DateInput/DateInput.test.tsx
index 9c0f3a33da..5c34f43fdc 100644
--- a/packages/react/src/DateInput/DateInput.test.tsx
+++ b/packages/react/src/DateInput/DateInput.test.tsx
@@ -38,4 +38,31 @@ describe('Date input', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      const { container } = render(<DateInput />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).not.toBeInvalid()
+    })
+
+    it('can have an invalid state', () => {
+      const { container } = render(<DateInput invalid />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveAttribute('aria-invalid')
+      expect(component).toBeInvalid()
+    })
+
+    it('omits non-essential invalid attributes when not invalid', () => {
+      const { container } = render(<DateInput invalid={false} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).not.toHaveAttribute('aria-invalid')
+    })
+  })
 })
diff --git a/packages/react/src/DateInput/DateInput.tsx b/packages/react/src/DateInput/DateInput.tsx
index 6e1c119a9e..573b7d56a4 100644
--- a/packages/react/src/DateInput/DateInput.tsx
+++ b/packages/react/src/DateInput/DateInput.tsx
@@ -7,11 +7,20 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export type DateInputProps = InputHTMLAttributes<HTMLInputElement>
+export type DateInputProps = {
+  /** Whether the value fails a validation rule. */
+  invalid?: boolean
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>
 
 export const DateInput = forwardRef(
-  ({ className, ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} ref={ref} className={clsx('ams-date-input', className)} type="date" />
+  ({ className, invalid, ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input
+      {...restProps}
+      aria-invalid={invalid || undefined}
+      className={clsx('ams-date-input', className)}
+      ref={ref}
+      type="date"
+    />
   ),
 )
 
diff --git a/packages/react/src/Radio/Radio.test.tsx b/packages/react/src/Radio/Radio.test.tsx
index c79e403bf7..c109f5a068 100644
--- a/packages/react/src/Radio/Radio.test.tsx
+++ b/packages/react/src/Radio/Radio.test.tsx
@@ -41,79 +41,79 @@ describe('Radio', () => {
     expect(wrapper).toHaveClass('ams-radio extra')
   })
 
-  // checked state
+  describe('Checked state', () => {
+    it('is not checked by default', () => {
+      render(<Radio />)
 
-  it('is not checked by default', () => {
-    render(<Radio />)
+      const input = screen.getByRole('radio')
 
-    const input = screen.getByRole('radio')
-
-    expect(input).not.toBeChecked()
-  })
+      expect(input).not.toBeChecked()
+    })
 
-  it('can have a checked state', () => {
-    const handleChange = () => {}
-    render(<Radio checked onChange={handleChange} />)
+    it('can have a checked state', () => {
+      const handleChange = () => {}
+      render(<Radio checked onChange={handleChange} />)
 
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).toBeChecked()
+      expect(input).toBeChecked()
+    })
   })
 
-  // invalid state
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      render(<Radio />)
 
-  it('is not invalid by default', () => {
-    render(<Radio />)
+      const input = screen.getByRole('radio')
 
-    const input = screen.getByRole('radio')
-
-    expect(input).not.toBeInvalid()
-  })
+      expect(input).not.toBeInvalid()
+    })
 
-  it('can have an invalid state', () => {
-    render(<Radio invalid />)
+    it('can have an invalid state', () => {
+      render(<Radio invalid />)
 
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).toHaveAttribute('aria-invalid')
-    expect(input).toBeInvalid()
-  })
+      expect(input).toHaveAttribute('aria-invalid')
+      expect(input).toBeInvalid()
+    })
 
-  it('omits non-essential invalid attributes when not invalid', () => {
-    render(<Radio invalid={false} />)
+    it('omits non-essential invalid attributes when not invalid', () => {
+      render(<Radio invalid={false} />)
 
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).not.toHaveAttribute('aria-invalid')
+      expect(input).not.toHaveAttribute('aria-invalid')
+    })
   })
 
-  // disabled state
+  describe('Disabled state', () => {
+    it('is not disabled by default', () => {
+      render(<Radio />)
 
-  it('is not disabled by default', () => {
-    render(<Radio />)
-
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).not.toBeDisabled()
-  })
+      expect(input).not.toBeDisabled()
+    })
 
-  it('can have a disabled state', () => {
-    render(<Radio disabled />)
+    it('can have a disabled state', () => {
+      render(<Radio disabled />)
 
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).toBeDisabled()
+      expect(input).toBeDisabled()
+    })
   })
 
-  // disabled invalid state
+  describe('Disabled invalid state', () => {
+    it('can have a disabled invalid state', () => {
+      render(<Radio disabled invalid />)
 
-  it('can have a disabled invalid state', () => {
-    render(<Radio disabled invalid />)
-
-    const input = screen.getByRole('radio')
+      const input = screen.getByRole('radio')
 
-    expect(input).toBeDisabled()
-    expect(input).toBeInvalid()
+      expect(input).toBeDisabled()
+      expect(input).toBeInvalid()
+    })
   })
 
   it('can trigger a change event', () => {
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index dbab4f0775..67893ff72d 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -10,7 +10,7 @@ import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react
 export type RadioProps = {
   /** Whether the value fails a validation rule. */
   invalid?: boolean
-} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>
 
 export const Radio = forwardRef(
   ({ children, className, invalid, ...restProps }: RadioProps, ref: ForwardedRef<HTMLInputElement>) => {
@@ -22,11 +22,11 @@ export const Radio = forwardRef(
       <div className={clsx('ams-radio', className)}>
         <input
           {...restProps}
-          type="radio"
+          aria-invalid={invalid || undefined}
           className="ams-radio__input"
-          ref={ref}
           id={id}
-          aria-invalid={invalid || undefined}
+          ref={ref}
+          type="radio"
         />
         <label className="ams-radio__label" htmlFor={id}>
           <span className="ams-radio__circle" />
diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
index 2ef1770cf7..b52715d061 100644
--- a/packages/react/src/SearchField/SearchFieldInput.tsx
+++ b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -9,12 +9,17 @@ import type { ForwardedRef, InputHTMLAttributes } from 'react'
 import { VisuallyHidden } from '../VisuallyHidden'
 
 type SearchFieldInputProps = {
+  /** Whether the value fails a validation rule. */
+  invalid?: boolean
   /** Describes the field for screen readers. */
   label?: string
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const SearchFieldInput = forwardRef(
-  ({ className, dir, label = 'Zoeken', ...restProps }: SearchFieldInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+  (
+    { className, dir, invalid, label = 'Zoeken', ...restProps }: SearchFieldInputProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
     const id = useId()
 
     return (
@@ -24,6 +29,7 @@ export const SearchFieldInput = forwardRef(
         </label>
         <input
           {...restProps}
+          aria-invalid={invalid || undefined}
           autoComplete="off"
           className={clsx('ams-search-field__input', className)}
           dir={dir ?? 'auto'}
diff --git a/packages/react/src/Select/Select.test.tsx b/packages/react/src/Select/Select.test.tsx
index d3e0902b43..5a28adc2ed 100644
--- a/packages/react/src/Select/Select.test.tsx
+++ b/packages/react/src/Select/Select.test.tsx
@@ -64,12 +64,31 @@ describe('Select', () => {
     expect(component).toBeDisabled()
   })
 
-  it('can be invalid', () => {
-    render(<Select invalid />)
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      render(<Select />)
 
-    const component = screen.getByRole('combobox')
+      const component = screen.getByRole('combobox')
+
+      expect(component).not.toBeInvalid()
+    })
+
+    it('can have an invalid state', () => {
+      render(<Select invalid />)
+
+      const component = screen.getByRole('combobox')
 
-    expect(component).toHaveClass('ams-select--invalid')
+      expect(component).toHaveAttribute('aria-invalid')
+      expect(component).toBeInvalid()
+    })
+
+    it('omits non-essential invalid attributes when not invalid', () => {
+      render(<Select invalid={false} />)
+
+      const component = screen.getByRole('combobox')
+
+      expect(component).not.toHaveAttribute('aria-invalid')
+    })
   })
 
   it('is not required by default', () => {
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 22ee1a02d1..e5247666dd 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -12,16 +12,11 @@ import { SelectOptionGroup } from './SelectOptionGroup'
 export type SelectProps = {
   /** Whether the value fails a validation rule. */
   invalid?: boolean
-} & PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>>
+} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>
 
 const SelectRoot = forwardRef(
   ({ children, className, invalid, ...restProps }: SelectProps, ref: ForwardedRef<HTMLSelectElement>) => (
-    <select
-      {...restProps}
-      ref={ref}
-      className={clsx('ams-select', invalid && 'ams-select--invalid', className)}
-      aria-invalid={invalid || undefined}
-    >
+    <select {...restProps} aria-invalid={invalid || undefined} className={clsx('ams-select', className)} ref={ref}>
       {children}
     </select>
   ),
diff --git a/packages/react/src/Switch/Switch.tsx b/packages/react/src/Switch/Switch.tsx
index ecfd11842f..e06b38e4a2 100644
--- a/packages/react/src/Switch/Switch.tsx
+++ b/packages/react/src/Switch/Switch.tsx
@@ -16,7 +16,6 @@ export const Switch = forwardRef(
     return (
       <div className={clsx('ams-switch', className)}>
         <input {...restProps} className="ams-switch__input" id={inputId} ref={ref} type="checkbox" role="switch" />
-
         <label className="ams-switch__label" htmlFor={inputId}></label>
       </div>
     )
diff --git a/packages/react/src/TextArea/TextArea.test.tsx b/packages/react/src/TextArea/TextArea.test.tsx
index 3a1bf96b0e..aa55b2d2af 100644
--- a/packages/react/src/TextArea/TextArea.test.tsx
+++ b/packages/react/src/TextArea/TextArea.test.tsx
@@ -119,4 +119,31 @@ describe('Text area', () => {
 
     expect(component).toHaveAttribute('dir', 'ltr')
   })
+
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      render(<TextArea />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).not.toBeInvalid()
+    })
+
+    it('can have an invalid state', () => {
+      render(<TextArea invalid />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).toHaveAttribute('aria-invalid')
+      expect(component).toBeInvalid()
+    })
+
+    it('omits non-essential invalid attributes when not invalid', () => {
+      render(<TextArea invalid={false} />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).not.toHaveAttribute('aria-invalid')
+    })
+  })
 })
diff --git a/packages/react/src/TextArea/TextArea.tsx b/packages/react/src/TextArea/TextArea.tsx
index dfb6f87bd5..ab180fe7ad 100644
--- a/packages/react/src/TextArea/TextArea.tsx
+++ b/packages/react/src/TextArea/TextArea.tsx
@@ -7,16 +7,18 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, TextareaHTMLAttributes } from 'react'
 
-export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+export type TextAreaProps = {
+  /** Whether the value fails a validation rule. */
+  invalid?: boolean
   /** Allows the user to resize the text box. The default is resizing in both directions. */
   resize?: 'none' | 'horizontal' | 'vertical'
-}
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>
 
 export const TextArea = forwardRef(
-  ({ className, dir, resize, ...restProps }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => (
+  ({ className, dir, invalid, resize, ...restProps }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => (
     <textarea
       {...restProps}
-      ref={ref}
+      aria-invalid={invalid || undefined}
       className={clsx(
         'ams-text-area',
         resize && `ams-text-area--resize-${resize}`,
@@ -24,6 +26,7 @@ export const TextArea = forwardRef(
         className,
       )}
       dir={dir ?? 'auto'}
+      ref={ref}
     />
   ),
 )
diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx
index 168835466d..3196b8a210 100644
--- a/packages/react/src/TextInput/TextInput.test.tsx
+++ b/packages/react/src/TextInput/TextInput.test.tsx
@@ -89,4 +89,31 @@ describe('Text input', () => {
 
     expect(component).toHaveAttribute('dir', 'ltr')
   })
+
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      render(<TextInput />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).not.toBeInvalid()
+    })
+
+    it('can have an invalid state', () => {
+      render(<TextInput invalid />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).toHaveAttribute('aria-invalid')
+      expect(component).toBeInvalid()
+    })
+
+    it('omits non-essential invalid attributes when not invalid', () => {
+      render(<TextInput invalid={false} />)
+
+      const component = screen.getByRole('textbox')
+
+      expect(component).not.toHaveAttribute('aria-invalid')
+    })
+  })
 })
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index b5b5d9739b..89e3670b8d 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -7,11 +7,21 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
+export type TextInputProps = {
+  /** Whether the value fails a validation rule. */
+  invalid?: boolean
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>
 
 export const TextInput = forwardRef(
-  ({ className, dir, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} className={clsx('ams-text-input', className)} dir={dir ?? 'auto'} ref={ref} type="text" />
+  ({ className, dir, invalid, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input
+      {...restProps}
+      aria-invalid={invalid || undefined}
+      className={clsx('ams-text-input', className)}
+      dir={dir ?? 'auto'}
+      ref={ref}
+      type="text"
+    />
   ),
 )
 
diff --git a/packages/react/src/TimeInput/TimeInput.test.tsx b/packages/react/src/TimeInput/TimeInput.test.tsx
index 60843757d4..59645e707a 100644
--- a/packages/react/src/TimeInput/TimeInput.test.tsx
+++ b/packages/react/src/TimeInput/TimeInput.test.tsx
@@ -38,4 +38,31 @@ describe('Time input', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  describe('Invalid state', () => {
+    it('is not invalid by default', () => {
+      const { container } = render(<TimeInput />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).not.toBeInvalid()
+    })
+
+    it('can have an invalid state', () => {
+      const { container } = render(<TimeInput invalid />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveAttribute('aria-invalid')
+      expect(component).toBeInvalid()
+    })
+
+    it('omits non-essential invalid attributes when not invalid', () => {
+      const { container } = render(<TimeInput invalid={false} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).not.toHaveAttribute('aria-invalid')
+    })
+  })
 })
diff --git a/packages/react/src/TimeInput/TimeInput.tsx b/packages/react/src/TimeInput/TimeInput.tsx
index 1eee477db8..95a93d1234 100644
--- a/packages/react/src/TimeInput/TimeInput.tsx
+++ b/packages/react/src/TimeInput/TimeInput.tsx
@@ -7,11 +7,20 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export type TimeInputProps = InputHTMLAttributes<HTMLInputElement>
+export type TimeInputProps = {
+  /** Whether the value fails a validation rule. */
+  invalid?: boolean
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>
 
 export const TimeInput = forwardRef(
-  ({ className, ...restProps }: TimeInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} ref={ref} className={clsx('ams-time-input', className)} type="time" />
+  ({ className, invalid, ...restProps }: TimeInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input
+      {...restProps}
+      aria-invalid={invalid || undefined}
+      className={clsx('ams-time-input', className)}
+      ref={ref}
+      type="time"
+    />
   ),
 )
 
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index a8e2d86b39..8634875c9d 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -37,6 +37,12 @@
             "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}"
           }
         },
+        "invalid": {
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
+          "hover": {
+            "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
+          }
+        },
         "placeholder": {
           "color": { "value": "{ams.color.neutral-grey3}" }
         }
diff --git a/storybook/src/components/DateInput/DateInput.stories.tsx b/storybook/src/components/DateInput/DateInput.stories.tsx
index 2c976ac606..7c913ea84e 100644
--- a/storybook/src/components/DateInput/DateInput.stories.tsx
+++ b/storybook/src/components/DateInput/DateInput.stories.tsx
@@ -3,23 +3,22 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { DateInput, DateInputProps } from '@amsterdam/design-system-react'
+import { DateInput } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
-type StoryProps = DateInputProps & { invalid?: boolean }
-
 const meta = {
   title: 'Components/Forms/Date Input',
   component: DateInput,
   args: {
     disabled: false,
+    invalid: false,
   },
   argTypes: {
     disabled: {
       description: 'Prevents interaction. Avoid if possible.',
     },
   },
-} satisfies Meta<StoryProps>
+} satisfies Meta<typeof DateInput>
 
 export default meta
 
@@ -29,7 +28,7 @@ export const Default: Story = {}
 
 export const Invalid: Story = {
   args: {
-    required: true,
+    invalid: true,
   },
 }
 
diff --git a/storybook/src/components/Field/Field.stories.tsx b/storybook/src/components/Field/Field.stories.tsx
index 230d45a298..c1559c47a3 100644
--- a/storybook/src/components/Field/Field.stories.tsx
+++ b/storybook/src/components/Field/Field.stories.tsx
@@ -23,7 +23,7 @@ export const Default: Story = {
   render: (args) => (
     <Field invalid={args.invalid}>
       <Label htmlFor="input1">Waar gaat het om?</Label>
-      <TextInput id="input1" aria-invalid={args.invalid ? true : undefined} />
+      <TextInput id="input1" invalid={args.invalid} />
     </Field>
   ),
 }
@@ -35,7 +35,7 @@ export const WithDescription: Story = {
       <Paragraph id="description1" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input2" aria-describedby="description1" aria-invalid={args.invalid ? true : undefined} />
+      <TextInput id="input2" aria-describedby="description1" invalid={args.invalid} />
     </Field>
   ),
 }
@@ -48,7 +48,7 @@ export const WithError: Story = {
       <Paragraph id="description2" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input3" aria-describedby="description2" aria-invalid={args.invalid ? true : undefined} />
+      <TextInput id="input3" aria-describedby="description2" invalid={args.invalid} />
     </Field>
   ),
 }
diff --git a/storybook/src/components/FieldSet/FieldSet.docs.mdx b/storybook/src/components/FieldSet/FieldSet.docs.mdx
index afb02c04d3..4214143dec 100644
--- a/storybook/src/components/FieldSet/FieldSet.docs.mdx
+++ b/storybook/src/components/FieldSet/FieldSet.docs.mdx
@@ -42,7 +42,7 @@ Always also set `aria-required` on the individual radio buttons though, to make
 
 Use a Field Set to group checkboxes.
 
-Please note: [NVDA has bug](https://github.com/nvaccess/nvda/issues/12718) which causes it to
+Please note: [NVDA has a bug](https://github.com/nvaccess/nvda/issues/12718) which causes it to
 not report a description connected to a Field Set when it contains checkboxes.
 
 Try to avoid using descriptions for Field Sets containing checkboxes for this reason.
diff --git a/storybook/src/components/FieldSet/FieldSet.stories.tsx b/storybook/src/components/FieldSet/FieldSet.stories.tsx
index 18e470fa76..501d5c56bd 100644
--- a/storybook/src/components/FieldSet/FieldSet.stories.tsx
+++ b/storybook/src/components/FieldSet/FieldSet.stories.tsx
@@ -31,9 +31,9 @@ export const Default: Story = {
     <FieldSet invalid={args.invalid} legend={args.legend}>
       <Column gap="extra-small" style={{ width: '100%' }}>
         <Label htmlFor="input1">Voornaam</Label>
-        <TextInput id="input1" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input1" invalid={args.invalid} aria-required="true" />
         <Label htmlFor="input2">Achternaam</Label>
-        <TextInput id="input2" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input2" invalid={args.invalid} aria-required="true" />
       </Column>
     </FieldSet>
   ),
@@ -47,9 +47,9 @@ export const WithDescription: Story = {
       </Paragraph>
       <Column gap="extra-small">
         <Label htmlFor="input3">Voornaam</Label>
-        <TextInput id="input3" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input3" invalid={args.invalid} aria-required="true" />
         <Label htmlFor="input4">Achternaam</Label>
-        <TextInput id="input4" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input4" invalid={args.invalid} aria-required="true" />
       </Column>
     </FieldSet>
   ),
@@ -64,9 +64,9 @@ export const WithError: Story = {
       </Paragraph>
       <Column gap="extra-small">
         <Label htmlFor="input5">Voornaam</Label>
-        <TextInput id="input5" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input5" invalid={args.invalid} aria-required="true" />
         <Label htmlFor="input6">Achternaam</Label>
-        <TextInput id="input6" aria-invalid={args.invalid ? true : undefined} aria-required="true" />
+        <TextInput id="input6" invalid={args.invalid} aria-required="true" />
       </Column>
     </FieldSet>
   ),
diff --git a/storybook/src/components/SearchField/SearchField.stories.tsx b/storybook/src/components/SearchField/SearchField.stories.tsx
index 3e5e01e2cc..5db2019d78 100644
--- a/storybook/src/components/SearchField/SearchField.stories.tsx
+++ b/storybook/src/components/SearchField/SearchField.stories.tsx
@@ -9,6 +9,7 @@ import { useArgs } from '@storybook/preview-api'
 import { Meta, StoryObj } from '@storybook/react'
 
 type InputProps = {
+  invalid?: boolean
   label?: string
   placeholder?: string
 }
@@ -19,6 +20,7 @@ const meta = {
   title: 'Components/Forms/Search Field',
   component: SearchField,
   args: {
+    invalid: false,
     onSubmit: (e) => {
       e.preventDefault()
     },
@@ -34,9 +36,9 @@ const meta = {
       description: 'Displayed while the field is empty.',
     },
   },
-  render: ({ label, placeholder, ...args }) => (
+  render: ({ invalid, label, placeholder, ...args }) => (
     <SearchField {...args}>
-      <SearchField.Input label={label} placeholder={placeholder} />
+      <SearchField.Input invalid={invalid} label={label} placeholder={placeholder} />
       <SearchField.Button />
     </SearchField>
   ),
@@ -58,7 +60,7 @@ export const Controlled: any = {
   args: {
     value: '',
   },
-  render: function Component({ label, placeholder }: InputProps) {
+  render: function Component({ invalid, label, placeholder }: InputProps) {
     const [args, setArgs] = useArgs()
 
     const onValueChange = (event: any) => {
@@ -81,6 +83,7 @@ export const Controlled: any = {
         <SearchField.Input
           name="search-box"
           value={args['value']}
+          invalid={invalid}
           label={label}
           onChange={onValueChange}
           placeholder={placeholder}
diff --git a/storybook/src/components/TextArea/TextArea.stories.tsx b/storybook/src/components/TextArea/TextArea.stories.tsx
index aef5440399..5d64d03913 100644
--- a/storybook/src/components/TextArea/TextArea.stories.tsx
+++ b/storybook/src/components/TextArea/TextArea.stories.tsx
@@ -3,21 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { TextArea, TextAreaProps } from '@amsterdam/design-system-react/src'
-import { useArgs } from '@storybook/preview-api'
+import { TextArea } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 import { exampleParagraph } from '../shared/exampleContent'
 
 const paragraph = exampleParagraph()
 
-type StoryProps = TextAreaProps & { invalid?: boolean }
-
 const meta = {
   title: 'Components/Forms/Text Area',
   component: TextArea,
   args: {
     value: paragraph,
     disabled: false,
+    invalid: false,
   },
   argTypes: {
     cols: {
@@ -46,21 +44,7 @@ const meta = {
       description: 'The value of the field.',
     },
   },
-  render: ({ invalid, ...args }) => {
-    const [, setArgs] = useArgs()
-
-    const handleChange = (event: any) => {
-      setArgs({ value: event.target.value })
-    }
-
-    return (
-      <form>
-        {/* Set children to empty string to trigger invalid state */}
-        <TextArea required={invalid} onChange={handleChange} {...args} />
-      </form>
-    )
-  },
-} satisfies Meta<StoryProps>
+} satisfies Meta<typeof TextArea>
 
 export default meta
 
@@ -88,7 +72,6 @@ export const NoResize: Story = {
 
 export const Invalid: Story = {
   args: {
-    value: '',
     invalid: true,
   },
 }
diff --git a/storybook/src/components/TextInput/TextInput.docs.mdx b/storybook/src/components/TextInput/TextInput.docs.mdx
index 074011e248..27a5606efd 100644
--- a/storybook/src/components/TextInput/TextInput.docs.mdx
+++ b/storybook/src/components/TextInput/TextInput.docs.mdx
@@ -14,19 +14,10 @@ import README from "../../../../packages/css/src/components/text-input/README.md
 
 ### Placeholder
 
-It is possible to place placeholder text in the text input.
-A placeholder should not contain crucial information.
-Using a suggestion or example can help clarify something for the user.
-Suggestions are not a substitute for an explanation or instruction provided in an error message or description.
-Placeholder text disappears as soon as the user starts entering data.
-
 <Canvas of={TextInputStories.Placeholder} />
 
 ### Invalid
 
-Whenever possible, use real-time validation of data when filling out forms.
-Incorrectly filled input fields become visible immediately.
-
 <Canvas of={TextInputStories.Invalid} />
 
 ### Disabled
diff --git a/storybook/src/components/TextInput/TextInput.stories.tsx b/storybook/src/components/TextInput/TextInput.stories.tsx
index bd276d9749..a21c14446a 100644
--- a/storybook/src/components/TextInput/TextInput.stories.tsx
+++ b/storybook/src/components/TextInput/TextInput.stories.tsx
@@ -3,12 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { TextInput, TextInputProps } from '@amsterdam/design-system-react/src'
-import { useArgs } from '@storybook/preview-api'
+import { TextInput } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
-type StoryProps = TextInputProps & { invalid?: boolean }
-
 const meta = {
   title: 'Components/Forms/Text Input',
   component: TextInput,
@@ -28,24 +25,7 @@ const meta = {
       description: 'The value of the field.',
     },
   },
-  render: ({ invalid, ...args }) => {
-    const [, setArgs] = useArgs()
-
-    const handleChange = (event: any) => {
-      setArgs({ value: event.target.value })
-    }
-
-    return (
-      <form>
-        {/*
-          Toggling the invalid control sets the required attribute on the input
-          and requires it to match "ž". Wrapped in a form, this triggers the invalid state.
-        */}
-        <TextInput pattern={invalid ? '[ž]' : '.*'} required={invalid} onChange={handleChange} {...args} />
-      </form>
-    )
-  },
-} satisfies Meta<StoryProps>
+} satisfies Meta<typeof TextInput>
 
 export default meta
 
diff --git a/storybook/src/components/TimeInput/TimeInput.stories.tsx b/storybook/src/components/TimeInput/TimeInput.stories.tsx
index 323ac85ad4..1d0f16238a 100644
--- a/storybook/src/components/TimeInput/TimeInput.stories.tsx
+++ b/storybook/src/components/TimeInput/TimeInput.stories.tsx
@@ -11,6 +11,7 @@ const meta = {
   component: TimeInput,
   args: {
     disabled: false,
+    invalid: false,
   },
   argTypes: {
     disabled: {
@@ -27,7 +28,7 @@ export const Default: Story = {}
 
 export const Invalid: Story = {
   args: {
-    required: true,
+    invalid: true,
   },
 }