diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 96e6db21eaf..7154b02c8d8 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -101,7 +101,7 @@
           </compositeBuild>
         </compositeConfiguration>
         <option name="externalProjectPath" value="$PROJECT_DIR$/code_samples/_gradleCompositeBuild" />
-        <option name="gradleJvm" value="17" />
+        <option name="gradleJvm" value="corretto-17" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$/code_samples/_gradleCompositeBuild" />
diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml
new file mode 100644
index 00000000000..125a7e07695
--- /dev/null
+++ b/.idea/kotlinc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="KotlinJpsPluginSettings">
+    <option name="version" value="1.9.25" />
+  </component>
+</project>
diff --git a/images/ui/radiobutton/01_Radio Button.png b/images/ui/radiobutton/01_Radio Button.png
new file mode 100644
index 00000000000..4bcaf3a12ff
Binary files /dev/null and b/images/ui/radiobutton/01_Radio Button.png differ
diff --git a/images/ui/radiobutton/01_Radio Button_dark.png b/images/ui/radiobutton/01_Radio Button_dark.png
new file mode 100644
index 00000000000..b1e1896b70a
Binary files /dev/null and b/images/ui/radiobutton/01_Radio Button_dark.png differ
diff --git a/images/ui/radiobutton/02_When_to_use_correct.png b/images/ui/radiobutton/02_When_to_use_correct.png
new file mode 100644
index 00000000000..10a27ea62d2
Binary files /dev/null and b/images/ui/radiobutton/02_When_to_use_correct.png differ
diff --git a/images/ui/radiobutton/02_When_to_use_correct_dark.png b/images/ui/radiobutton/02_When_to_use_correct_dark.png
new file mode 100644
index 00000000000..53f15887931
Binary files /dev/null and b/images/ui/radiobutton/02_When_to_use_correct_dark.png differ
diff --git a/images/ui/radiobutton/02_When_to_use_incorrect.png b/images/ui/radiobutton/02_When_to_use_incorrect.png
new file mode 100644
index 00000000000..cc22689987f
Binary files /dev/null and b/images/ui/radiobutton/02_When_to_use_incorrect.png differ
diff --git a/images/ui/radiobutton/02_When_to_use_incorrect_dark.png b/images/ui/radiobutton/02_When_to_use_incorrect_dark.png
new file mode 100644
index 00000000000..5c13300f5be
Binary files /dev/null and b/images/ui/radiobutton/02_When_to_use_incorrect_dark.png differ
diff --git a/images/ui/radiobutton/03_When_to_use_Segmented_button.png b/images/ui/radiobutton/03_When_to_use_Segmented_button.png
new file mode 100644
index 00000000000..690d3bd4787
Binary files /dev/null and b/images/ui/radiobutton/03_When_to_use_Segmented_button.png differ
diff --git a/images/ui/radiobutton/03_When_to_use_Segmented_button_dark.png b/images/ui/radiobutton/03_When_to_use_Segmented_button_dark.png
new file mode 100644
index 00000000000..485b137f882
Binary files /dev/null and b/images/ui/radiobutton/03_When_to_use_Segmented_button_dark.png differ
diff --git a/images/ui/radiobutton/04_When_to_use_correct.png b/images/ui/radiobutton/04_When_to_use_correct.png
new file mode 100644
index 00000000000..8a4cfb28a33
Binary files /dev/null and b/images/ui/radiobutton/04_When_to_use_correct.png differ
diff --git a/images/ui/radiobutton/04_When_to_use_correct_dark.png b/images/ui/radiobutton/04_When_to_use_correct_dark.png
new file mode 100644
index 00000000000..18b8a7fe3b9
Binary files /dev/null and b/images/ui/radiobutton/04_When_to_use_correct_dark.png differ
diff --git a/images/ui/radiobutton/04_When_to_use_incorrect.png b/images/ui/radiobutton/04_When_to_use_incorrect.png
new file mode 100644
index 00000000000..be1c37370d8
Binary files /dev/null and b/images/ui/radiobutton/04_When_to_use_incorrect.png differ
diff --git a/images/ui/radiobutton/04_When_to_use_incorrect_dark.png b/images/ui/radiobutton/04_When_to_use_incorrect_dark.png
new file mode 100644
index 00000000000..148824c1c76
Binary files /dev/null and b/images/ui/radiobutton/04_When_to_use_incorrect_dark.png differ
diff --git a/images/ui/radiobutton/05_When_to_use_Segmented_button.png b/images/ui/radiobutton/05_When_to_use_Segmented_button.png
new file mode 100644
index 00000000000..a9eb910d42a
Binary files /dev/null and b/images/ui/radiobutton/05_When_to_use_Segmented_button.png differ
diff --git a/images/ui/radiobutton/05_When_to_use_Segmented_button_dark.png b/images/ui/radiobutton/05_When_to_use_Segmented_button_dark.png
new file mode 100644
index 00000000000..fd67195088f
Binary files /dev/null and b/images/ui/radiobutton/05_When_to_use_Segmented_button_dark.png differ
diff --git a/images/ui/radiobutton/06_How_to_use.png b/images/ui/radiobutton/06_How_to_use.png
new file mode 100644
index 00000000000..6b8df1fb3b6
Binary files /dev/null and b/images/ui/radiobutton/06_How_to_use.png differ
diff --git a/images/ui/radiobutton/06_How_to_use_dark.png b/images/ui/radiobutton/06_How_to_use_dark.png
new file mode 100644
index 00000000000..ac931449d18
Binary files /dev/null and b/images/ui/radiobutton/06_How_to_use_dark.png differ
diff --git a/images/ui/radiobutton/07_How_to_use.png b/images/ui/radiobutton/07_How_to_use.png
new file mode 100644
index 00000000000..031edb1204c
Binary files /dev/null and b/images/ui/radiobutton/07_How_to_use.png differ
diff --git a/images/ui/radiobutton/07_How_to_use_dark.png b/images/ui/radiobutton/07_How_to_use_dark.png
new file mode 100644
index 00000000000..c7a11b00785
Binary files /dev/null and b/images/ui/radiobutton/07_How_to_use_dark.png differ
diff --git a/images/ui/radiobutton/08_How_to_use_correct.png b/images/ui/radiobutton/08_How_to_use_correct.png
new file mode 100644
index 00000000000..3a94fe938c4
Binary files /dev/null and b/images/ui/radiobutton/08_How_to_use_correct.png differ
diff --git a/images/ui/radiobutton/08_How_to_use_correct_dark.png b/images/ui/radiobutton/08_How_to_use_correct_dark.png
new file mode 100644
index 00000000000..bca73411038
Binary files /dev/null and b/images/ui/radiobutton/08_How_to_use_correct_dark.png differ
diff --git a/images/ui/radiobutton/08_How_to_use_incorrect.png b/images/ui/radiobutton/08_How_to_use_incorrect.png
new file mode 100644
index 00000000000..6ee2a4fe632
Binary files /dev/null and b/images/ui/radiobutton/08_How_to_use_incorrect.png differ
diff --git a/images/ui/radiobutton/08_How_to_use_incorrect_dark.png b/images/ui/radiobutton/08_How_to_use_incorrect_dark.png
new file mode 100644
index 00000000000..59741c5537b
Binary files /dev/null and b/images/ui/radiobutton/08_How_to_use_incorrect_dark.png differ
diff --git a/images/ui/radiobutton/09_How_to_use.png b/images/ui/radiobutton/09_How_to_use.png
new file mode 100644
index 00000000000..7ecaae1b144
Binary files /dev/null and b/images/ui/radiobutton/09_How_to_use.png differ
diff --git a/images/ui/radiobutton/09_How_to_use_dark.png b/images/ui/radiobutton/09_How_to_use_dark.png
new file mode 100644
index 00000000000..cf832c6c478
Binary files /dev/null and b/images/ui/radiobutton/09_How_to_use_dark.png differ
diff --git a/images/ui/radiobutton/10_How_to_use.png b/images/ui/radiobutton/10_How_to_use.png
new file mode 100644
index 00000000000..d5d3ca0aaf9
Binary files /dev/null and b/images/ui/radiobutton/10_How_to_use.png differ
diff --git a/images/ui/radiobutton/10_How_to_use_dark.png b/images/ui/radiobutton/10_How_to_use_dark.png
new file mode 100644
index 00000000000..1cf8697f9ce
Binary files /dev/null and b/images/ui/radiobutton/10_How_to_use_dark.png differ
diff --git a/images/ui/radiobutton/answeryes_correct.png b/images/ui/radiobutton/answeryes_correct.png
deleted file mode 100644
index 1b85ecb7364..00000000000
Binary files a/images/ui/radiobutton/answeryes_correct.png and /dev/null differ
diff --git a/images/ui/radiobutton/answeryes_incorrect.png b/images/ui/radiobutton/answeryes_incorrect.png
deleted file mode 100644
index 7d3bfaa8fce..00000000000
Binary files a/images/ui/radiobutton/answeryes_incorrect.png and /dev/null differ
diff --git a/images/ui/radiobutton/dropdown.png b/images/ui/radiobutton/dropdown.png
deleted file mode 100644
index e0f8d42bd50..00000000000
Binary files a/images/ui/radiobutton/dropdown.png and /dev/null differ
diff --git a/images/ui/radiobutton/dropdown_correct.png b/images/ui/radiobutton/dropdown_correct.png
deleted file mode 100644
index e400d768c4d..00000000000
Binary files a/images/ui/radiobutton/dropdown_correct.png and /dev/null differ
diff --git a/images/ui/radiobutton/dropdown_incorrect.png b/images/ui/radiobutton/dropdown_incorrect.png
deleted file mode 100644
index 41dcca85839..00000000000
Binary files a/images/ui/radiobutton/dropdown_incorrect.png and /dev/null differ
diff --git a/images/ui/radiobutton/grouplabel.png b/images/ui/radiobutton/grouplabel.png
deleted file mode 100644
index 48afd5a8b1f..00000000000
Binary files a/images/ui/radiobutton/grouplabel.png and /dev/null differ
diff --git a/images/ui/radiobutton/old/answeryes_correct.png b/images/ui/radiobutton/old/answeryes_correct.png
new file mode 100644
index 00000000000..71256b44ff5
Binary files /dev/null and b/images/ui/radiobutton/old/answeryes_correct.png differ
diff --git a/images/ui/radiobutton/old/answeryes_incorrect.png b/images/ui/radiobutton/old/answeryes_incorrect.png
new file mode 100644
index 00000000000..aa9b31a3cc9
Binary files /dev/null and b/images/ui/radiobutton/old/answeryes_incorrect.png differ
diff --git a/images/ui/radiobutton/old/dropdown.png b/images/ui/radiobutton/old/dropdown.png
new file mode 100644
index 00000000000..d525474dc12
Binary files /dev/null and b/images/ui/radiobutton/old/dropdown.png differ
diff --git a/images/ui/radiobutton/old/dropdown_correct.png b/images/ui/radiobutton/old/dropdown_correct.png
new file mode 100644
index 00000000000..5efd3344e50
Binary files /dev/null and b/images/ui/radiobutton/old/dropdown_correct.png differ
diff --git a/images/ui/radiobutton/old/dropdown_incorrect.png b/images/ui/radiobutton/old/dropdown_incorrect.png
new file mode 100644
index 00000000000..c766c2cc6a4
Binary files /dev/null and b/images/ui/radiobutton/old/dropdown_incorrect.png differ
diff --git a/images/ui/radiobutton/old/grouplabel.png b/images/ui/radiobutton/old/grouplabel.png
new file mode 100644
index 00000000000..61437d1484c
Binary files /dev/null and b/images/ui/radiobutton/old/grouplabel.png differ
diff --git a/images/ui/radiobutton/old/radio-darcula.png b/images/ui/radiobutton/old/radio-darcula.png
new file mode 100644
index 00000000000..e560edc57b7
Binary files /dev/null and b/images/ui/radiobutton/old/radio-darcula.png differ
diff --git a/images/ui/radiobutton/old/radio-intellij.png b/images/ui/radiobutton/old/radio-intellij.png
new file mode 100644
index 00000000000..a1c26b61430
Binary files /dev/null and b/images/ui/radiobutton/old/radio-intellij.png differ
diff --git a/images/ui/radiobutton/old/radio-macos.png b/images/ui/radiobutton/old/radio-macos.png
new file mode 100644
index 00000000000..4ed2e7693a9
Binary files /dev/null and b/images/ui/radiobutton/old/radio-macos.png differ
diff --git a/images/ui/radiobutton/old/radio-windows.png b/images/ui/radiobutton/old/radio-windows.png
new file mode 100644
index 00000000000..e390f4a1223
Binary files /dev/null and b/images/ui/radiobutton/old/radio-windows.png differ
diff --git a/images/ui/radiobutton/old/radio_example.png b/images/ui/radiobutton/old/radio_example.png
new file mode 100644
index 00000000000..2daa5e02d99
Binary files /dev/null and b/images/ui/radiobutton/old/radio_example.png differ
diff --git a/images/ui/radiobutton/old/radiobutton_label.png b/images/ui/radiobutton/old/radiobutton_label.png
new file mode 100644
index 00000000000..f345fbb4740
Binary files /dev/null and b/images/ui/radiobutton/old/radiobutton_label.png differ
diff --git a/images/ui/radiobutton/old/twoline_label.png b/images/ui/radiobutton/old/twoline_label.png
new file mode 100644
index 00000000000..270c33ff57c
Binary files /dev/null and b/images/ui/radiobutton/old/twoline_label.png differ
diff --git a/images/ui/radiobutton/old/tworadio_checkbox.png b/images/ui/radiobutton/old/tworadio_checkbox.png
new file mode 100644
index 00000000000..3d9c4bd9e57
Binary files /dev/null and b/images/ui/radiobutton/old/tworadio_checkbox.png differ
diff --git a/images/ui/radiobutton/radio-darcula.png b/images/ui/radiobutton/radio-darcula.png
deleted file mode 100644
index e73d8d2fea7..00000000000
Binary files a/images/ui/radiobutton/radio-darcula.png and /dev/null differ
diff --git a/images/ui/radiobutton/radio-intellij.png b/images/ui/radiobutton/radio-intellij.png
deleted file mode 100644
index 0aa50bb9c6a..00000000000
Binary files a/images/ui/radiobutton/radio-intellij.png and /dev/null differ
diff --git a/images/ui/radiobutton/radio-macos.png b/images/ui/radiobutton/radio-macos.png
deleted file mode 100644
index 93bdf4ede98..00000000000
Binary files a/images/ui/radiobutton/radio-macos.png and /dev/null differ
diff --git a/images/ui/radiobutton/radio-windows.png b/images/ui/radiobutton/radio-windows.png
deleted file mode 100644
index 72fb5bca915..00000000000
Binary files a/images/ui/radiobutton/radio-windows.png and /dev/null differ
diff --git a/images/ui/radiobutton/radio_example.png b/images/ui/radiobutton/radio_example.png
deleted file mode 100644
index 07bd41dfb0a..00000000000
Binary files a/images/ui/radiobutton/radio_example.png and /dev/null differ
diff --git a/images/ui/radiobutton/radiobutton_label.png b/images/ui/radiobutton/radiobutton_label.png
deleted file mode 100644
index 7a66e1bdef7..00000000000
Binary files a/images/ui/radiobutton/radiobutton_label.png and /dev/null differ
diff --git a/images/ui/radiobutton/twoline_label.png b/images/ui/radiobutton/twoline_label.png
deleted file mode 100644
index 3311251d149..00000000000
Binary files a/images/ui/radiobutton/twoline_label.png and /dev/null differ
diff --git a/images/ui/radiobutton/tworadio_checkbox.png b/images/ui/radiobutton/tworadio_checkbox.png
deleted file mode 100644
index 65a511016ea..00000000000
Binary files a/images/ui/radiobutton/tworadio_checkbox.png and /dev/null differ
diff --git a/topics/ui/controls/radio_button.md b/topics/ui/controls/radio_button.md
index 9e7dedfc875..534dc587360 100644
--- a/topics/ui/controls/radio_button.md
+++ b/topics/ui/controls/radio_button.md
@@ -10,107 +10,118 @@
 
 </tldr>
 
-![](radio_example.png){width=213}
+![](01_Radio Button.png){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 can be selected
+Use a group of [checkboxes](checkbox.md) when several options can be selected.
 
-![](tworadio_checkbox.png){width=427}
+### Yes or No Options
+For only two opposing yes/no options, use a checkbox.
 
-* 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="378px">
+      <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="378px">
+      <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):
+### 2-5 options with short labels
+If the options have short labels, use a segmented button.
+
+![](03_When_to_use_Segmented_button.png){width=706}
 
-  <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>
 
+## When to use a drop-down instead
 Consider using a [drop-down list](drop_down.md) if:
+* There are more than 5 options or the options have long labels:
+<table style="none" border="false">
+  <tr>
+    <td width="378">
+      <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"/>
+    </td>
+    <td width="378">
+      <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>
 
 * 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:
-  ![](dropdown.png){width=575}
-  *The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.*
+* The setting combines several UI components into one control:
+  ![](05_When_to_use_Segmented_button.png){width=706}
 
 ## How to use
 
 ### Label
 
-A label accompanies each checkbox and is placed next to it.
-
-![](radiobutton_label.png){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.
-
-![](twoline_label.png){width=195}
-
-To implement this, use HTML formatting:
-<tabs group="languages">
-<tab title="Kotlin UI DSL" group-key="kotlin">
-
-```kotlin
-radioButton(
-    "<html>Show options before adding<br>to version control</html>")
-```
-
-</tab>
-<tab title="Java" group-key="java">
-
-```java
-new JRadioButton(
-    "<html>Show options before adding<br>to version control</html>");
-```
-
-</tab>
-</tabs>
+<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 radio button and is placed next to it.</p></td>
+    </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>
+
+<chapter title="Implementation" collapsible="true">
+  <tabs group="languages">
+  <tab title="Kotlin UI DSL" group-key="kotlin">
+
+  ```kotlin
+  radioButton(
+      "<html>Show options before adding<br>to version control</html>")
+  ```
+
+  </tab>
+  <tab title="Java" group-key="java">
+
+  ```java
+  new JRadioButton(
+      "<html>Show options before adding<br>to version control</html>");
+  ```
+
+  </tab>
+  </tabs>
+</chapter>
 
 ### 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.
-
-<format color="Red" style="bold">Incorrect</format>
+* 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.
+* Make labels short and intelligible — see [Writing short and clear text](writing_short.md).
 
-![](answeryes_incorrect.png){width=264}
+<format color="369650" style="bold">Correct</format>
+![](08_How_to_use_correct.png){width=706}
 
-<format color="Green" style="bold">Correct</format>
+ <format color="E55765" style="bold">Incorrect</format>
+![](08_How_to_use_incorrect.png){width=706}
 
-![](answeryes_correct.png){width=139}
-
-Make labels short and intelligible — see [Writing short and clear text](writing_short.md).
 
 ### Group label
-
-![](grouplabel.png){width=267}
-
 Always start a radio button group with a group label. It explains what the options are for.
+Use a colon at the end of a group label.
+![](10_How_to_use.png){width=706}
 
 Use a checkbox or another radio button as a group label if the radio button group needs to be turned on or off.
+![](09_How_to_use.png){width=706}
 
-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](layout.md#dependent-controls).
-Otherwise, follow the rules for [independent colors](layout.md).
+Follow the layout of [checkboxes and radio-buttons](layout.md#checkboxes-and-radio-buttons)