-
Notifications
You must be signed in to change notification settings - Fork 943
origin/radio_button_vika #1412
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
origin/radio_button_vika #1412
Changes from 6 commits
ce69252
ae32758
32b6168
92d74be
6518b9a
32931a1
1234bca
180b351
c2bdd30
b2a4b41
2bcb0e2
28330c7
7942cfd
df59bb9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,54 +10,72 @@ | |
|
||
</tldr> | ||
|
||
{width=213} | ||
{width=706} | ||
|
||
## When to use | ||
|
||
Use a radio button group to choose one option from 2 to 4 mutually exclusive options. | ||
|
||
Do **not** use radio buttons if: | ||
## When not to use | ||
|
||
* Several options in a group can be selected. Use a group of [checkboxes](checkbox.md) instead. | ||
* There are only 2 opposite yes/no options. Use a checkbox instead. | ||
### Several options in a group can be selected | ||
Use a group of [checkboxes](checkbox.md) instead. | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
{width=427} | ||
### Binary Yes/No Options | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
For only two opposing yes/no options, use a checkbox instead. | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
* There are 5 and more options that can be charted on an axis, e.g., time delay. Use a slider instead. | ||
<table style="none" border="false"> | ||
<tr> | ||
<td width="50%"> | ||
<format color="Green" style="bold">Correct</format><img src="02_When_to_use_correct.png" alt="A correct example of using a checkbox instead of radiobuttons"/> | ||
</td> | ||
<td width="50%"> | ||
<format color="Red" style="bold">Incorrect</format><img src="02_When_to_use_incorrect.png" alt="An incorrect example of using radiobuttons instead of a checkbox"/> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
* There are 5 and more options. Use a [drop-down list](drop_down.md): | ||
### 5 and more options | ||
If the options have short labels, use a segmented button. Or, if the options can be represented on an axis, such as a time delay, use a slider instead. | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<table> | ||
<tr> | ||
<td width="40%"><format color="Red" style="bold">Incorrect</format></td> | ||
<td width="60%"><format color="Green" style="bold">Correct</format></td> | ||
</tr> | ||
<tr> | ||
<td><img src="dropdown_incorrect.png" alt="" width="189" /></td> | ||
<td><img src="dropdown_correct.png" alt="" width="351" /></td> | ||
</tr> | ||
</table> | ||
{width=706} | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Consider using a [drop-down list](drop_down.md) if: | ||
For other cases with 5 or more options use a [drop-down list](drop_down.md): | ||
|
||
<table style="none" border="false"> | ||
<tr> | ||
<td width="50%"> | ||
<format color="Green" style="bold">Correct</format><img src="04_When_to_use_correct.png" alt="A correct example of using a drop-down list instead of radiobuttons"/> | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</td> | ||
<td width="50%"> | ||
<format color="Red" style="bold">Incorrect</format><img src="04_When_to_use_incorrect.png" alt="An incorrect example of using radiobuttons for a list of 5 or more options"/> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
### Use dropdown | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Consider using a [drop-down list](drop_down.md) if: | ||
* The screen space is limited. | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
* The option might be used less often than other options on the screen. | ||
* There are other drop-down lists in the same group of UI components. A radio button group is more noticeable than a drop-down list, so it will look like a more important setting. | ||
* There is a combination of several UI components for one setting: | ||
{width=575} | ||
{width=706} | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
*The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.* | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## How to use | ||
|
||
### Label | ||
|
||
A label accompanies each checkbox and is placed next to it. | ||
|
||
{width=197} | ||
|
||
If a label is long, split it into two lines. Avoid labels that take more than two lines. See recommendations on writing concise labels below. | ||
|
||
{width=195} | ||
<table style="none" border="false" column-width="fixed"> | ||
<tr> | ||
<td><img src="06_How_to_use.png" alt="Label example" width="378"/></td> | ||
<td><p>A label accompanies each checkbox and is placed next to it.</p></td> | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</tr> | ||
<tr> | ||
<td><img src="07_How_to_use.png" alt="An example of a label spanning two lines." width="378"/></td> | ||
<td><p>If a label is long, split it into two lines. Avoid labels that take more than two lines. See recommendations on writing concise labels below.</p></td> | ||
</tr> | ||
</table> | ||
|
||
To implement this, use HTML formatting: | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<tabs group="languages"> | ||
|
@@ -89,19 +107,22 @@ Use the imperative form of verbs. | |
|
||
Do not use negation in labels as it complicates understanding. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This shouldn't be a bullet list according to how we write articles now. See how the same section is structured in the Button article There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What do you think if I add all the wrong things in one image? I think it’s quite possible. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like one pic. Possibly two pics could be shown side by side? Also, I see I wrote about a bullet list — scratch that, please make a bullet list, Marianna made it in https://plugins.jetbrains.com/docs/intellij/inline-help-text.html#writing_guidelines, looks fine. |
||
|
||
<format color="Red" style="bold">Incorrect</format> | ||
|
||
{width=264} | ||
|
||
<format color="Green" style="bold">Correct</format> | ||
|
||
{width=139} | ||
<table style="none" border="false"> | ||
<tr> | ||
<td width="50%"> | ||
<format color="Green" style="bold">Correct</format><img src="08_How_to_use_correct.png" alt="A correct example of label"/> | ||
</td> | ||
<td width="50%"> | ||
<format color="Red" style="bold">Incorrect</format><img src="08_How_to_use_incorrect.png" alt="An incorrect example of label"/> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
Make labels short and intelligible — see [Writing short and clear text](writing_short.md). | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Group label | ||
|
||
{width=267} | ||
{width=706} | ||
|
||
Always start a radio button group with a group label. It explains what the options are for. | ||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
WildSeaTurtle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
Uh oh!
There was an error while loading. Please reload this page.