diff --git a/docs/components/checkbox/guide.md b/docs/components/checkbox/guide.md index 5752c2372..c4bc11d41 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 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). +- **Checkbox**: + - **Label:** See [form field](../forms-field). + - **Indeterminate:** Indicates that only some items in a checkbox group are selected. +- **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). ## 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..71a563677 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:** 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). + - **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',