added forms validation chapters incl field description

packages/documentation/docs/controls/forms/_forms-behavior_styleguide.md

@@ -0,0 +1,42 @@
+**TBD!** A field is a form element when user input is needed. It is typically used with other form elements in a fieldset.
+
+![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4)
+
+1. Label
+2. Form component
+3. Hint or feedback text
+4. Mandatory indicator
+5. Counter (input and textarea field only)
+
+Here only the default field is described. For the custom field see more details in layouts chapter
+
+## Options
+- **Label:** Add a label for the field that provides context to your users.
+- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form.
+- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md).
+- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field.
+- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused.
+- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)).
+- **Counter:** Display the number of characters entered in the field.
+
+## Behavior in context
+- **Interaction:** see [validation](forms-validation.md)
+- **Behavior of a field as part of a form:** see [behavior](forms-validation)
+- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed.
+
+## States
+Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states.
+
+Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)).
+
+![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2767-5681&t=IIgjTqoOEP524yAH-4)
+
+## Dos and Don’ts
+- Do use a label for every field.
+- Do use a counter for fields with a character limit.
+- Do use hint text to provide additional information or context about the field.
+- Don’t use placeholder text or hint text as a replacement for labels.
+
+## Related patterns
+- [Validation](forms-validation.md)
+- [Behavior](forms-behavior.md)

packages/documentation/docs/controls/forms/_forms-field_styleguide.md

@@ -0,0 +1,49 @@
+A field is a form element when user input is needed. It is typically used with other form elements in a fieldset.
+
+![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4)
+
+1. Label
+2. Form component
+3. Hint or feedback text
+4. Mandatory indicator
+5. Counter (input and textarea field only)
+
+**Note:** In this chapter, we focus exclusively on describing the default field component. For details about custom fields, please refer to the [layouts](forms-layouts.md) chapter.
+
+## Options
+- **Label:** Add a label for the field that provides context to your users.
+- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form.
+- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md).
+- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field.
+- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused.
+- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)).
+- **Counter:** Display the number of characters entered in the field.
+
+## Behavior in context
+- **Interaction:** see [validation](forms-validation.md)
+- **Behavior of a field as part of a form:** see [behavior](forms-validation)
+- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed.
+
+## States
+Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states.
+
+Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)).
+
+![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-12426&t=pKzFQBhaXmjTsR8P-4)
+
+## Dos and Don’ts
+- Do use a label for every field
+- Do use a counter for fields with a character limit
+- Do use hint text to provide additional information or context about the field
+- Don’t use placeholder text or hint text as a replacement for labels
+
+## Related patterns
+- [Validation](forms-validation.md)
+- [Behavior](forms-behavior.md)
+- [Input](input.md)
+- [Textarea](textarea.md)
+- [Select](select.md)
+- [Checkbox](checkbox.md)
+- [Radio button](radio-button.md)
+- [Toggle switch](toogle.md)
+- [Upload](upload.md)

packages/documentation/docs/controls/forms/_forms-layout_styleguide.md

@@ -0,0 +1,49 @@
+**TBD**! A field is a form element when user input is needed. It is typically used with other form elements in a fieldset.
+
+![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4)
+
+1. Label
+2. Form component
+3. Hint or feedback text
+4. Mandatory indicator
+5. Counter (input and textarea field only)
+
+**Note:** In this chapter, we focus exclusively on describing the default field component. For details about custom fields, please refer to the [layouts](forms-layouts.md) chapter.
+
+## Options
+- **Label:** Add a label for the field that provides context to your users.
+- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form.
+- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md).
+- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field.
+- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused.
+- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)).
+- **Counter:** Display the number of characters entered in the field.
+
+## Behavior in context
+- **Interaction:** see [validation](forms-validation.md)
+- **Behavior of a field as part of a form:** see [behavior](forms-validation)
+- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed.
+
+## States
+Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states.
+
+Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)).
+
+![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2767-5681&t=IIgjTqoOEP524yAH-4)
+
+## Dos and Don’ts
+- Do use a label for every field
+- Do use a counter for fields with a character limit
+- Do use hint text to provide additional information or context about the field
+- Don’t use placeholder text or hint text as a replacement for labels
+
+## Related patterns
+- [Validation](forms-validation.md)
+- [Behavior](forms-behavior.md)
+- [Input](input.md)
+- [Textarea](textarea.md)
+- [Select](select.md)
+- [Checkbox](checkbox.md)
+- [Radio button](radio-button.md)
+- [Toggle switch](toogle.md)
+- [Upload](upload.md)

packages/documentation/docs/controls/forms/Validation.md → packages/documentation/docs/controls/forms/_forms-validation_styleguide.md

@@ -11,6 +11,10 @@ Key aspects:
 ## Options
 - Tooltip and feedback options can be found in the Field chapter
 
+## Behavior in context
+- **Validation:** A validation can occur when a user interacts with a form field, such as submitting a form or moving to the next field. For more details, refer to the Behavior chapter.
+- **Override behavior:** When multiple validation states are present, only the message with the highest priority state is shown. The order of priority, from lowest to highest, is: valid, info, warning, and invalid.
+
 ## States
 - Default: The initial state of a form field, often before any user interaction.
 - Invalid: Indicates that the user input does not meet the specified requirements (e.g., missing data, incorrect format).
@@ -20,16 +24,12 @@ Key aspects:
 
 ![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2767-5681&t=IIgjTqoOEP524yAH-4)
 
-## Behavior in context
-- Validation: A validation can occur when a user interacts with a form field, such as submitting a form or moving to the next field. For more details, refer to the Behavior chapter.
-- Override behavior: When multiple validation states are present, only the message with the highest priority state is shown. The order of priority, from lowest to highest, is: valid, info, warning, and invalid.
-
 ## Dos and Don’ts
 - Do include validation feedback icons inside of components
 - Do ensure that validation feedback remains visible on hover, active, and when focused
 - Do show the "invalid" color on the label, component, and help text
 - Don’t show valid feedback on components, only in the input help component
 
-## Related patterns:
+## Related patterns
 - [Field]()
 - [Behavior]()

packages/documentation/docs/controls/forms/forms-behavior.md

@@ -0,0 +1,12 @@
+---
+title: Behavior
+---
+R
+import DocsTabs from '@site/src/components/DocsTabs';
+
+import DocsUx from './\_forms-behavior_styleguide.md';
+%% import DocsCode from './\_forms-behavior_code.md'; %%
+
+# Behavior
+
+<DocsTabs styleguide={DocsUx} code={DocsCode} />

packages/documentation/docs/controls/forms/forms-field.md

@@ -0,0 +1,12 @@
+---
+title: Field
+---
+
+import DocsTabs from '@site/src/components/DocsTabs';
+
+import DocsUx from './\_forms-field_styleguide.md';
+%% import DocsCode from './\_forms-field_code.md'; %%
+
+# Field
+
+<DocsTabs styleguide={DocsUx} code={DocsCode} />

packages/documentation/docs/controls/forms/forms-layout.md

@@ -0,0 +1,12 @@
+---
+title: Layout
+---
+
+import DocsTabs from '@site/src/components/DocsTabs';
+
+import DocsUx from './\_forms-layout_styleguide.md';
+%% import DocsCode from './\_forms-layout_code.md'; %%
+
+# Layout
+
+<DocsTabs styleguide={DocsUx} code={DocsCode} />

packages/documentation/docs/controls/forms/forms-validation.md

@@ -0,0 +1,12 @@
+---
+title: Validation
+---
+
+import DocsTabs from '@site/src/components/DocsTabs';
+
+import DocsUx from './\_forms-validation_styleguide.md';
+%% import DocsCode from './\_forms-validation_code.md'; %%
+
+# Validation
+
+<DocsTabs styleguide={DocsUx} code={DocsCode} />