d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
3.4 KiB
Radio Button
UI guidelines on using radio buttons.
Implementation: JBRadioButton
{width=213}
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:
- Several options in a group can be selected. Use a group of checkboxes instead.
- There are only 2 opposite yes/no options. Use a checkbox instead.
{width=427}
-
There are 5 and more options that can be charted on an axis, e.g., time delay. Use a slider instead.
-
There are 5 and more options. Use a drop-down list:
Incorrect Correct 
{width="189"}
{width="351"}
Consider using a drop-down list if:
- The screen space is limited.
- 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}
The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.
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}
To implement this, use HTML formatting:
radioButton(
"<html>Show options before adding<br>to version control</html>")
new JRadioButton(
"<html>Show options before adding<br>to version control</html>");
Writing guidelines
Use sentence-style capitalization.
Do not use ending punctuation.
Use the imperative form of verbs.
Do not use negation in labels as it complicates understanding.
Incorrect
{width=264}
Correct
{width=139}
Make labels short and intelligible — see Writing short and clear text.
Group label
{width=267}
Always start a radio button group with a group label. It explains what the options are for.
Use a checkbox or another radio button as a group label if the radio button group needs to be turned on or off.
Use a colon at the end of a group label.
Sizes and placement
If a radio button group depends on another control, e.g., a checkbox, follow the rules for dependent colors. Otherwise, follow the rules for independent colors.