diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss
deleted file mode 100644
index b6a6bab147..0000000000
--- a/packages/css/src/components/form-label/form-label.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
-
-.ams-form-label {
-  color: var(--ams-form-label-color);
-  font-family: var(--ams-form-label-font-family);
-  font-size: var(--ams-form-label-font-size);
-  font-weight: var(--ams-form-label-font-weight);
-  line-height: var(--ams-form-label-line-height);
-
-  @include hyphenation;
-  @include text-rendering;
-}
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index 0fdcbee9dc..0ca1ff3e8e 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -41,7 +41,7 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./form-label/form-label";
+@import "./label/label";
 @import "./grid/grid";
 @import "./heading/heading";
 @import "./spotlight/spotlight";
diff --git a/packages/css/src/components/form-label/README.md b/packages/css/src/components/label/README.md
similarity index 92%
rename from packages/css/src/components/form-label/README.md
rename to packages/css/src/components/label/README.md
index 623bea5655..7851a28de1 100644
--- a/packages/css/src/components/form-label/README.md
+++ b/packages/css/src/components/label/README.md
@@ -1,6 +1,6 @@
 <!-- @license CC0-1.0 -->
 
-# Form Label
+# Label
 
 Describes a form control.
 
diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss
new file mode 100644
index 0000000000..53ab1f55a4
--- /dev/null
+++ b/packages/css/src/components/label/label.scss
@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+.ams-label {
+  color: var(--ams-label-color);
+  font-family: var(--ams-label-font-family);
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  line-height: var(--ams-label-line-height);
+
+  @include hyphenation;
+  @include text-rendering;
+}
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 9b5d11d4a4..56cdf5069e 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -11,7 +11,11 @@
 }
 
 @mixin reset-input {
+  // Reset native appearance, this causes issues on iOS and Android devices
+  -webkit-appearance: none;
+  appearance: none;
   border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
   margin-block: 0;
 }
@@ -57,6 +61,10 @@
 
 @mixin reset-button {
   border: 0;
+
+  // Reset margins added by Safari on iOS
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .ams-search-field__button {
diff --git a/packages/react/src/FormLabel/README.md b/packages/react/src/FormLabel/README.md
deleted file mode 100644
index 135d0779b4..0000000000
--- a/packages/react/src/FormLabel/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# React Form Label Component
-
-[Form label documentation](../../../css/src/components/form-label/README.md)
diff --git a/packages/react/src/FormLabel/index.ts b/packages/react/src/FormLabel/index.ts
deleted file mode 100644
index 5d86e6f51a..0000000000
--- a/packages/react/src/FormLabel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FormLabel } from './FormLabel'
diff --git a/packages/react/src/FormLabel/FormLabel.test.tsx b/packages/react/src/Label/Label.test.tsx
similarity index 69%
rename from packages/react/src/FormLabel/FormLabel.test.tsx
rename to packages/react/src/Label/Label.test.tsx
index 3b6fa3a86e..eea47d3611 100644
--- a/packages/react/src/FormLabel/FormLabel.test.tsx
+++ b/packages/react/src/Label/Label.test.tsx
@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { FormLabel } from './FormLabel'
+import { Label } from './Label'
 import '@testing-library/jest-dom'
 
-describe('Form label', () => {
+describe('Label', () => {
   it('renders an HTML label element', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector('label:only-child')
 
@@ -14,7 +14,7 @@ describe('Form label', () => {
   })
 
   it('renders an HTML label element with for attribute', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector('label[for="form-control"]:only-child')
 
@@ -22,18 +22,18 @@ describe('Form label', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
-    expect(label).toHaveClass('ams-form-label')
+    expect(label).toHaveClass('ams-label')
   })
 
   it('renders rich text content', () => {
     const { container } = render(
-      <FormLabel htmlFor="form-control">
+      <Label htmlFor="form-control">
         <strong>Current</strong> password
-      </FormLabel>,
+      </Label>,
     )
 
     const label = container.querySelector(':only-child')
@@ -46,7 +46,7 @@ describe('Form label', () => {
   it('can be associated with an HTML form input', () => {
     render(
       <>
-        <FormLabel htmlFor="email">Email</FormLabel>
+        <Label htmlFor="email">Email</Label>
         <input type="email" id="email" />
       </>,
     )
@@ -60,7 +60,7 @@ describe('Form label', () => {
   })
 
   it('can be hidden', () => {
-    const { container } = render(<FormLabel hidden htmlFor="form-control" />)
+    const { container } = render(<Label hidden htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
@@ -68,19 +68,19 @@ describe('Form label', () => {
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<FormLabel className="large" htmlFor="form-control" />)
+    const { container } = render(<Label className="large" htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
     expect(label).toHaveClass('large')
 
-    expect(label).toHaveClass('ams-form-label')
+    expect(label).toHaveClass('ams-label')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLLabelElement>()
 
-    const { container } = render(<FormLabel htmlFor="form-control" ref={ref} />)
+    const { container } = render(<Label htmlFor="form-control" ref={ref} />)
 
     const div = container.querySelector(':only-child')
 
diff --git a/packages/react/src/FormLabel/FormLabel.tsx b/packages/react/src/Label/Label.tsx
similarity index 73%
rename from packages/react/src/FormLabel/FormLabel.tsx
rename to packages/react/src/Label/Label.tsx
index 601b74ec6a..6b963e86df 100644
--- a/packages/react/src/FormLabel/FormLabel.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -8,15 +8,15 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
 
-export const FormLabel = forwardRef(
+export const Label = forwardRef(
   (
     { children, className, ...restProps }: PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>,
     ref: ForwardedRef<HTMLLabelElement>,
   ) => (
-    <label {...restProps} ref={ref} className={clsx('ams-form-label', className)}>
+    <label {...restProps} ref={ref} className={clsx('ams-label', className)}>
       {children}
     </label>
   ),
 )
 
-FormLabel.displayName = 'FormLabel'
+Label.displayName = 'Label'
diff --git a/packages/react/src/Label/README.md b/packages/react/src/Label/README.md
new file mode 100644
index 0000000000..c2f0c80aca
--- /dev/null
+++ b/packages/react/src/Label/README.md
@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Label Component
+
+[Label documentation](../../../css/src/components/label/README.md)
diff --git a/packages/react/src/Label/index.ts b/packages/react/src/Label/index.ts
new file mode 100644
index 0000000000..717144f332
--- /dev/null
+++ b/packages/react/src/Label/index.ts
@@ -0,0 +1 @@
+export { Label } from './Label'
diff --git a/packages/react/src/Switch/README.md b/packages/react/src/Switch/README.md
index e24d226bf3..1cfd16d833 100644
--- a/packages/react/src/Switch/README.md
+++ b/packages/react/src/Switch/README.md
@@ -5,6 +5,6 @@
 The React `<Switch />` component is a wrapper around the `<input type="checkbox" />`.
 It can be used as a standalone component or as a form control element.
 When used as a standalone component provide a `aria-labelledby` prop to keep it accessible.
-When used as a form control, make sure to add the associated `<FormLabel>` component.
+When used as a form control, make sure to add the associated `<Label>` component.
 
 [Switch documentation](../../../css/src/components/switch/README.md)
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 6d931087e1..fbdc4c7857 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -49,7 +49,7 @@ export * from './Breadcrumb'
 export * from './Link'
 export * from './Button'
 export * from './Paragraph'
-export * from './FormLabel'
+export * from './Label'
 export * from './UnorderedList'
 export * from './Icon'
 export * from './Accordion'
diff --git a/proprietary/tokens/src/components/ams/form-label.tokens.json b/proprietary/tokens/src/components/ams/label.tokens.json
similarity index 94%
rename from proprietary/tokens/src/components/ams/form-label.tokens.json
rename to proprietary/tokens/src/components/ams/label.tokens.json
index 8e44cac491..cea8edd306 100644
--- a/proprietary/tokens/src/components/ams/form-label.tokens.json
+++ b/proprietary/tokens/src/components/ams/label.tokens.json
@@ -1,6 +1,6 @@
 {
   "ams": {
-    "form-label": {
+    "label": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.4.font-size}" },
diff --git a/storybook/src/components/FormLabel/FormLabel.docs.mdx b/storybook/src/components/FormLabel/FormLabel.docs.mdx
deleted file mode 100644
index c87d6f911d..0000000000
--- a/storybook/src/components/FormLabel/FormLabel.docs.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
-import * as FormLabelStories from "./FormLabel.stories.tsx";
-import README from "../../../../packages/css/src/components/form-label/README.md?raw";
-
-<Meta of={FormLabelStories} />
-
-<Markdown>{README}</Markdown>
-
-<Primary />
-
-<Controls />
diff --git a/storybook/src/components/Label/Label.docs.mdx b/storybook/src/components/Label/Label.docs.mdx
new file mode 100644
index 0000000000..3501b5f6e3
--- /dev/null
+++ b/storybook/src/components/Label/Label.docs.mdx
@@ -0,0 +1,11 @@
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as LabelStories from "./Label.stories.tsx";
+import README from "../../../../packages/css/src/components/label/README.md?raw";
+
+<Meta of={LabelStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
diff --git a/storybook/src/components/FormLabel/FormLabel.stories.tsx b/storybook/src/components/Label/Label.stories.tsx
similarity index 62%
rename from storybook/src/components/FormLabel/FormLabel.stories.tsx
rename to storybook/src/components/Label/Label.stories.tsx
index 4ab6aa5e3a..0e7d294f27 100644
--- a/storybook/src/components/FormLabel/FormLabel.stories.tsx
+++ b/storybook/src/components/Label/Label.stories.tsx
@@ -3,21 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { FormLabel } from '@amsterdam/design-system-react/src'
+import { Label } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'Components/Forms/Form Label',
-  component: FormLabel,
+  title: 'Components/Forms/Label',
+  component: Label,
   args: {
-    children: 'Form label',
+    children: 'Label',
   },
   argTypes: {
     children: {
       table: { disable: false },
     },
   },
-} satisfies Meta<typeof FormLabel>
+} satisfies Meta<typeof Label>
 
 export default meta
 
diff --git a/storybook/src/components/Switch/Switch.docs.mdx b/storybook/src/components/Switch/Switch.docs.mdx
index d670f9cd9f..c2dd6d4473 100644
--- a/storybook/src/components/Switch/Switch.docs.mdx
+++ b/storybook/src/components/Switch/Switch.docs.mdx
@@ -8,7 +8,7 @@ import README from "../../../../packages/css/src/components/switch/README.md?raw
 
 It can be used as a standalone component or as a form control element.
 When used as a standalone component provide an `aria-label` or `aria-labelledby` prop to keep it accessible.
-When used as a formcontrol, make sure to add the associated `<FormLabel>` component.
+When used as a formcontrol, make sure to add the associated `<Label>` component.
 
 <Primary />
 
diff --git a/storybook/src/components/Switch/Switch.stories.tsx b/storybook/src/components/Switch/Switch.stories.tsx
index 4ba5e8e62d..3a8f2b2a4c 100644
--- a/storybook/src/components/Switch/Switch.stories.tsx
+++ b/storybook/src/components/Switch/Switch.stories.tsx
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { FormLabel, Switch } from '@amsterdam/design-system-react/src'
+import { Label, Switch } from '@amsterdam/design-system-react/src'
 import { useArgs } from '@storybook/preview-api'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -55,7 +55,7 @@ export const WithLabel: Story = {
 
     return (
       <>
-        <FormLabel htmlFor="switch-with-label">Label</FormLabel>
+        <Label htmlFor="switch-with-label">Label</Label>
         <Switch onClick={handleClick} {...args} id="switch-with-label" />
       </>
     )