Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions docs/components/checkbox/guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
3 changes: 1 addition & 2 deletions docs/components/input-number/guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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)
- [Select](../select)
13 changes: 9 additions & 4 deletions docs/components/radio/guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion sidebars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -702,7 +702,7 @@ const sidebars: SidebarsConfig = {
}),
createTabItem({
id: 'components/radio/index',
label: 'Radio',
label: 'Radio button',
items: [
{
id: 'components/radio/guide',
Expand Down
Loading