Docs/formwwriting update/review

packages/core/src/components/select/select.tsx

@@ -166,7 +166,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   @Prop() i18nSelectListHeader = 'Select an option';
 
   /**
-   * Hint inside of dropdown if no items where found with current filter text
+   * Information inside of dropdown if no items where found with current filter text
    *
    * @since 1.5.0
    */

packages/documentation/docs/controls/_date-input_styleguide.mdx

@@ -1,4 +1,4 @@
-The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, filters, and scheduling tools to ensure consistent and accurate date entries.
+The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, filters and scheduling tools to ensure consistent and accurate date entries.
 
 ![Date input overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3629-6200&t=ADQCetGKOEH1WG2r-4)
 1. Label
@@ -15,20 +15,20 @@ The date input component enables users to enter and select a date in a standardi
 
 ## Options
 
-- **Label**: See [form field](./forms/forms-field.md)
-- **Required**: 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)
-- **Show text as tooltip**: See [form field](./forms/forms-field.md)
+- **Label**: See [form field](./forms/forms-field.md).
+- **Required**: 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).
+- **Show text as tooltip**: See [form field](./forms/forms-field.md).
 - **Placeholder**: See [form field](./forms/forms-field.md). We typically use a placeholder to show an example date format to assist users when the field is empty.
 - **Error message**: Feedback text when date is not parsable. We typically use this to inform users that the entered date format is incorrect and guide them to enter a valid date.
 - **Format**: Specify the date format, default ‘yyyy/LL/dd’ to ensure that dates are entered in a consistent and recognizable format.
 
 ## Behavior in context
 
 - **Interaction**:
-  - Click or focus opens date picker.
-  - Use mouse or keyboard arrows to navigate to desired date.
+  - Click or focus opens the date picker.
+  - Use mouse or keyboard arrows to navigate to the desired date.
   - Selecting a date in date picker with mouse click or enter closes the date picker.
   - Typing a date into input field with valid format closes the date picker.
   - Escape key closes the date picker.
@@ -50,10 +50,9 @@ Date input has five states: Default, hover, disabled, read-only and focused.
 
 - Do use consistent date formats throughout the application to avoid confusion
 - Do use separate inputs for start and end dates to simplify date ranges
-- Do provide clear instructions, such as “Enter the date in yyyy/MM/dd format”
-- Do handle time zones and label them clearly if relevant
+- Do provide clear instructions, such as “Enter the date in yyyy/mm/dd format”
 - Do consider localization to adapt date formats to local conventions
-- Don't use ambiguous formats like 09/08/2006 without clear context
+- Don't use ambiguous formats like 09/08/2006 without giving clear context
 - Don't allow free text without validation or formatting guidance
 
 ## Related patterns

packages/documentation/docs/controls/_number-input_styleguide.mdx

@@ -12,21 +12,21 @@ The number input component allows users to enter and adjust numerical values. It
 
 ## Options
 
-- **Label**: See [form field](./forms/forms-field.md)
-- **Value**: See [form field](./forms/forms-field.md)
-- **Required**: 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)
-- **Show text as tooltip**: See [form field](./forms/forms-field.md)
-- **Placeholder**: See [form field](./forms/forms-field.md)
-- **Allowed characters pattern**: Specify the allowed characters for input. We typically use this to reject invalid characters, such as decimal points, by triggering a shaking animation immediately upon value change during typing.
-- **Pattern**: Define the expected input using regular expressions, such as an integer between 1 and 100. We typically use this to validate the input when the user leaves the field or clicks submit.
-- **Min/Max**: Specifies the minimum and maximum values that can be entered, ensuring the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values.
-- **Show stepper buttons**: Stepper buttons are optional controls used to increment or decrement the value, suitable for small ranges with few steps. We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems, or form inputs requiring fine-tuned numerical values.
+- **Label**: See [form field](./forms/forms-field.md).
+- **Value**: See [form field](./forms/forms-field.md).
+- **Required**: 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).
+- **Show text as tooltip**: See [form field](./forms/forms-field.md).
+- **Placeholder**: See [form field](./forms/forms-field.md).
+- **Allowed characters pattern**: Specify the characters allowed for input. We typically use this to reject invalid characters, such as decimal points. When users type an invalid character, a shaking animation is immediately triggered.
+- **Pattern**: Define the expected input using regular expressions, such as an integer between 1 and 100. We often use this to validate the input when the user leaves the field or clicks submit.
+- **Min/Max**: Specify the minimum and maximum values that can be entered to ensure the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values.
+- **Show stepper buttons**: Use these optional controls to increment or decrement the value (suitable for small ranges with few steps). We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems or form inputs requiring fine-tuned numerical values.
 
 ## 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)
+- **Interaction:** Users can type a value or use stepper buttons to adjust it. We recommend using stepper buttons, especially for touch interactions, to enhance usability and precision.
+- **Validation:** See [form field](./forms/forms-validation.md).
 - **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.
 
@@ -36,9 +36,9 @@ The number input has five states: default, hover, focused, disabled and read-onl
 
 ## Dos and Don’ts
 - Do set appropriate min and max values to prevent invalid entries and guide user input
-- Do provide clear error messages when the input value is out of the allowed range or doesn’t match the required pattern
-- Do consider special cases such as zero, negative numbers, and very large numbers to ensure all possible inputs are handled correctly
-- Don't specify patterns that do not align with your use case, e.g. inappropriate interval between valid values
+- Do provide clear error messages when the input value is out of the allowed range or does not match the required pattern
+- Do consider special cases such as zero, negative numbers and very large numbers to ensure all possible inputs are handled correctly
+- Don't specify patterns that do not align with your use case, e.g. inappropriate intervals between valid values
 
 ## Related patterns
 - [Form fields](./forms/forms-field.md)

packages/documentation/docs/controls/_select_styleguide.md

@@ -11,19 +11,19 @@ A select component allows users to choose from a list of options. It supports si
 7. Dropdown list
 8. List header
 9. Selected list item
-10. Editable mode (add new item)
+10. Editable mode (add new items)
 
 ## Options
 
 - **Label:** See [form field](./forms/forms-field.md).
-- **Placeholder:** Use a placeholder to provide a hint about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context.
+- **Placeholder:** Use a placeholder to provide information about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context.
 - **Helper text:** See [form field](./forms/forms-field.md).
 - **Feedback text:** See [form field](./forms/forms-field.md).
-- **Show clear button:** Selects can have a dedicated button to easily clear the selection. Hide the button when you offer other ways to reset (e.g. a default item like "none"), or if you aim for a simplified keyboard accessibility.
+- **Show clear button:** Select components can have a dedicated button to easily clear the selection. Hide the button when offering users other ways to reset, e.g. a default item like "none", or if you aim for simplified keyboard accessibility.
 - **List header:** Use a header to provide additional context or instructions about the items to help users understand the choices better. 
-	- **Hide list header:** Hide the header of the dropdown list when it is not needed.
-- **Hint for no matches:** Set a message that is displayed when no item matches the inserted text.
-- **Editable:** When enabled users can add new items to the list.
+	- **Hide list header:** Hide the header of the dropdown list when not required.
+- **Information for no matches:** Set a message to be displayed when no item matches the inserted text.
+- **Editable:** When enabled, users can add new items to the list.
 - **Multiselect:** Allow users to select multiple items from the list.
 - **Item label:** Set a short and concise label for dropdown items.
 - **Selected item:** Mark selected items in the dropdown with a check mark.
@@ -34,12 +34,12 @@ A select component allows users to choose from a list of options. It supports si
 - **Interaction:**
 	- Click or Enter key on button opens dropdown list.
 	- Typing in the input field filters the dropdown list.
-	- Arrow keys navigate within dropdown list.
-	- Click or enter selects highlighted list item.
+	- Arrow keys navigate within the dropdown list.
+	- Click or Enter selects a highlighted list item.
 	- Escape key closes dropdown list and returns to the originally selected value.
 - **Overflow:**
 	- The text in an input field is truncated with the length of the container.
-	- On the multiselect, the selected items break into a second line and then shows a scrollbar if it grows beyond.
+	- On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines.
 	- The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item.
 - **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number fields](number-input.mdx).
 
@@ -51,12 +51,12 @@ The select field has five states: default, hover, focused, disabled and read-onl
 
 ## Dos and Don’ts
 
-- 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 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)
+- Do consider performance when loading an extensive list of items
+- Do use the select component when there is a finite list of items available to avoid manual input errors or duplicates
+- Do sort items logically, e.g. 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 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
 
 ![Don't combine data attributes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3978-800&t=MWpyPDZDK5B531n9-4)
 

packages/documentation/docs/controls/_textarea-field_styleguide.mdx

@@ -1,4 +1,4 @@
-The textarea component allows users to input multi-line text, making it ideal for forms that require longer entries. We typically use textareas in scenarios such as feedback forms, comment sections, and message composition.
+The textarea component allows users to input multi-line text, making it ideal for forms that require longer entries. We typically use textareas in scenarios such as feedback forms, comment sections and message composition.
 
 ![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4)
 1. Label
@@ -11,37 +11,37 @@ The textarea component allows users to input multi-line text, making it ideal fo
 
 ## Options
 
-- **Label**: See [form field](./forms/forms-field.md)
-- **Value**: See [form field](./forms/forms-field.md)
-- **Required**: 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)
-- **Show text as tooltip**: See [form field](./forms/forms-field.md)
-- **Placeholder**: See [form field](./forms/forms-field.md)
-- **Counter**: See [form field](./forms/forms-field.md)
+- **Label**: See [form field](./forms/forms-field.md).
+- **Value**: See [form field](./forms/forms-field.md).
+- **Required**: 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).
+- **Show text as tooltip**: See [form field](./forms/forms-field.md).
+- **Placeholder**: See [form field](./forms/forms-field.md).
+- **Counter**: See [form field](./forms/forms-field.md).
 - **Resize behavior**: Determines how textareas can be resized (both directions, horizontally, vertically, or no resizing). Default size is 300px x 100px.
-- **Columns and width**: Defines inital width by number of columns and/or width.
-- **Rows and height**: Defines inital height by number of rows and/or height.
+- **Columns and width**: Defines initial width by number of columns and/or width.
+- **Rows and height**: Defines initial height by number of rows and/or height.
 
 
 ## Behavior in context
 
 - **Interaction**:
   - Clicking in the container enables the editing of the field.
-  - Users can type, copy, paste, and cut text within textareas.
+  - Users can type, copy, paste and cut text within textareas.
   - 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.md).
 - **Overflow**: Text within the textarea is not truncated; it supports scrolling for overflow content.
 - **Alignment**: Text is always left-aligned in textareas.
 - **Sizing**:
   - Use columns and rows when you want to define the size of the textarea based on the number of characters (columns) and lines (rows) it can display. This is particularly useful for textareas where the content length is predictable, such as input fields with character limits.
-  - Use width and height when you need to specify the exact dimensions of the textarea in terms of pixels, rems, or other units. This is ideal for ensuring consistent layout and design across different screen sizes and devices, especially in responsive designs.
+  - Use width and height when you need to specify the exact dimensions of the textarea in terms of pixels, rems or other units. This is ideal for ensuring consistent layout and design across different screen sizes and devices, especially in responsive designs.
 
 ## States
 
-Textareas have five states: Default, hover, focused, read-only, and disabled
+Textareas have five states: Default, hover, focused, read-only and disabled
 
 ![Textarea states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3947-527&t=DtCmoFcLwhf7ke3S-4)
 
@@ -50,7 +50,7 @@ Textareas have five states: Default, hover, focused, read-only, and disabled
 - Do ensure the textarea size matches the expected input, e.g. 5 to 10 rows for detailed feedback
 - Do use the placeholder to give users an example of the expected input
 - Do set minimum and maximum character limits to ensure appropriate input length
-- Don’t use the textarea for short, single-line inputs like names or email addresses; use an [input field](./input.mdx) instead
+- Don’t use the textarea for short, single-line input like name or email address, use an [input field](./input.mdx) instead
 
 ## Related patterns