From e659f6f7a5158cb4f5c70ba2ab45d98a42fb68ad Mon Sep 17 00:00:00 2001 From: Kathrin Date: Wed, 20 May 2026 13:49:52 +0200 Subject: [PATCH 1/4] Update form component docs and sidebar labels Rework documentation for checkbox, radio, and input-number components for clarity. Checkbox options were restructured into 'Checkbox' and 'Checkbox group' subitems (Label, Indeterminate, Helper text, Show text as tooltip). Radio docs were renamed to 'Radio button - Usage' and options reorganized into 'Radio button' and 'Radio button group' with added helper, tooltip, required and direction guidance. Input-number removed a redundant 'Feedback text' entry and fixed EOF newline. Also updated the sidebar label from 'Radio' to 'Radio button' to match the doc heading. --- docs/components/checkbox/guide.md | 11 ++++++----- docs/components/input-number/guide.md | 3 +-- docs/components/radio/guide.md | 13 +++++++++---- sidebars.ts | 2 +- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/components/checkbox/guide.md b/docs/components/checkbox/guide.md index 5752c2372..3c37343bf 100644 --- a/docs/components/checkbox/guide.md +++ b/docs/components/checkbox/guide.md @@ -17,12 +17,13 @@ Checkboxes are commonly used when there are multiple options that can be selecte ## Options -- **Checkbox label:** See [form field](../forms-field). -- **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**: + - **Label:** See [form field](../forms-field). + - **Indeterminate:** 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. -- **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. -- **Group helper text**: See [form field](../forms-field). -- **Group feedback text**: See [form field](../forms-field). + - **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). + - **Show text as tooltip**: See [form field](../forms-field). ## Behavior in context diff --git a/docs/components/input-number/guide.md b/docs/components/input-number/guide.md index 9b9e4cae1..7951dd13b 100644 --- a/docs/components/input-number/guide.md +++ b/docs/components/input-number/guide.md @@ -22,7 +22,6 @@ The number input component is commonly used in forms, calculators and other area - **Value**: See [form field](../forms-field). - **Required**: See [form field](../forms-field). - **Helper text**: See [form field](../forms-field). -- **Feedback text**: See [form field](../forms-field). - **Show text as tooltip**: See [form field](../forms-field). - **Placeholder**: See [form field](../forms-field). - **Text alignment:** See [form field](../forms-field) (by default at end). @@ -56,4 +55,4 @@ The number input has five states: default, hover, focused, disabled and read-onl - [Validation](../forms-validation) - [Layout](../forms-layout) - [Input](../input) -- [Select](../select) \ No newline at end of file +- [Select](../select) diff --git a/docs/components/radio/guide.md b/docs/components/radio/guide.md index 16bfe11ed..7008d0880 100644 --- a/docs/components/radio/guide.md +++ b/docs/components/radio/guide.md @@ -3,7 +3,7 @@ doc-type: 'tab-item' description: 'Usage guide for the ix-radio, ix-radio-group' formReady: true --- -# Radio - Usage +# Radio button - Usage Radio buttons are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices. @@ -18,9 +18,14 @@ Radio buttons are presented in groups to signify that only one selection is allo ## Options -- **Label:** See [form field](../forms-field). -- **Helper text**: See [form field](../forms-field). -- **Feedback text**: See [form field](../forms-field). +- **Radio button**: + - **Label**:** See [form field](../forms-field). +- **Radio button group**: + - **Label:** See [form field](../forms-field). + - **Helper text**: See [form field](../forms-field). + - **Show text as tooltip**: See [form field](../forms-field). + - **Required**: When enabled, users are required to select an option in a group. See [form field](../forms-field). + - **Direction**: Choose to align radio buttons vertically or horizontally. We typically use a horizontal layout for short labels with two to three options, and a vertical layout for more options to enhance readability. ## Behavior in context diff --git a/sidebars.ts b/sidebars.ts index 7355dd90b..1552d8776 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -702,7 +702,7 @@ const sidebars: SidebarsConfig = { }), createTabItem({ id: 'components/radio/index', - label: 'Radio', + label: 'Radio button', items: [ { id: 'components/radio/guide', From 2dc797c4d395f690762bcdf49c258a5150c33169 Mon Sep 17 00:00:00 2001 From: Kathrin Date: Wed, 20 May 2026 14:15:26 +0200 Subject: [PATCH 2/4] Update guide.md --- docs/components/radio/guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/radio/guide.md b/docs/components/radio/guide.md index 7008d0880..56124f330 100644 --- a/docs/components/radio/guide.md +++ b/docs/components/radio/guide.md @@ -21,7 +21,7 @@ Radio buttons are presented in groups to signify that only one selection is allo - **Radio button**: - **Label**:** See [form field](../forms-field). - **Radio button group**: - - **Label:** See [form field](../forms-field). + - **Label:** Use group labels if radio button labels are not self-explanatory and in context of forms. See [form field](../forms-field). - **Helper text**: See [form field](../forms-field). - **Show text as tooltip**: See [form field](../forms-field). - **Required**: When enabled, users are required to select an option in a group. See [form field](../forms-field). From c2f2338276dd2e60e17682a005f93793bbfa2dc4 Mon Sep 17 00:00:00 2001 From: Kathrin Date: Wed, 20 May 2026 14:23:50 +0200 Subject: [PATCH 3/4] incorporate feedback from gemini review --- docs/components/checkbox/guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/checkbox/guide.md b/docs/components/checkbox/guide.md index 3c37343bf..9d25e43ec 100644 --- a/docs/components/checkbox/guide.md +++ b/docs/components/checkbox/guide.md @@ -19,7 +19,7 @@ Checkboxes are commonly used when there are multiple options that can be selecte - **Checkbox**: - **Label:** See [form field](../forms-field). - - **Indeterminate:** 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. + - **Indeterminate:** Indicates that only some items in a checkbox group are selected. - **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. - **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). From 94f0487977277261e0d10ba95b1f2fccb052fef7 Mon Sep 17 00:00:00 2001 From: Kathrin <123640803+kathrinschalber@users.noreply.github.com> Date: Wed, 20 May 2026 14:24:28 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- docs/components/checkbox/guide.md | 2 +- docs/components/radio/guide.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/checkbox/guide.md b/docs/components/checkbox/guide.md index 9d25e43ec..c4bc11d41 100644 --- a/docs/components/checkbox/guide.md +++ b/docs/components/checkbox/guide.md @@ -20,7 +20,7 @@ Checkboxes are commonly used when there are multiple options that can be selecte - **Checkbox**: - **Label:** See [form field](../forms-field). - **Indeterminate:** Indicates that only some items in a checkbox group are selected. -- **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. +- **Checkbox 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). - **Show text as tooltip**: See [form field](../forms-field). diff --git a/docs/components/radio/guide.md b/docs/components/radio/guide.md index 56124f330..71a563677 100644 --- a/docs/components/radio/guide.md +++ b/docs/components/radio/guide.md @@ -19,7 +19,7 @@ Radio buttons are presented in groups to signify that only one selection is allo ## Options - **Radio button**: - - **Label**:** See [form field](../forms-field). + - **Label:** See [form field](../forms-field). - **Radio button group**: - **Label:** Use group labels if radio button labels are not self-explanatory and in context of forms. See [form field](../forms-field). - **Helper text**: See [form field](../forms-field).