siemens · danielleroux · Oct 23, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024
diff --git a/packages/documentation/docs/controls/_input_code.md b/packages/documentation/docs/controls/_input_code.md
@@ -0,0 +1,52 @@
+import Playground from '@site/src/components/PlaygroundV2';
+import Props from '@site/docs/auto-generated/ix-input/props.md';
+import Events from '@site/docs/auto-generated/ix-input/events.md';
+import Tags from '@site/docs/auto-generated/ix-input/tags.md';
+
+# Input
+
+<Tags />
+
+## Examples
+
+### Basic
+
+<Playground name="input" examplesByName></Playground>
+
+### Disabled
+
+<Playground name="input-disabled" examplesByName></Playground>
+
+### Label
+
+<Playground name="input-label" examplesByName></Playground>
+
+### Pattern
+
+<Playground name="input-pattern" examplesByName></Playground>
+
+### Readonly
+
+<Playground name="input-readonly" examplesByName></Playground>
+
+### Types
+
+<Playground name="input-types" examplesByName height="15rem"></Playground>
+
+### Validation
+
+<Playground
+  name="input-validation"
+  examplesByName
+  height="25rem"
+></Playground>
+
+## API
+
+### Properties
+
+<Props />
+
+### Events
+
+<Events />
diff --git a/...ls/forms/_forms-field-input_styleguide.md → ...tation/docs/controls/_input_styleguide.md b/...ls/forms/_forms-field-input_styleguide.md → ...tation/docs/controls/_input_styleguide.md
@@ -1,15 +1,16 @@
 An input field is a user interface element that allows users to enter and edit text, numbers and symbols. It’s commonly used in forms, search bars, and other areas where data input is required.
 
-![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3054-593&t=6gU2IFkPWR943af8-4)
+![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3054-593&t=jhhv5OZGqmBpgXcs-4)
 
 1. Label
-2. Mandatory indicator
+2. Required indicator
 3. Placeholder
 4. Slot-end
 5. Slot-start
 6. Container
 7. Helper or feedback text
 8. Counter
+
 ## Options
 
 - **Label:** See [form field](forms-field.md).
@@ -18,17 +19,20 @@ An input field is a user interface element that allows users to enter and edit t
 - **Helper text:** See [form field](forms-field.md).
 - **Counter:** See [form field](forms-field.md).
 - **Feedback text**: See [form field](forms-field.md).
+
 ## Behavior in context
 
 - **Validation:** See [validation](forms-validation.md).
 - **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,md).
+
 ## States
 
-The input field has five states: default, focused, hover, disabled and read-only. In the read-only state, the input field is displayed without offering any user interaction.
+The input field has five states: default, active/focused, hover, disabled and read-only. In the read-only state, the input field is displayed without offering any user interaction.
+
+![Field States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3198-7167&t=jhhv5OZGqmBpgXcs-4)
 
-![Field States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3198-7167&t=EBVCuGpWXmdVYgeZ-4)
 ## Dos and Don’ts
 
 - Do use helper text to guide users through the input process
@@ -39,8 +43,8 @@ The input field has five states: default, focused, hover, disabled and read-only
 
 ## 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.md)
+- [Layout](./forms/forms-layout.md)
 - [Number field](number-field.md)
-- [Date field](date-field.md)
+- [Date field](date-field.md)
diff --git a/packages/documentation/docs/controls/_panes_styleguide.md b/packages/documentation/docs/controls/_panes_styleguide.md
@@ -53,6 +53,6 @@ Panes have two states: collapsed and expanded. The appearance of the states vari
 
 ## Related patterns
 
-[Drawers](./drawer.md)
-[Header](../controls/application-frame/application-header.md)
-[Menu](../controls/application-frame/application-menu.md)
+- [Drawers](./drawer.md)
+- [Header](../controls/application-frame/application-header.md)
+- [Menu](../controls/application-frame/application-menu.md)
diff --git a/packages/documentation/docs/controls/_select_code.mdx b/packages/documentation/docs/controls/_select_code.mdx
@@ -0,0 +1,67 @@
+import Props from './../auto-generated/ix-select/props.md';
+import Events from './../auto-generated/ix-select/events.md';
+import Tags from './../auto-generated/ix-select/tags.md';
+
+import ItemProps from './../auto-generated/ix-select-item/props.md';
+import ItemEvents from './../auto-generated/ix-select-item/events.md';
+
+import Playground from '@site/src/components/PlaygroundV3';
+
+# Select
+
+<Tags />
+
+## Examples
+
+### Basic
+
+<Playground
+  name="select"
+  height="18rem"
+  >
+</Playground>
+
+### Editable
+
+<Playground
+  name="select-editable"
+  height="18rem"
+  hideInitalCodePreview
+  >
+</Playground>
+
+### Multiselect
+
+<Playground
+  name="select-multiple"
+  height="18rem"
+  hideInitalCodePreview
+></Playground>
+
+### Validation
+
+<Playground
+  name="select-validation"
+  height="32rem"
+  hideInitalCodePreview
+></Playground>
+
+## API (ix-select)
+
+### Properties
+
+<Props />
+
+### Events
+
+<Events />
+
+## Properties (ix-select-item)
+
+### Properties
+
+<ItemProps />
+
+### Events
+
+<ItemEvents />
diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md
@@ -0,0 +1,66 @@
+Selects provide users to make a single or multi selection from a filterable list. With the editable variant, users can also add new options to the list.
+
+![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3054-593&t=6gU2IFkPWR943af8-4)
+
+1. Label
+2. Required indicator
+3. Placeholder
+4. Clear button
+5. Open dropdown button
+6. Container
+7. Dropdown list
+8. List header
+9. Selected list item
+10. Add new option (editable mode)
+
+## Options
+
+- **Label**: See [form field](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.
+- **Helper text**: See [form field](forms-field.md).
+- **Feedback text**: See [form field](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 option like "none"), or if you aim for a simplified keyboard accessibility.
+- **Select list header:** Use a header to provide additional context or instructions about the options 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**: Allow users to add new options to the list.
+- **Multi-select**: Allow users to select multiple items from the list.
+## Behavior in context
+
+- **Validation**: See [validation](forms-validation.md).
+- **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.
+	- 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 multi-select, the selected items break into a second line and then shows a scrollbar if it grows beyond.
+	- 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,md).
+## States
+
+The select field has five states: default, hover, active/focused, disabled and read-only. In the disabled state, the input field is displayed without offering any user interaction.
+
+![Field States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3198-7167&t=EBVCuGpWXmdVYgeZ-4)
+## Dos and Don’ts
+
+- Do take care of performance when loading an extensive list of options
+- Do use selects when there is a finite list of options available to avoid manual input errors or duplicates
+- Do sort items logically (e.g. alphabetically, numerically)
+- Do use short and concise labels for items
+- Don’t use selects if users need to compare options based on multiple criteria (use [tables](table.md) or [event lists](event-list.md) with a search functionality instead)
+- Don't use selects for binary choices, e.g. 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)
+
+## Related patterns
+
+- [Form field](./forms/forms-field.md)
+- [Validation](./forms/forms-validation.md)
+- [Layout](./forms/forms-layout.md)
+- [Input](input.md)
+- [Radio button](radio.mdx)
+- [Checkbox](checkbox.mdx)
+- [Toggle](toggle.md)
+- [Date field](date-field.md)
diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx
@@ -1,52 +1,17 @@
-import Playground from '@site/src/components/PlaygroundV2';
-import Props from '@site/docs/auto-generated/ix-input/props.md';
-import Events from '@site/docs/auto-generated/ix-input/events.md';
-import Tags from '@site/docs/auto-generated/ix-input/tags.md';
+---
+title: Input (text)
+---
 
-# Input
+import DocsTabs from '@site/src/components/DocsTabs';
 
-<Tags />
-
-## Examples
-
-### Basic
-
-<Playground name="input" examplesByName></Playground>
-
-### Disabled
-
-<Playground name="input-disabled" examplesByName></Playground>
-
-### Label
-
-<Playground name="input-label" examplesByName></Playground>
-
-### Pattern
+import DocsUx from './\_input_styleguide.md';
+import DocsCode from './\_input_code.md';
 
-<Playground name="input-pattern" examplesByName></Playground>
+import Tags from './../auto-generated/ix-input/tags.md';
 
-### Readonly
-
-<Playground name="input-readonly" examplesByName></Playground>
-
-### Types
-
-<Playground name="input-types" examplesByName height="15rem"></Playground>
-
-### Validation
-
-<Playground
-  name="input-validation"
-  examplesByName
-  height="25rem"
-></Playground>
-
-## API
-
-### Properties
-
-<Props />
+<Tags />
 
-### Events
+<br/>
+<br/>
 
-<Events />
+<DocsTabs styleguide={DocsUx} code={DocsCode} />
diff --git a/packages/documentation/docs/controls/select.mdx b/packages/documentation/docs/controls/select.mdx
@@ -1,67 +1,17 @@
-import Props from './../auto-generated/ix-select/props.md';
-import Events from './../auto-generated/ix-select/events.md';
-import Tags from './../auto-generated/ix-select/tags.md';
+---
+title: Select
+---
 
-import ItemProps from './../auto-generated/ix-select-item/props.md';
-import ItemEvents from './../auto-generated/ix-select-item/events.md';
+import DocsTabs from '@site/src/components/DocsTabs';
 
-import Playground from '@site/src/components/PlaygroundV3';
+import DocsUx from './\_select_styleguide.md';
+import DocsCode from './\_select_code.mdx';
 
-# Select
+import Tags from './../auto-generated/ix-select/tags.md';
 
 <Tags />
 
-## Examples
-
-### Basic
-
-<Playground
-  name="select"
-  height="18rem"
-  >
-</Playground>
-
-### Editable
-
-<Playground
-  name="select-editable"
-  height="18rem"
-  hideInitalCodePreview
-  >
-</Playground>
-
-### Multiselect
-
-<Playground
-  name="select-multiple"
-  height="18rem"
-  hideInitalCodePreview
-></Playground>
-
-### Validation
-
-<Playground
-  name="select-validation"
-  height="32rem"
-  hideInitalCodePreview
-></Playground>
-
-## API (ix-select)
-
-### Properties
-
-<Props />
-
-### Events
-
-<Events />
-
-## Properties (ix-select-item)
-
-### Properties
-
-<ItemProps />
-
-### Events
+<br/>
+<br/>
 
-<ItemEvents />
+<DocsTabs styleguide={DocsUx} code={DocsCode} />