JetBrains · eldar-jetbrains · Jun 17, 2025 · Jun 18, 2025 · Jun 18, 2025 · Jun 19, 2025
diff --git a/images/ui/input_field/completion_tooltip.png b/images/ui/input_field/completion_tooltip.png
diff --git a/images/ui/input_field/expandable_1.png b/images/ui/input_field/expandable_1.png
diff --git a/images/ui/input_field/expandable_2.png b/images/ui/input_field/expandable_2.png
diff --git a/images/ui/input_field/fields_line.png b/images/ui/input_field/fields_line.png
diff --git a/images/ui/input_field/fields_stack.png b/images/ui/input_field/fields_stack.png
diff --git a/images/ui/input_field/fields_stack_alignment.png b/images/ui/input_field/fields_stack_alignment.png
diff --git a/images/ui/input_field/fields_stack_alignment_groups.png b/images/ui/input_field/fields_stack_alignment_groups.png
diff --git a/images/ui/input_field/focus_all.png b/images/ui/input_field/focus_all.png
diff --git a/images/ui/input_field/focus_end.png b/images/ui/input_field/focus_end.png
diff --git a/images/ui/input_field/input.png b/images/ui/input_field/input.png
diff --git a/images/ui/input_field/input_colour_box.png b/images/ui/input_field/input_colour_box.png
diff --git a/images/ui/input_field/input_colour_box_dark.png b/images/ui/input_field/input_colour_box_dark.png
diff --git a/images/ui/input_field/input_completion.png b/images/ui/input_field/input_completion.png
diff --git a/images/ui/input_field/input_completion_dark.png b/images/ui/input_field/input_completion_dark.png
diff --git a/images/ui/input_field/input_completion_tooltip.png b/images/ui/input_field/input_completion_tooltip.png
diff --git a/images/ui/input_field/input_completion_tooltip_dark.png b/images/ui/input_field/input_completion_tooltip_dark.png
diff --git a/images/ui/input_field/input_dark.png b/images/ui/input_field/input_dark.png
diff --git a/images/ui/input_field/input_date_picker.png b/images/ui/input_field/input_date_picker.png
diff --git a/images/ui/input_field/input_date_picker_dark.png b/images/ui/input_field/input_date_picker_dark.png
diff --git a/images/ui/input_field/input_disabled.png b/images/ui/input_field/input_disabled.png
diff --git a/images/ui/input_field/input_disabled_dark.png b/images/ui/input_field/input_disabled_dark.png
diff --git a/images/ui/input_field/input_field_completion.png b/images/ui/input_field/input_field_completion.png
diff --git a/images/ui/input_field/input_field_error.png b/images/ui/input_field/input_field_error.png
diff --git a/images/ui/input_field/input_field_example.png b/images/ui/input_field/input_field_example.png
diff --git a/images/ui/input_field/input_field_label_left.png b/images/ui/input_field/input_field_label_left.png
diff --git a/images/ui/input_field/input_field_size_1.png b/images/ui/input_field/input_field_size_1.png
diff --git a/images/ui/input_field/input_field_size_2.png b/images/ui/input_field/input_field_size_2.png
diff --git a/images/ui/input_field/input_field_size_3.png b/images/ui/input_field/input_field_size_3.png
diff --git a/images/ui/input_field/input_field_size_4.png b/images/ui/input_field/input_field_size_4.png
diff --git a/images/ui/input_field/input_field_sizes.png b/images/ui/input_field/input_field_sizes.png
diff --git a/images/ui/input_field/input_focus.png b/images/ui/input_field/input_focus.png
diff --git a/images/ui/input_field/input_focus_dark.png b/images/ui/input_field/input_focus_dark.png
diff --git a/images/ui/input_field/input_focus_selection.png b/images/ui/input_field/input_focus_selection.png
diff --git a/images/ui/input_field/input_focus_selection_dark.png b/images/ui/input_field/input_focus_selection_dark.png
diff --git a/images/ui/input_field/input_label_1_correct.png b/images/ui/input_field/input_label_1_correct.png
diff --git a/images/ui/input_field/input_label_1_correct_dark.png b/images/ui/input_field/input_label_1_correct_dark.png
diff --git a/images/ui/input_field/input_label_1_incorrect.png b/images/ui/input_field/input_label_1_incorrect.png
diff --git a/images/ui/input_field/input_label_1_incorrect_dark.png b/images/ui/input_field/input_label_1_incorrect_dark.png
diff --git a/images/ui/input_field/input_label_2_correct.png b/images/ui/input_field/input_label_2_correct.png
diff --git a/images/ui/input_field/input_label_2_correct_dark.png b/images/ui/input_field/input_label_2_correct_dark.png
diff --git a/images/ui/input_field/input_label_2_incorrect.png b/images/ui/input_field/input_label_2_incorrect.png
diff --git a/images/ui/input_field/input_label_2_incorrect_dark.png b/images/ui/input_field/input_label_2_incorrect_dark.png
diff --git a/images/ui/input_field/input_label_3_correct.png b/images/ui/input_field/input_label_3_correct.png
diff --git a/images/ui/input_field/input_label_3_correct_dark.png b/images/ui/input_field/input_label_3_correct_dark.png
diff --git a/images/ui/input_field/input_label_3_incorrect.png b/images/ui/input_field/input_label_3_incorrect.png
diff --git a/images/ui/input_field/input_label_3_incorrect_dark.png b/images/ui/input_field/input_label_3_incorrect_dark.png
diff --git a/images/ui/input_field/input_label_selected.png b/images/ui/input_field/input_label_selected.png
diff --git a/images/ui/input_field/input_label_selected_dark.png b/images/ui/input_field/input_label_selected_dark.png
diff --git a/images/ui/input_field/input_password.png b/images/ui/input_field/input_password.png
diff --git a/images/ui/input_field/input_password_dark.png b/images/ui/input_field/input_password_dark.png
diff --git a/images/ui/input_field/input_placeholder_default.png b/images/ui/input_field/input_placeholder_default.png
diff --git a/images/ui/input_field/input_placeholder_default_dark.png b/images/ui/input_field/input_placeholder_default_dark.png
diff --git a/images/ui/input_field/input_placeholder_default_reset.png b/images/ui/input_field/input_placeholder_default_reset.png
diff --git a/images/ui/input_field/input_placeholder_default_reset_dark.png b/images/ui/input_field/input_placeholder_default_reset_dark.png
diff --git a/images/ui/input_field/input_placeholder_example_correct.png b/images/ui/input_field/input_placeholder_example_correct.png
diff --git a/images/ui/input_field/input_placeholder_example_correct_dark.png b/images/ui/input_field/input_placeholder_example_correct_dark.png
diff --git a/images/ui/input_field/input_placeholder_example_incorrect.png b/images/ui/input_field/input_placeholder_example_incorrect.png
diff --git a/images/ui/input_field/input_placeholder_example_incorrect_dark.png b/images/ui/input_field/input_placeholder_example_incorrect_dark.png
diff --git a/images/ui/input_field/input_placeholder_label_correct.png b/images/ui/input_field/input_placeholder_label_correct.png
diff --git a/images/ui/input_field/input_placeholder_label_correct_dark.png b/images/ui/input_field/input_placeholder_label_correct_dark.png
diff --git a/images/ui/input_field/input_placeholder_label_incorrect.png b/images/ui/input_field/input_placeholder_label_incorrect.png
diff --git a/images/ui/input_field/input_placeholder_label_incorrect_dark.png b/images/ui/input_field/input_placeholder_label_incorrect_dark.png
diff --git a/images/ui/input_field/input_placeholder_optional.png b/images/ui/input_field/input_placeholder_optional.png
diff --git a/images/ui/input_field/input_placeholder_optional_dark.png b/images/ui/input_field/input_placeholder_optional_dark.png
diff --git a/images/ui/input_field/input_positioning_label_1.png b/images/ui/input_field/input_positioning_label_1.png
diff --git a/images/ui/input_field/input_positioning_label_1_dark.png b/images/ui/input_field/input_positioning_label_1_dark.png
diff --git a/images/ui/input_field/input_positioning_label_2.png b/images/ui/input_field/input_positioning_label_2.png
diff --git a/images/ui/input_field/input_positioning_label_2_dark.png b/images/ui/input_field/input_positioning_label_2_dark.png
diff --git a/images/ui/input_field/input_prefilled.png b/images/ui/input_field/input_prefilled.png
diff --git a/images/ui/input_field/input_prefilled_dark.png b/images/ui/input_field/input_prefilled_dark.png
diff --git a/images/ui/input_field/input_prefilled_unnamed.png b/images/ui/input_field/input_prefilled_unnamed.png
diff --git a/images/ui/input_field/input_prefilled_unnamed_correct.png b/images/ui/input_field/input_prefilled_unnamed_correct.png
diff --git a/images/ui/input_field/input_prefilled_unnamed_correct_dark.png b/images/ui/input_field/input_prefilled_unnamed_correct_dark.png
diff --git a/images/ui/input_field/input_prefilled_unnamed_dark.png b/images/ui/input_field/input_prefilled_unnamed_dark.png
diff --git a/images/ui/input_field/input_prefilled_unnamed_incorrect.png b/images/ui/input_field/input_prefilled_unnamed_incorrect.png
diff --git a/images/ui/input_field/input_prefilled_unnamed_incorrect_dark.png b/images/ui/input_field/input_prefilled_unnamed_incorrect_dark.png
diff --git a/images/ui/input_field/input_search.png b/images/ui/input_field/input_search.png
diff --git a/images/ui/input_field/input_search_dark.png b/images/ui/input_field/input_search_dark.png
diff --git a/images/ui/input_field/input_text_area.png b/images/ui/input_field/input_text_area.png
diff --git a/images/ui/input_field/input_text_area_dark.png b/images/ui/input_field/input_text_area_dark.png
diff --git a/images/ui/input_field/input_text_input_expand.png b/images/ui/input_field/input_text_input_expand.png
diff --git a/images/ui/input_field/input_text_input_expand_dark.png b/images/ui/input_field/input_text_input_expand_dark.png
diff --git a/images/ui/input_field/input_validation.png b/images/ui/input_field/input_validation.png
diff --git a/images/ui/input_field/input_validation_dark.png b/images/ui/input_field/input_validation_dark.png
diff --git a/images/ui/input_field/input_when_to.png b/images/ui/input_field/input_when_to.png
diff --git a/images/ui/input_field/input_when_to_correct.png b/images/ui/input_field/input_when_to_correct.png
diff --git a/images/ui/input_field/input_when_to_correct_dark.png b/images/ui/input_field/input_when_to_correct_dark.png
diff --git a/images/ui/input_field/input_when_to_dark.png b/images/ui/input_field/input_when_to_dark.png
diff --git a/images/ui/input_field/input_when_to_incorrect.png b/images/ui/input_field/input_when_to_incorrect.png
diff --git a/images/ui/input_field/input_when_to_incorrect_dark.png b/images/ui/input_field/input_when_to_incorrect_dark.png
diff --git a/images/ui/input_field/input_width_1_correct.png b/images/ui/input_field/input_width_1_correct.png
diff --git a/images/ui/input_field/input_width_1_correct_dark.png b/images/ui/input_field/input_width_1_correct_dark.png
diff --git a/images/ui/input_field/input_width_1_incorrect.png b/images/ui/input_field/input_width_1_incorrect.png
diff --git a/images/ui/input_field/input_width_1_incorrect_dark.png b/images/ui/input_field/input_width_1_incorrect_dark.png
diff --git a/images/ui/input_field/input_width_2.png b/images/ui/input_field/input_width_2.png
diff --git a/images/ui/input_field/input_width_2_dark.png b/images/ui/input_field/input_width_2_dark.png
diff --git a/images/ui/input_field/label_disabled.png b/images/ui/input_field/label_disabled.png
diff --git a/images/ui/input_field/label_noun.png b/images/ui/input_field/label_noun.png
diff --git a/images/ui/input_field/label_sentence.png b/images/ui/input_field/label_sentence.png
diff --git a/images/ui/input_field/label_top.png b/images/ui/input_field/label_top.png
diff --git a/images/ui/input_field/password.png b/images/ui/input_field/password.png
diff --git a/images/ui/input_field/placeholder_default.png b/images/ui/input_field/placeholder_default.png
diff --git a/images/ui/input_field/placeholder_examples.png b/images/ui/input_field/placeholder_examples.png
diff --git a/images/ui/input_field/placeholder_examples_1.png b/images/ui/input_field/placeholder_examples_1.png
diff --git a/images/ui/input_field/placeholder_label.png b/images/ui/input_field/placeholder_label.png
diff --git a/images/ui/input_field/placeholder_optional.png b/images/ui/input_field/placeholder_optional.png
diff --git a/images/ui/input_field/placeholder_reset.png b/images/ui/input_field/placeholder_reset.png
diff --git a/images/ui/input_field/prefill.png b/images/ui/input_field/prefill.png
diff --git a/images/ui/input_field/prefill_unnamed.png b/images/ui/input_field/prefill_unnamed.png
diff --git a/images/ui/input_field/several_labels_length.png b/images/ui/input_field/several_labels_length.png
diff --git a/images/ui/input_field/several_labels_length_1.png b/images/ui/input_field/several_labels_length_1.png
diff --git a/images/ui/input_field/size_long_name.png b/images/ui/input_field/size_long_name.png
diff --git a/images/ui/input_field/sizes_button.png b/images/ui/input_field/sizes_button.png
diff --git a/images/ui/input_field/sizes_label.png b/images/ui/input_field/sizes_label.png
diff --git a/images/ui/input_field/sizes_several.png b/images/ui/input_field/sizes_several.png
diff --git a/images/ui/input_field/user_action.png b/images/ui/input_field/user_action.png
diff --git a/topics/ui/controls/input_field.md b/topics/ui/controls/input_field.md
@@ -12,182 +12,240 @@
 
 An input field allows users to enter or edit a text line using the keyboard.
 
-![](input_field_example.png){width=170}
+![](input.png){width=706}
 
 ## When to use
 
 Use an input field if it’s not possible to enumerate the most likely values. Otherwise, use a [combo box](combo_box.md) or a [drop-down list](drop_down.md).
 
-If input has to be in a specific format, use one of the following controls:
+<table border="false" style="none">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format></td>
+    </tr>
+    <tr>
+        <td><img src="input_when_to_correct.png" alt=""/></td>
+        <td><img src="input_when_to_incorrect.png" alt=""/></td>
+    </tr>
+</table>
 
-* If the previous user input must be preserved, use a [combo box](combo_box.md).
-* Use a [text area](text_area.md) for long (commit message) or multi-line (code snippet) input. If place is constrained, use an [expandable input field](#input-field-types).
-* Use a slider if a precise value is not required, or if it’s possible to provide feedback on the effect of setting changes. If place is constrained, use an input field.
-* Use a [search field](search_field.md) to input a search query.
-* Use calendar to set a date.
-* Use color box to choose a color.
+## When not to use
 
-## How to use
+### Previous input is saved
 
-### Label
+If the previous user input must be preserved, use a [combo box](combo_box.md).
 
-A label accompanies each input field and indicates the information type.
+![](combobox_when_to_use_1.png){width=706}
+
+### Large input
+
+Use a [text area](text_area.md) for long or multi-line input.
 
-Labels should be [short and descriptive](writing_short.md).
+![](input_text_area.png){width=706}
 
-Write the label either as a noun and end it with a colon:
+### Space is limited
 
-![](label_noun.png){width=153}
+If the place is constrained, use an expandable input field [`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java).
+For more details, see [Expand button](built_in_button.md#expand-a-field).
 
-Or as a phrase with no ending punctuation:
+![](input_text_input_expand.png){width=706}
 
-![](label_sentence.png){width=247}
+### Many predefined values
+
+If there are many predefined values (for example, code snippets, commit author), add completion to the input field [`TextFieldWithCompletion`](%gh-ic%/platform/platform-impl/src/com/intellij/util/textCompletion/TextFieldWithCompletion.java). Show the completion popup when the user starts typing.
+
+![](input_completion.png){width=706}
+
+### Built-in buttons
+
+Use [built-in buttons](built_in_button.md) to help the user enter data. For example, to browse the disk.
+
+### Search
+
+Use a [search field](search_field.md) to input a search query.
+
+![](input_search.png){width="706"}
+
+### Password
+
+If input data is secured, replace it with dots via [`JBPasswordField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/JBPasswordField.java).
 
-Do **not** use labels to tell users what to do:
+![](input_password.png){width=706}
 
-![](user_action.png){width=186}
+### Setting a date
 
-Use sentence-style capitalization.
+Use a calendar to set a date.
 
-If there are several input fields on a form, it’s recommended to make labels approximately the same length to avoid gaps between labels and fields. For example:
+![](input_date_picker.png){width="706"}
 
-<table>
+### Choosing a color
+
+Use a color box to choose a color.
+
+![](input_colour_box.png){width="706"}
+
+## How to use
+
+### Label
+
+A label accompanies each input field and indicates the information type.
+
+#### General rules
+
+* Labels should be [short and descriptive](writing_short.md).
+* Write the label as a noun and end it with a colon.
+* Don't use labels to tell users what to do.
+* Use [sentence-style capitalization](capitalization.md#sentence).
+
+<table style="none" border="false">
     <tr>
-        <td width="50%"><format color="Red" style="bold">Incorrect</format></td>
-        <td width="50%"><format color="Green" style="bold">Correct</format></td>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_label_1_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_label_1_incorrect.png" alt="" width="378"/></td>
     </tr>
+</table>
+
+#### Label as a phrase
+
+When writing a label as a phrase, don't use colon and ending punctuation.
+
+<table style="none" border="false">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_label_2_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_label_2_incorrect.png" alt="" width="378"/></td>
+    </tr>
+</table>
+
+#### Grouped input fields
+
+If there are several input fields in a form, make labels approximately the same length to avoid gaps between labels and fields.
+
+<table style="none" border="false">
     <tr>
-        <td><img src="several_labels_length.png" alt="" width="385" /></td>
-        <td><img src="several_labels_length_1.png" alt="" width="224" /></td>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_label_3_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_label_3_incorrect.png" alt="" width="378"/></td>
     </tr>
 </table>
 
-If an input field is disabled, disable the label too:
+#### Disabled state
+
+If an input field is disabled, disable the label too.
+
+![](input_disabled.png){width=706}
 
-![](label_disabled.png){width=153}
+#### Selectable label
 
 Make the label text selectable. The user may want to search for this option on the Internet or to send a question to support.
 
+![](input_label_selected.png){width=706}
+
+#### Positioning a label
+
 Place the label on the left or above the input field. For more details, see the [Layout](layout.md) topic.
 
+<table style="none" border="false">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_positioning_label_1.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_positioning_label_2.png" alt="" width="378"/></td>
+    </tr>
+</table>
+
 ### Placeholder
 
-Placeholder is grey text placed inside an input field. Follow these rules:
+Placeholder is gray text placed inside an input field. To show placeholder text, use `JBTextField.getEmptyText().setText(...)`.
 
+#### General rules {id="placeholder-general-rules"}
 * Use sentence-style capitalization.
-* Do **not** use ending punctuation or ellipsis.
+* Don't use ending punctuation or ellipsis.
 * Hide the placeholder when the user starts typing, not when the input field gets the focus.
 
-To show placeholder text, use `JBTextField.getEmptyText().setText(...)`.
+#### Optional input field
 
 Use the placeholder to indicate that an input field is optional.
 
-![](placeholder_optional.png){width=397}
+![](input_placeholder_optional.png){width=706}
 
-Use the placeholder to show the default value:
+#### Default values
 
-![](placeholder_default.png){width=247}
+Use the placeholder to show the default value.
 
-If the user overwrites the value, it can be restored by removing the new value from the input field or by clicking the "Reset to default" link on the right:
+![](input_placeholder_default.png){width=706}
 
-![](placeholder_reset.png){width=361}
+If the user overwrites the value, it can be restored by removing the new value from the input field or by clicking the <control>Reset to default</control> link on the right.
 
-Do **not** use the placeholder to show examples. The user can get the impression that the field is already filled. Provide examples or explanation under the input field (see [Context help](context_help.md)):
+![](input_placeholder_default_reset.png){width=706}
 
-<table>
-    <tr>
-        <td width="50%"><format color="Red" style="bold">Incorrect</format></td>
-        <td width="50%"><format color="Green" style="bold">Correct</format></td>
-    </tr>
+#### Showing examples
+
+Don't use the placeholder to show examples because the user can get the impression that the field is already filled. Provide examples or explanation under the input field (see [Context help](context_help.md)):
+
+<table style="none" border="false">
     <tr>
-        <td><img src="placeholder_examples.png" alt="" width="150" /></td>
-        <td><img src="placeholder_examples_1.png" alt="" width="150" /></td>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_placeholder_example_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_placeholder_example_incorrect.png" alt="" width="378"/></td>
     </tr>
 </table>
 
-Do **not** use the placeholder as the field label. After the field has been filled, it is difficult to understand its purpose.
+#### Don't use placeholders as labels
 
-![](placeholder_label.png){width=100}
+Don't use the placeholder as the field label. After the field has been filled, it is difficult to understand its purpose.
+
+<table style="none" border="false">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_placeholder_label_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_placeholder_label_incorrect.png" alt="" width="378"/></td>
+    </tr>
+</table>
 
 ### Prefilled value
 
 Pre-fill the field if it has the default or a frequently used value. Use the default text color for pre-filled values:
 
-![](prefill.png){width=152}
+![](input_prefilled.png){width=706}
+
+<note>When naming a default entity like <code>scope</code> or <code>notebook</code> which can have multiple entities in a group, pre-fill it using the entity name with a sequential number: <code>scope-1</code>, <code>scope-2</code>, etc.</note>
 
-Do **not** prefill with "Unnamed". It takes time to read it and does not help the user to fill the form.
+Don't use <control>Unnamed</control> as a prefilled value. It takes time to read it and does not help the user to fill the form.
 
-![](prefill_unnamed.png){width=535}
+<table style="none" border="false">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_prefilled_unnamed_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_prefilled_unnamed_incorrect.png" alt="" width="378"/></td>
+    </tr>
+</table>
 
 ### Field focus
 
 When an input field gets the focus, place the caret at the end of the text:
 
-![](focus_end.png){width=321}
+![](input_focus.png){width=706}
 
 If users are more likely to re-enter the entire value, select the whole text when the field gets the focus:
 
-![](focus_all.png){width=274}
-
-### Input field types
-
-If the input text can be long and the place is constrained, use an expandable input field [`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java).
-For more details, see [built-in buttons](built_in_button.md#expand-a-field).
-
-![](expandable_1.png){width=332}
-
-If input data is secured, replace it with dots via [`JBPasswordField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/JBPasswordField.java).
-
-![](password.png){width=271}
-
-If there are many predefined values (for example, code snippets, commit author), add completion to the input field [`TextFieldWithCompletion`](%gh-ic%/platform/platform-impl/src/com/intellij/util/textCompletion/TextFieldWithCompletion.java).
-
-![](input_field_completion.png){width=509}
-
-An input field with completion looks the same way as a regular input field. When an empty input field gets the focus, show a tooltip after a delay to indicate that code completion is supported.
-
-![](completion_tooltip.png){width=291}
-
-Show the completion popup when the user starts typing or presses <shortcut>Ctrl+Space</shortcut>.
-
-Use [built-in buttons](built_in_button.md) to help the user enter data. For example, to browse the disk.
+![](input_focus_selection.png){width=706}
 
 ### Validation
 
 If the user enters an invalid value, highlight the field with red and show an error message in a tooltip. For more details, see [Validation errors](validation_errors.md).
 
-![](input_field_error.png){width=239}
+![](input_validation.png){width=706}
 
 ## Sizes and placement
 
-Sizes are the same for all themes:
-
-![](input_field_sizes.png){width=65}
-
-### Field width
+### Width
 
 Choose the width appropriate for the most common values, but not less than 65px. The field width helps the user understand what value is expected and to make sure that they fill the field correctly.
 
-| <format color="Green" style="bold">Correct</format> | ![](input_field_size_1.png){width=104} |
-|-----------------------------------------------------|----------------------------------------|
-| <format color="Red" style="bold">Incorrect</format> | ![](input_field_size_2.png){width=240} |
-| <format color="Green" style="bold">Correct</format> | ![](input_field_size_3.png){width=387} |
-| <format color="Red" style="bold">Incorrect</format> | ![](input_field_size_4.png){width=331} |
-
-{style=none}
-
-If the input value is longer than the field width, show the beginning of the value when the field becomes inactive:
-
-![](size_long_name.png){width=243}
-
-### Placement
+<table style="none" border="false">
+    <tr>
+        <td width="50%"><format color="Green" style="bold">Correct</format><img src="input_width_1_correct.png" alt="" width="378"/></td>
+        <td width="50%"><format color="Red" style="bold">Incorrect</format><img src="input_width_1_incorrect.png" alt="" width="378"/></td>
+    </tr>
+</table>
 
-If the input field depends on another control, for example, a checkbox, follow the rules for (layout.md#dependent-controls). Otherwise, follow the rules for [independent controls](layout.md#independent-controls).
+If the input value is longer than the field width, show the beginning of the value when the field becomes inactive.
 
-<!--
-![](sizes_label.png){width=493}
+![](input_width_2.png){width=706}
 
-![](sizes_button.png){width=246}
+### How to layout
 
-![](sizes_several.png){width=462}
--->
+Follow the [labeled input controls](layout.md#labeled-input-controls).
diff --git a/topics/ui/controls/text_area.md b/topics/ui/controls/text_area.md
@@ -21,7 +21,7 @@ Use a text area if input is unconstrained and long, or if the newline character
 Do **not** use a text area if:
 
 * Input consists of several words. Use an [input field](input_field.md) instead.
-* There is not enough space for a text area, or if input is normally short but can occasionally be long or multi-line. Use an [expandable input field](input_field.md#input-field-types) instead.
+* There is not enough space for a text area, or if input is normally short but can occasionally be long or multi-line. Use an [expandable input field](input_field.md#when-not-to-use) instead.
 * Values are added one by one. Use a [table](table.md) instead.
 * Text is read-only. Use a [description text](description_text.md) instead.
 

diff --git a/topics/ui/text/punctuation.md b/topics/ui/text/punctuation.md
@@ -96,13 +96,15 @@ Between symbols in series.
 
 Use a colon after labels for inputs and radio button / checkbox groups.
 
-![](label_noun.png){width=153}
+<!-- Replace the images below later -->
 
-![](radio_example.png){width=213}
+![](input_focus.png){width=706}
+
+![](checkbox_when_to_use.png){width=706}
 
 Do **not** use a colon if a label and text inside the input element make a phrase.
 
-![](label_sentence.png){width=247}
+![](input_placeholder_default.png){width=706}
 
 ## Contractions