diff --git a/packages/documentation/docs/controls/_category-filter_styleguide.md b/packages/documentation/docs/controls/_category-filter_styleguide.md
index dcdccafb1ff..5ac32912c18 100644
--- a/packages/documentation/docs/controls/_category-filter_styleguide.md
+++ b/packages/documentation/docs/controls/_category-filter_styleguide.md
@@ -51,6 +51,5 @@ Category filter has six states: Default, hover, active, disabled, read-only and
 
 - [Expanding search](expanding-search.md)
 - [Input](input.mdx)
-- [Input Legacy](input-legacy.md)
 - [Select](select.mdx)
 - [Dropdown button](./buttons/dropdown-button.md)
diff --git a/packages/documentation/docs/controls/_date-input_code.mdx b/packages/documentation/docs/controls/_date-input_code.mdx
index 2e392d6fa6f..be79543dc2a 100644
--- a/packages/documentation/docs/controls/_date-input_code.mdx
+++ b/packages/documentation/docs/controls/_date-input_code.mdx
@@ -1,12 +1,9 @@
 import Playground from '@site/src/components/PlaygroundV2';
 import Props from '@site/docs/auto-generated/ix-date-input/props.md';
 import Events from '@site/docs/auto-generated/ix-date-input/events.md';
-import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';
 
 # Date input
 
-<Tags />
-
 ## Examples
 
 ### Basic
diff --git a/packages/documentation/docs/controls/_date-input_styleguide.mdx b/packages/documentation/docs/controls/_date-input_styleguide.mdx
index a759d8f904d..493000e98f4 100644
--- a/packages/documentation/docs/controls/_date-input_styleguide.mdx
+++ b/packages/documentation/docs/controls/_date-input_styleguide.mdx
@@ -35,7 +35,7 @@ The date input component enables users to enter and select a date in a standardi
 - **Validation**:
   - Use feedback text for validation types valid, info, warning and invalid.
   - Invalid feedback automatically provided if entered date in not parsable.
-  - Refer to the [validation](./forms/forms-validation.md) chapter for detailed guidelines.
+  - Refer to the [validation](./forms/forms-validation.mdx) chapter for detailed guidelines.
 - **Overflow**: The input field should be wide enough to display the full date without truncation.
 - **Alignment**: Date inputs are always aligned to the left.
 
@@ -62,7 +62,7 @@ Date input has five states: Default, hover, disabled, read-only and focused.
 - [Date picker](./date-picker.md)
 - [Date time picker](./date-picker.md)
 - [Forms field](./forms/forms-field.md)
-- [Validation](./forms/forms-validation.md)
+- [Validation](./forms/forms-validation.mdx)
 - [Dropdown](./dropdown.md)
 - [Input](input.mdx)
 - [Select](select.mdx)
diff --git a/packages/documentation/docs/controls/forms/_forms-checkbox_styleguide.md b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md
similarity index 87%
rename from packages/documentation/docs/controls/forms/_forms-checkbox_styleguide.md
rename to packages/documentation/docs/controls/_forms-checkbox_styleguide.md
index c92d7ccefb5..6adec179561 100644
--- a/packages/documentation/docs/controls/forms/_forms-checkbox_styleguide.md
+++ b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md
@@ -4,16 +4,16 @@ A checkbox is a small interactive box that allows the user to toggle between an
 
 ## Options
 
-- **Checkbox label:** See [form field](forms-field.md).
+- **Checkbox label:** See [form field](forms/forms-field.md).
 - **Group label:** Add a label to the group of checkboxes to provide context to your users. We typically use short and descriptive labels to summarize the options in the group.
-- **Helper text**: See [form field](forms-field.md).
-- **Feedback text**: See [form field](forms-field.md).
+- **Helper text**: See [form field](forms/forms-field.md).
+- **Feedback text**: See [form field](forms/forms-field.md).
 - **Indeterminate checkbox:** Indicates that only some items in a checkbox group are selected. We offer the indeterminate state, but the implementation when this state is active is the responsibility of each individual.
 - **Checkbox group**: Group checkboxes to indicate that they are related. We typically use checkbox groups when multiple options need to be presented for selection, allowing users to choose any combination of the available choices. They are particularly useful in user interface design for forms, settings and preferences where multiple selections are possible.
 
 ## Behavior in context
 
-- **Validation**: See [validation](forms-validation.md).
+- **Validation**: See [validation](forms/forms-validation.mdx).
 - **Interaction**: Clicking on the checkbox toggles the state between checked and unchecked. 
 - **Grouping**: Checkbox groups have only one label and helper text for the entire group. Grouped checkboxes are validated collectively, not individually.
 
@@ -28,4 +28,4 @@ A checkbox is a small interactive box that allows the user to toggle between an
 - Do use checkboxes in forms to allow users to select multiple options
 - Don’t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead
 - Don’t use checkboxes for mutually exclusive options - use [radio buttons](forms-radio-button.md) instead
-- Don’t use checkboxes for actions that have immediate consequences - use [buttons](buttons.md) or [links](links.md) instead
\ No newline at end of file
+- Don’t use checkboxes for actions that have immediate consequences - use [buttons](buttons.md) or [links](links.md) instead
diff --git a/packages/documentation/docs/controls/forms/_forms-custom-field_styleguide.md b/packages/documentation/docs/controls/_forms-custom-field_styleguide.md
similarity index 79%
rename from packages/documentation/docs/controls/forms/_forms-custom-field_styleguide.md
rename to packages/documentation/docs/controls/_forms-custom-field_styleguide.md
index e154a75ae52..f3f92697110 100644
--- a/packages/documentation/docs/controls/forms/_forms-custom-field_styleguide.md
+++ b/packages/documentation/docs/controls/_forms-custom-field_styleguide.md
@@ -8,18 +8,18 @@ The custom field is a wrapper component that can host any forms component. Its p
 4. Mandatory indicator
 ## Options
 
-- **Label:** See [form field](forms-field.md).
+- **Label:** See [form field](forms/forms-field.md).
 - **Group label:** Add a label to the group of radio buttons to provide context to your users. We typically use short and descriptive labels to summarize the options in the group.
-- **Helper text**: See [form field](forms-field.md).
-- **Feedback text**: See [form field](forms-field.md).
+- **Helper text**: See [form field](forms/forms-field.md).
+- **Feedback text**: See [form field](forms/forms-field.md).
 - **Customization**: Add form components to create the use case you need. For example, for a file upload field, add an input field with a `readonly` state and an [icon button](buttons/icon-button.md).
 
 ![Custom field example](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3483-7223&t=DlxXBQ9vTnyDcIUI-4)
 
 ## Behavior in context
 
-- **Validation:** See [validation](forms-validation.md).
-- **Form behavior:** See [behavior](forms-behavior.md).
+- **Validation:** See [validation](forms/forms-validation.mdx).
+- **Form behavior:** See [behavior](forms/forms-behavior.md).
 ## States
 
 The states depend on the component that you use in the custom field. The custom field itself does not have any interaction states.
@@ -31,7 +31,7 @@ The states depend on the component that you use in the custom field. The custom
 - Don't use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component
 ## Related patterns
 
-- [Form field](forms-field.md)
-- [Validation](forms-validation.md)
-- [Behavior](forms-behavior.md)
-- [Layout](forms-layout.md)
+- [Form field](forms/forms-field.md)
+- [Validation](forms/forms-validation.mdx)
+- [Behavior](forms/forms-behavior.md)
+- [Layout](forms/forms-layout.md)
diff --git a/packages/documentation/docs/controls/forms/_forms-radio-button_styleguide.md b/packages/documentation/docs/controls/_forms-radio-button_styleguide.md
similarity index 82%
rename from packages/documentation/docs/controls/forms/_forms-radio-button_styleguide.md
rename to packages/documentation/docs/controls/_forms-radio-button_styleguide.md
index 7d25d706903..3f9dbf858de 100644
--- a/packages/documentation/docs/controls/forms/_forms-radio-button_styleguide.md
+++ b/packages/documentation/docs/controls/_forms-radio-button_styleguide.md
@@ -4,13 +4,13 @@ A radio button is a interface element that enables the user to choose only one o
 
 ## Options
 
-- **Label:** See [form field](forms-field.md).
-- **Helper text**: See [form field](forms-field.md).
-- **Feedback text**: See [form field](forms-field.md).
+- **Label:** See [form field](forms/forms-field.md).
+- **Helper text**: See [form field](forms/forms-field.md).
+- **Feedback text**: See [form field](forms/forms-field.md).
 
 ## Behavior in context
 
-- **Validation**: Radio buttons are validated collectively, not individually. For more information on validation, see [validation](forms-validation.md).
+- **Validation**: Radio buttons are validated collectively, not individually. For more information on validation, see [validation](forms/forms-validation.mdx).
 - **Interaction**: Clicking on a radio button toggles its state between checked and unchecked/default. Every other radio button in the group is automatically unchecked.
 
 ## States
@@ -27,8 +27,8 @@ A radio button is a interface element that enables the user to choose only one o
 
 ## Related patterns
 
-- [Form field](forms-field.md)
-- [Validation](forms-validation.md)
-- [Layout](forms-layout.md)
+- [Form field](forms/forms-field.md)
+- [Validation](forms/forms-validation.mdx)
+- [Layout](forms/forms-layout.md)
 - Checkbox
-- Toggle
\ No newline at end of file
+- Toggle
diff --git a/packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md b/packages/documentation/docs/controls/_forms-toggle_styleguide.md
similarity index 52%
rename from packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md
rename to packages/documentation/docs/controls/_forms-toggle_styleguide.md
index 03a57bb31d1..ca1f30ef070 100644
--- a/packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md
+++ b/packages/documentation/docs/controls/_forms-toggle_styleguide.md
@@ -4,13 +4,13 @@ A toggle is a user interface element that enables users to switch between two st
 
 ## Options
 
-- **Label:** See [form field](forms-field.md).
-- **Helper text**: See [form field](forms-field.md).
-- **Feedback text**: See [form field](forms-field.md).
+- **Label:** See [form field](forms/forms-field.md).
+- **Helper text**: See [form field](forms/forms-field.md).
+- **Feedback text**: See [form field](forms/forms-field.md).
 
 ## Behavior in context
 
-- **Validation**: See [validation](forms-validation.md).
+- **Validation**: See [validation](forms/forms-validation.mdx).
 - **Interaction**: Clicking on the toggle switch changes its state from on to off or vice versa. The toggle visually reflects the current state.
 
 ## States
@@ -19,17 +19,17 @@ A toggle is a user interface element that enables users to switch between two st
 
 ## Dos and Don’ts
 
-Do use toggles for single features or options that need to be switched quickly and easily  
-Do provide clear labels for toggles to indicate what they control  
-Do use toggles consistently throughout the interface for similar actions or settings  
-Don't use toggles for complex multi-state options or settings  
-Don't use toggles for actions that require a confirmation or additional input  
-Don't use toggles for actions that are irreversible or have serious consequences
+- Do use toggles for single features or options that need to be switched quickly and easily  
+- Do provide clear labels for toggles to indicate what they control  
+- Do use toggles consistently throughout the interface for similar actions or settings  
+- Don't use toggles for complex multi-state options or settings  
+- Don't use toggles for actions that require a confirmation or additional input  
+- Don't use toggles for actions that are irreversible or have serious consequences
 
 ## Related patterns
 
-- [Form field](forms-field.md)
-- [Validation](forms-validation.md)
-- [Layout](forms-layout.md)
--  Checkbox
--  Radio button
\ No newline at end of file
+- [Form field](forms/forms-field.md)
+- [Validation](forms/forms-validation.mdx)
+- [Layout](forms/forms-layout.md)
+- [Checkbox](checkbox.mdx)
+- [Radio](radio.mdx)
diff --git a/packages/documentation/docs/controls/_input_styleguide.md b/packages/documentation/docs/controls/_input_styleguide.md
index deb9d378a88..d9bb8e7786d 100644
--- a/packages/documentation/docs/controls/_input_styleguide.md
+++ b/packages/documentation/docs/controls/_input_styleguide.md
@@ -22,7 +22,7 @@ An input field is a user interface element that allows users to enter and edit t
 
 ## Behavior in context
 
-- **Validation:** See [validation](./forms/forms-validation.md).
+- **Validation:** See [validation](./forms/forms-validation.mdx).
 - **Interaction**: Clicking in the container enables the editing of the field.
 - **Text truncation**: The text in an input field is cut off with the length of the container.
 - **Alignment**: Inputs are always aligned to the left, while right alignment is reserved exclusively for [number fields](number-input.mdx).
@@ -44,7 +44,7 @@ The input field has five states: default, focused, hover, disabled and read-only
 ## Related patterns
 
 - [Form field](./forms/forms-field.md)
-- [Validation](./forms/forms-validation.md)
+- [Validation](./forms/forms-validation.mdx)
 - [Layout](./forms/forms-layout.md)
 - [Number input](number-input.mdx)
 - [Date input](date-input.mdx)
diff --git a/packages/documentation/docs/controls/_number-input_code.mdx b/packages/documentation/docs/controls/_number-input_code.mdx
index 20848d1db14..f1952d5c3d6 100644
--- a/packages/documentation/docs/controls/_number-input_code.mdx
+++ b/packages/documentation/docs/controls/_number-input_code.mdx
@@ -2,8 +2,6 @@ import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-number-input/props.md';
 import Events from '@site/docs/auto-generated/ix-number-input/events.md';
 
-# Number field
-
 ## Examples
 
 ### Basic
diff --git a/packages/documentation/docs/controls/_number-input_styleguide.mdx b/packages/documentation/docs/controls/_number-input_styleguide.mdx
index eb6f118eec9..5dd6f6441ff 100644
--- a/packages/documentation/docs/controls/_number-input_styleguide.mdx
+++ b/packages/documentation/docs/controls/_number-input_styleguide.mdx
@@ -26,7 +26,7 @@ The number input component allows users to enter and adjust numerical values. It
 
 ## Behavior in context
 - **Interaction:** Users can type a value or use stepper buttons to adjust it. We typically recommend using stepper buttons, especially for touch interactions, to enhance usability and precision.
-- **Validation:** See [form field](./forms/forms-validation.md)
+- **Validation:** See [form field](./forms/forms-validation.mdx)
 - **Overflow:** Numbers are truncated to fit within the input field. Ensure that the expected value is visible in the input field so it can be properly displayed.
 - **Alignment:** Number inputs are always aligned to the right.
 
@@ -42,7 +42,7 @@ The number input has five states: default, hover, focused, disabled and read-onl
 
 ## Related patterns
 - [Form fields](./forms/forms-field.md)
-- [Validation](./forms/forms-validation.md)
+- [Validation](./forms/forms-validation.mdx)
 - [Layout](./forms/forms-layout.md)
 - [Input](./input.mdx)
 - [Select](./select.mdx)
diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md
index 70bd8d3bb2e..342cb99d5b9 100644
--- a/packages/documentation/docs/controls/_select_styleguide.md
+++ b/packages/documentation/docs/controls/_select_styleguide.md
@@ -30,7 +30,7 @@ A select component allows users to choose from a list of options. It supports si
 
 ## Behavior in context
 
-- **Validation:** See [validation](./forms/forms-validation.md).
+- **Validation:** See [validation](./forms/forms-validation.mdx).
 - **Interaction:**
 	- Click or Enter key on button opens dropdown list.
 	- Typing in the input field filters the dropdown list.
@@ -54,7 +54,7 @@ The select field has five states: default, hover, focused, disabled and read-onl
 - Do take care of performance when loading an extensive list of items
 - Do use selects when there is a finite list of items available to avoid manual input errors or duplicates
 - Do sort items logically (for example alphabetically or numerically)
-- Don't use selects for binary choices, like yes and no (use [radio buttons](radio.mdx), [checkboxes](checkbox.mdx) or [toggles](toggle.md) instead)
+- Don't use selects for binary choices, like yes and no (use [radio buttons](radio.mdx), [checkboxes](checkbox.mdx) or [toggles](toggle.mdx) instead)
 - Don't use selects for navigational or search patterns (use [category filters](category-filter.md) or [search fields](expanding-search.md) instead)
 - Don't combine several data attributes in an item label (use [tables](html-grid.mdx) or [event lists](event-list.md) with a search functionality instead)
 
@@ -63,10 +63,10 @@ The select field has five states: default, hover, focused, disabled and read-onl
 ## Related patterns
 
 - [Form field](./forms/forms-field.md)
-- [Validation](./forms/forms-validation.md)
+- [Validation](./forms/forms-validation.mdx)
 - [Layout](./forms/forms-layout.md)
 - [Input](input.mdx)
 - [Radio button](radio.mdx)
 - [Checkbox](checkbox.mdx)
-- [Toggle](toggle.md)
-- [Date input](date-input.mdx)
\ No newline at end of file
+- [Toggle](toggle.mdx)
+- [Date input](date-input.mdx)
diff --git a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx
index 21e168fc5f2..dfe02015cd8 100644
--- a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx
+++ b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx
@@ -32,7 +32,7 @@ The textarea component allows users to input multi-line text, making it ideal fo
   - Optional: Users can resize textareas to fit their needs. For example, vertical resizing can be useful in feedback forms when the entry exceeds the default height.
 - **Validation**:
   - Minimum and maximum length defines number of characters allowed.
-  - See [form validation](./forms/forms-validation.md)
+  - See [form validation](./forms/forms-validation.mdx)
 - **Overflow**: Text within the textarea is not truncated; it supports scrolling for overflow content.
 - **Alignment**: Text is always left-aligned in textareas.
 - **Sizing**:
@@ -55,6 +55,6 @@ Textareas have five states: Default, hover, focused, read-only, and disabled
 ## Related patterns
 
 - [Form fields](./forms/forms-field.md)
-- [Validation](./forms/forms-validation.md)
+- [Validation](./forms/forms-validation.mdx)
 - [Layout](./forms/forms-layout.md)
 - [Input](./input.mdx)
diff --git a/packages/documentation/docs/controls/_toggle_code.mdx b/packages/documentation/docs/controls/_toggle_code.mdx
new file mode 100644
index 00000000000..9282868ae9f
--- /dev/null
+++ b/packages/documentation/docs/controls/_toggle_code.mdx
@@ -0,0 +1,43 @@
+import Playground from '@site/src/components/PlaygroundV3';
+import Props from './../auto-generated/ix-toggle/props.md';
+import Events from './../auto-generated/ix-toggle/events.md';
+
+## Examples
+
+### Basic
+
+<Playground name="number-input" examplesByName/>
+
+### Disabled
+
+<Playground name="number-input-disabled" examplesByName/>
+
+### Label
+
+<Playground name="number-input-label" examplesByName/>
+
+### Readonly
+
+<Playground name="number-input-readonly" examplesByName/>
+
+### StepperButton
+
+<Playground name="number-input-stepper-button" examplesByName/>
+
+### Validation
+
+<Playground
+  name="number-input-validation"
+  height="20rem"
+  examplesByName
+/>
+
+## API
+
+### Properties
+
+<Props />
+
+### Events
+
+<Events />
diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md
index 911e99ac6b7..4164d5317fa 100644
--- a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md
+++ b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md
@@ -23,5 +23,5 @@ Toggle buttons have five states: Default, hover, active, disabled, loading and f
 
 - [Button](button.md)
 - [Icon button](icon-button.md)
-- [Toggle](../toggle.md)
+- [Toggle](../toggle.mdx)
 <!-- - [Button group](...) -->
diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx
index 8c6bb0ced72..be2ef2e961e 100644
--- a/packages/documentation/docs/controls/checkbox.mdx
+++ b/packages/documentation/docs/controls/checkbox.mdx
@@ -3,10 +3,14 @@ import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-checkbox/props.md';
 import Events from '@site/docs/auto-generated/ix-checkbox/events.md';
 import Tags from '@site/docs/auto-generated/ix-checkbox/tags.md';
+import DeprecatedTags from '@site/src/components/Tags';
 
 # Checkbox
 
-<Tags />
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/checkbox' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
 
 ## Examples
 
diff --git a/packages/documentation/docs/controls/date-input.mdx b/packages/documentation/docs/controls/date-input.mdx
index 1bbfa130ede..2c9ce88a551 100644
--- a/packages/documentation/docs/controls/date-input.mdx
+++ b/packages/documentation/docs/controls/date-input.mdx
@@ -1,8 +1,19 @@
+import DeprecatedTags from '@site/src/components/Tags';
 import DocsTabs from '@site/src/components/DocsTabs';
 
 import DocsUx from './\_date-input_styleguide.mdx'
 import DocsCode from './\_date-input_code.mdx'
 
+import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';
+
 # Date input
 
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
+
+<br/>
+<br/>
+
 <DocsTabs styleguide={DocsUx} code={DocsCode} />
diff --git a/packages/documentation/docs/controls/forms/forms-behavior.md b/packages/documentation/docs/controls/forms/forms-behavior.md
index 48ef466f8cb..e9cf266adec 100644
--- a/packages/documentation/docs/controls/forms/forms-behavior.md
+++ b/packages/documentation/docs/controls/forms/forms-behavior.md
@@ -50,9 +50,9 @@ In this strategy, there is no need for a submit button. The form is automaticall
 - Con: Handling validation and error messages without a submit button can be challenging.
 - Con: Users may not have a chance to review and confirm their input before submission.
 
-For more information on form validation, refer to the [Validation](forms-validation.md) chapter.
+For more information on form validation, refer to the [Validation](forms-validation.mdx) chapter.
 
 ## Related patterns
 
-- [Validation](forms-validation.md)
+- [Validation](forms-validation.mdx)
 - [Layout](forms-layout.md)
diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md
index 833f5322e8b..ef526859342 100644
--- a/packages/documentation/docs/controls/forms/forms-field.md
+++ b/packages/documentation/docs/controls/forms/forms-field.md
@@ -16,15 +16,15 @@ A field is a form element when user input is needed. It's typically used with ot
 
 - **Label:** Add a label for the field that provides context to your users.
 - **Required:** The asterisk states whether user input is required on the field before submitting the form.
-- **Field:** Use the appropriate field based on the type of input data, e.g. use [text inputs](../input-legacy.md) for text-based data, [checkboxes](../checkbox.mdx) for selecting from a list of predefined options, or [toggle switches](../toggle.md) for a binary choice.
+- **Field:** Use the appropriate field based on the type of input data, e.g. use [text inputs](../input.mdx) for text-based data, [checkboxes](../checkbox.mdx) for selecting from a list of predefined options, or [toggle switches](../toggle.mdx) for a binary choice.
 - **Helper text:** Use to help users understand the field better. We typically use this when there are input restrictions or more information is required.
-- **Show text as tooltip:** Display validation feedback either below the input field or as tooltip when the user hovers or focuses on the form field. Use a different text for the individual validation states that apply (see [validation](forms-validation.md)).
-- **Counter:** Use a counter to show the number of characters entered into the field and the maximum number of characters allowed. We typically use it for [text input](../input-legacy.md) or [textarea](../textarea.mdx) fields.
+- **Show text as tooltip:** Display validation feedback either below the input field or as tooltip when the user hovers or focuses on the form field. Use a different text for the individual validation states that apply (see [validation](forms-validation.mdx)).
+- **Counter:** Use a counter to show the number of characters entered into the field and the maximum number of characters allowed. We typically use it for [text input](../input.mdx) or [textarea](../textarea.mdx) fields.
 
 ## Behavior in context
 
-- **Interaction:** See [validation](forms-validation.md).
-- **Behavior of a field as part of a form:** See [behavior](forms-validation).
+- **Interaction:** See [validation](forms-validation.mdx).
+- **Behavior of a field as part of a form:** See [behavior](forms-validation.mdx).
 - **Text truncation:** Labels, feedback and helper texts are not truncated but break into multiple lines if they exceed the field's width.
 
 ## States
@@ -35,7 +35,7 @@ When a feedback tooltip is chosen over a message, the field shows a tooltip when
 
 ![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-12426&t=pKzFQBhaXmjTsR8P-4)
 
-**Note:** There are also several validation states (default, valid, info, warning, invalid) that are described in [validation](forms-validation.md).
+**Note:** There are also several validation states (default, valid, info, warning, invalid) that are described in [validation](forms-validation.mdx).
 
 ## Dos and Don’ts
 
@@ -47,12 +47,11 @@ When a feedback tooltip is chosen over a message, the field shows a tooltip when
 
 ## Related patterns
 
-- [Validation](forms-validation.md)
+- [Validation](forms-validation.mdx)
 - [Behavior](forms-behavior.md)
 - [Input](../input.mdx)
-- [Input Legacy](../input-legacy.md)
 - [Textarea](../textarea.mdx)
 - [Select](../select.mdx)
 - [Checkbox](../checkbox.mdx)
 - [Radio button](../radio.mdx)
-- [Toggle switch](../toggle.md)
+- [Toggle switch](../toggle.mdx)
diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md
index 5fc09b2222d..e3c918d725a 100644
--- a/packages/documentation/docs/controls/forms/forms-layout.md
+++ b/packages/documentation/docs/controls/forms/forms-layout.md
@@ -32,5 +32,5 @@ Effective ways to organize form elements enhance user comprehension and interact
 
 ## Related patterns
 
-- [Validation](forms-validation.md)
+- [Validation](forms-validation.mdx)
 - [Behavior](forms-behavior.md)
diff --git a/packages/documentation/docs/controls/forms/forms-validation.md b/packages/documentation/docs/controls/forms/forms-validation.md
deleted file mode 100644
index 23eefb52e43..00000000000
--- a/packages/documentation/docs/controls/forms/forms-validation.md
+++ /dev/null
@@ -1,18 +0,0 @@
-import Code from "./\_forms-validation_code.mdx";
-import Style from "./\_forms-validation_style.md";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Validation
-
-<Tabs queryString="current-tab">
-
-  <TabItem value="style" label="Style">
-    <Style />
-  </TabItem>
-
-  <TabItem value="code" label="Code">
-    <Code />
-  </TabItem>
-  
-</Tabs>
diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx
new file mode 100644
index 00000000000..e6e86bb3d4b
--- /dev/null
+++ b/packages/documentation/docs/controls/forms/forms-validation.mdx
@@ -0,0 +1,26 @@
+import Code from "./_forms-validation_code.mdx";
+import DeprecatedTags from '@site/src/components/Tags';
+import Style from "./_forms-validation_style.md";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Validation
+
+<div className="d-flex gap-2 align-items-center">
+  <DeprecatedTags url='/docs/legacy/validation' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
+
+<br />
+<br />
+
+<Tabs queryString="current-tab">
+
+  <TabItem value="style" label="Style">
+    <Style />
+  </TabItem>
+
+  <TabItem value="code" label="Code">
+    <Code />
+  </TabItem>
+
+</Tabs>
diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx
index acf13d2c997..a3788233284 100644
--- a/packages/documentation/docs/controls/input.mdx
+++ b/packages/documentation/docs/controls/input.mdx
@@ -2,6 +2,7 @@
 title: Input (text)
 ---
 
+import DeprecatedTags from '@site/src/components/Tags';
 import DocsTabs from '@site/src/components/DocsTabs';
 
 import DocsUx from './\_input_styleguide.md';
@@ -9,7 +10,10 @@ import DocsCode from './\_input_code.md';
 
 import Tags from './../auto-generated/ix-input/tags.md';
 
-<Tags />
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
 
 <br/>
 <br/>
diff --git a/packages/documentation/docs/controls/number-input.mdx b/packages/documentation/docs/controls/number-input.mdx
index 2ec24f12980..0ad30ff951b 100644
--- a/packages/documentation/docs/controls/number-input.mdx
+++ b/packages/documentation/docs/controls/number-input.mdx
@@ -1,3 +1,4 @@
+import DeprecatedTags from '@site/src/components/Tags';
 import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
 
 import DocsUx from './_number-input_styleguide.mdx';
@@ -6,7 +7,10 @@ import Tags from '@site/docs/auto-generated/ix-number-input/tags.md';
 
 # Number input
 
-<Tags />
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
 
 <br />
 <br />
diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx
index 0a804d4a78f..d084ff3630b 100644
--- a/packages/documentation/docs/controls/radio.mdx
+++ b/packages/documentation/docs/controls/radio.mdx
@@ -1,12 +1,18 @@
 import Admonition from '@theme/Admonition';
+
+import DeprecatedTags from '@site/src/components/Tags';
 import Playground from '@site/src/components/PlaygroundV3';
+
 import Props from '@site/docs/auto-generated/ix-radio/props.md';
 import Events from '@site/docs/auto-generated/ix-radio/events.md';
 import Tags from '@site/docs/auto-generated/ix-radio/tags.md';
 
 # Radio
 
-<Tags />
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/radiobutton' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
 
 ## Examples
 
diff --git a/packages/documentation/docs/controls/textarea.mdx b/packages/documentation/docs/controls/textarea.mdx
index 6fd4d41e27c..5bce88f4d43 100644
--- a/packages/documentation/docs/controls/textarea.mdx
+++ b/packages/documentation/docs/controls/textarea.mdx
@@ -1,13 +1,16 @@
+import DeprecatedTags from '@site/src/components/Tags';
 import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
 
 import DocsUx from './\_textarea-field_styleguide.mdx'
 import DocsCode from './\_textarea-field_code.mdx'
 import Tags from '@site/docs/auto-generated/ix-textarea/tags.md';
 
-
 # Textarea
 
-<Tags />
+<div className="d-flex gap-2 align-items-center">
+  <Tags />
+  <DeprecatedTags url='/docs/legacy/textarea' hasDeprecatedAncestor={true}></DeprecatedTags>
+</div>
 
 <br/>
 <br/>
diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md
deleted file mode 100644
index 5317b66296f..00000000000
--- a/packages/documentation/docs/controls/toggle.md
+++ /dev/null
@@ -1,57 +0,0 @@
-import Props from './../auto-generated/ix-toggle/props.md';
-import Events from './../auto-generated/ix-toggle/events.md';
-
-import Playground from '@site/src/components/PlaygroundV3';
-
-# Toggle
-
-## Examples
-
-### Basic
-
-<Playground
-  name="toggle"
-  >
-</Playground>
-
-### Custom label
-
-<Playground
-  name="toggle-custom-label"
-  hideInitalCodePreview
-  >
-</Playground>
-
-### Disabled
-
-<Playground
-  name="toggle-disabled"
-  hideInitalCodePreview
-  >
-</Playground>
-
-### Checked
-
-<Playground
-  name="toggle-checked"
-  hideInitalCodePreview
-  >
-</Playground>
-
-### Indeterminate
-
-<Playground
-name="toggle-indeterminate"
-hideInitalCodePreview
->
-</Playground>
-
-## API
-
-### Properties
-
-<Props />
-
-### Events
-
-<Events />
diff --git a/packages/documentation/docs/controls/toggle.mdx b/packages/documentation/docs/controls/toggle.mdx
new file mode 100644
index 00000000000..024738bbf9b
--- /dev/null
+++ b/packages/documentation/docs/controls/toggle.mdx
@@ -0,0 +1,19 @@
+import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
+
+import DocsUx from './_forms-toggle_styleguide.md';
+import DocsCode from './_toggle_code.mdx';
+
+import Tags from '@site/docs/auto-generated/ix-number-input/tags.md';
+
+
+# Toggle
+
+<Tags />
+
+<br/>
+<br/>
+
+<LinkableDocsTabs>
+  <DocsUx />
+  <DocsCode />
+</LinkableDocsTabs>
diff --git a/packages/documentation/docs/legacy/_category_.json b/packages/documentation/docs/legacy/_category_.json
new file mode 100644
index 00000000000..d115833cd93
--- /dev/null
+++ b/packages/documentation/docs/legacy/_category_.json
@@ -0,0 +1,3 @@
+{
+  "label": "Legacy"
+}
diff --git a/packages/documentation/docs/legacy/checkbox.mdx b/packages/documentation/docs/legacy/checkbox.mdx
new file mode 100644
index 00000000000..db2681f962d
--- /dev/null
+++ b/packages/documentation/docs/legacy/checkbox.mdx
@@ -0,0 +1,28 @@
+---
+unlisted: true
+---
+
+import Playground from '@site/src/components/PlaygroundV3';
+import LatestTags from '@site/src/components/Tags';
+
+# Checkbox
+
+<LatestTags url={'/docs/controls/checkbox'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+
+## Examples
+
+### Basic
+
+<Playground
+  name="checkbox"
+  height="8rem"
+/>
+
+### Indeterminate
+
+<Playground
+  name="checkbox-indeterminate"
+  height="8rem"
+  hideInitalCodePreview
+/>
+
diff --git a/packages/documentation/docs/controls/input-legacy.md b/packages/documentation/docs/legacy/input.mdx
similarity index 69%
rename from packages/documentation/docs/controls/input-legacy.md
rename to packages/documentation/docs/legacy/input.mdx
index 1f552ed8c17..f02e1b25702 100644
--- a/packages/documentation/docs/controls/input-legacy.md
+++ b/packages/documentation/docs/legacy/input.mdx
@@ -1,47 +1,48 @@
+---
+unlisted: true
+---
+
+import LatestTags from '@site/src/components/Tags';
 import Playground from '@site/src/components/PlaygroundV3';
 
-# Input (Legacy)
+# Input
+
+<LatestTags url={'/docs/controls/input'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
 
 ## Examples
 
-### Basic 
+### Basic
+
+<Playground name="input-legacy" />
 
-<Playground
-  name="input-legacy"
-  >
-</Playground>
 
 ### Disabled
 
 <Playground
   name="input-legacy-disabled"
   hideInitalCodePreview
-  >
-</Playground>
+/>
 
 ### Readonly
 
 <Playground
   name="input-legacy-readonly"
   hideInitalCodePreview
-  >
-</Playground>
+/>
 
 ### With icon
 
 <Playground
   name="input-legacy-with-icon"
   hideInitalCodePreview
-  >
-</Playground>
+/>
 
 ### Label placement
 
 <Playground
   name="input-legacy-labels"
   hideInitalCodePreview
-  >
-</Playground>
+/>
 
 ### Input types
 
@@ -49,13 +50,11 @@ import Playground from '@site/src/components/PlaygroundV3';
   name="input-legacy-types"
   height="15rem"
   hideInitalCodePreview
-  >
-</Playground>
+/>
 
 ### Search
 
 <Playground
   name="input-legacy-search"
   hideInitalCodePreview
-  >
-</Playground>
+/>
diff --git a/packages/documentation/docs/legacy/radiobutton.mdx b/packages/documentation/docs/legacy/radiobutton.mdx
new file mode 100644
index 00000000000..5dccb54b1d4
--- /dev/null
+++ b/packages/documentation/docs/legacy/radiobutton.mdx
@@ -0,0 +1,18 @@
+---
+unlisted: true
+---
+
+import Playground from '@site/src/components/PlaygroundV3';
+import LatestTags from '@site/src/components/Tags';
+
+# Radio button
+
+<LatestTags url={'/docs/controls/radio'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+
+## Examples
+
+### Basic
+
+<Playground
+  name="radio-button"
+/>
diff --git a/packages/documentation/docs/legacy/textarea.mdx b/packages/documentation/docs/legacy/textarea.mdx
new file mode 100644
index 00000000000..bc7ac402a79
--- /dev/null
+++ b/packages/documentation/docs/legacy/textarea.mdx
@@ -0,0 +1,33 @@
+---
+unlisted: true
+---
+
+import Playground from '@site/src/components/PlaygroundV3';
+import LatestTags from '@site/src/components/Tags';
+
+# Textarea
+
+<LatestTags url={'/docs/controls/textarea'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+
+## Examples
+
+### Basic
+
+<Playground
+  name="textarea"
+  height="7rem"
+/>
+### Disabled
+
+<Playground
+  name="textarea-disabled"
+  height="7rem"
+  hideInitalCodePreview
+/>
+### Readonly
+
+<Playground
+  name="textarea-readonly"
+  height="7rem"
+  hideInitalCodePreview
+/>
diff --git a/packages/documentation/docs/legacy/validation.mdx b/packages/documentation/docs/legacy/validation.mdx
new file mode 100644
index 00000000000..80f19116ae2
--- /dev/null
+++ b/packages/documentation/docs/legacy/validation.mdx
@@ -0,0 +1,40 @@
+---
+unlisted: true
+---
+
+import Playground from '@site/src/components/PlaygroundV3';
+import LatestTags from '@site/src/components/Tags';
+
+import Events from './../auto-generated/ix-validation-tooltip/events.md';
+import Props from './../auto-generated/ix-validation-tooltip/props.md';
+
+# Form validation
+
+<LatestTags url={'/docs/controls/forms/forms-validation'} hasDeprecatedAncestor={false} deprecationVersion='2.6.0'></LatestTags>
+
+<br/>
+<br/>
+
+For the validation `@siemens/ix` use the validation concept of [bootstrap](https://getbootstrap.com/docs/5.2/forms/validation/).
+The difference is that the validation tooltip is implemented as `@siemens/ix` [tooltip](#properties-tooltip)
+
+In the following examples section you will find different implementations of a form validation.
+
+## Examples
+
+### Basic
+
+<Playground
+  name="validation"
+  height="20rem"
+/>
+
+## API
+
+### Properties
+
+<Props />
+
+### Events
+
+<Events />
diff --git a/packages/documentation/docs/migration/uxt.md b/packages/documentation/docs/migration/uxt.md
index 785dad8e25d..3e348ed4803 100644
--- a/packages/documentation/docs/migration/uxt.md
+++ b/packages/documentation/docs/migration/uxt.md
@@ -92,7 +92,7 @@ As some of the components are named differently in Industrial Experience, please
 | Notification                                     | [Toast](../controls/toast.md)                                                                 |
 | Pager                                            | [Pagination](../controls/pagination.md)                                                            |
 | Popover                                          | [Tooltip](../controls/tooltip.md), [dropdown](../controls/dropdown.md)                                                     |
-| Switch                                           | [Toggle](../controls/toggle.md)                                                                |
+| Switch                                           | [Toggle](../controls/toggle.mdx)                                                                |
 | Context region                                   | [Pane](../controls/panes.md) (inline right)                                                   |
 | Item region                                      | [Pane](../controls/panes.md) (floating right)                                                 |
 | Leading region                                   | [Pane](../controls/panes.md) (inline left)                                                    |
diff --git a/packages/documentation/src/components/ApiTableTag/ApiTableTag.css b/packages/documentation/src/components/ApiTableTag/ApiTableTag.css
index 8eebea75fd2..99f48423e02 100644
--- a/packages/documentation/src/components/ApiTableTag/ApiTableTag.css
+++ b/packages/documentation/src/components/ApiTableTag/ApiTableTag.css
@@ -11,23 +11,18 @@
   position: relative;
 
   align-self: flex-start;
-
   width: auto;
   max-width: 25vw;
-
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
   cursor: default;
   font-size: 12px;
   background-color: var(--theme-color-primary);
   border-radius: 2px;
   padding: 0.25rem 0.5rem;
-
   color: var(--theme-color-inv-std-text);
   font: var(--theme-text-default-title-single);
-
   margin: 0.5rem 0;
 }
 
diff --git a/packages/documentation/src/components/Tags/LegacyTag.css b/packages/documentation/src/components/Tags/LegacyTag.css
new file mode 100644
index 00000000000..191fc99a0aa
--- /dev/null
+++ b/packages/documentation/src/components/Tags/LegacyTag.css
@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.TagContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: min-content;
+  white-space: nowrap;
+
+  gap: 0.25rem;
+
+  border: 1px solid var(--theme-color-primary);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
+
+  font: var(--theme-text-default-title-single);
+  color: var(--theme-color-primary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+a[href].TagContainer {
+  text-decoration: none !important;
+}
+
+div.TagsContainer > .Docs__Tag {
+  margin-right: 0;
+}
diff --git a/packages/documentation/src/components/Tags/index.tsx b/packages/documentation/src/components/Tags/index.tsx
new file mode 100644
index 00000000000..c5fcdecce0d
--- /dev/null
+++ b/packages/documentation/src/components/Tags/index.tsx
@@ -0,0 +1,26 @@
+import './LegacyTag.css';
+import { IxIcon } from '@siemens/ix-react';
+
+export default function LegacyTag(
+  props: Readonly<{
+    url: string;
+    hasDeprecatedAncestor: boolean;
+    deprecationVersion?: string;
+  }>
+) {
+  return (
+    <div className="TagsContainer d-flex gap-2 align-items-center">
+      {!props.hasDeprecatedAncestor && (
+        <span className="Api__Table Docs__Tag Docs__Tag__Deprecated">
+          Deprecated since {props.deprecationVersion}
+        </span>
+      )}
+      <a href={props.url} target="_blank" className="TagContainer">
+        <IxIcon name="open-external" color="color-primary" size="16"></IxIcon>
+        {props.hasDeprecatedAncestor
+          ? 'Show deprecated version'
+          : 'Show latest version'}
+      </a>
+    </div>
+  );
+}
diff --git a/packages/documentation/src/css/api-table.scss b/packages/documentation/src/css/api-table.scss
index 64c89829e63..a3a98a2bed9 100644
--- a/packages/documentation/src/css/api-table.scss
+++ b/packages/documentation/src/css/api-table.scss
@@ -30,7 +30,7 @@
   font-size: 12px;
   background-color: var(--theme-color-primary);
   border-radius: 2px;
-  padding: 0.15rem 0.25rem;
+  padding: 0.15rem 0.5rem;
   margin-right: 0.15rem;
 
   color: var(--theme-color-inv-std-text);