diff --git a/images/ui/input_field/completion_tooltip.png b/images/ui/input_field/completion_tooltip.png deleted file mode 100644 index 32db5478283..00000000000 Binary files a/images/ui/input_field/completion_tooltip.png and /dev/null differ diff --git a/images/ui/input_field/expandable_1.png b/images/ui/input_field/expandable_1.png deleted file mode 100644 index afddc259197..00000000000 Binary files a/images/ui/input_field/expandable_1.png and /dev/null differ diff --git a/images/ui/input_field/expandable_2.png b/images/ui/input_field/expandable_2.png deleted file mode 100644 index 9776066cb46..00000000000 Binary files a/images/ui/input_field/expandable_2.png and /dev/null differ diff --git a/images/ui/input_field/fields_line.png b/images/ui/input_field/fields_line.png deleted file mode 100644 index 494fc3e4050..00000000000 Binary files a/images/ui/input_field/fields_line.png and /dev/null differ diff --git a/images/ui/input_field/fields_stack.png b/images/ui/input_field/fields_stack.png deleted file mode 100644 index d98020541cf..00000000000 Binary files a/images/ui/input_field/fields_stack.png and /dev/null differ diff --git a/images/ui/input_field/fields_stack_alignment.png b/images/ui/input_field/fields_stack_alignment.png deleted file mode 100644 index 3d24e7acb73..00000000000 Binary files a/images/ui/input_field/fields_stack_alignment.png and /dev/null differ diff --git a/images/ui/input_field/fields_stack_alignment_groups.png b/images/ui/input_field/fields_stack_alignment_groups.png deleted file mode 100644 index a7bea8db826..00000000000 Binary files a/images/ui/input_field/fields_stack_alignment_groups.png and /dev/null differ diff --git a/images/ui/input_field/focus_all.png b/images/ui/input_field/focus_all.png deleted file mode 100644 index cae522019b5..00000000000 Binary files a/images/ui/input_field/focus_all.png and /dev/null differ diff --git a/images/ui/input_field/focus_end.png b/images/ui/input_field/focus_end.png deleted file mode 100644 index 666cf8bfcb8..00000000000 Binary files a/images/ui/input_field/focus_end.png and /dev/null differ diff --git a/images/ui/input_field/input.png b/images/ui/input_field/input.png new file mode 100644 index 00000000000..76de73382ba Binary files /dev/null and b/images/ui/input_field/input.png differ diff --git a/images/ui/input_field/input_colour_box.png b/images/ui/input_field/input_colour_box.png new file mode 100644 index 00000000000..854ebcf917d Binary files /dev/null and b/images/ui/input_field/input_colour_box.png differ diff --git a/images/ui/input_field/input_colour_box_dark.png b/images/ui/input_field/input_colour_box_dark.png new file mode 100644 index 00000000000..8bdfd221bcf Binary files /dev/null and b/images/ui/input_field/input_colour_box_dark.png differ diff --git a/images/ui/input_field/input_completion.png b/images/ui/input_field/input_completion.png new file mode 100644 index 00000000000..010ceefd5ef Binary files /dev/null and b/images/ui/input_field/input_completion.png differ diff --git a/images/ui/input_field/input_completion_dark.png b/images/ui/input_field/input_completion_dark.png new file mode 100644 index 00000000000..f4b2005e0b9 Binary files /dev/null and b/images/ui/input_field/input_completion_dark.png differ diff --git a/images/ui/input_field/input_completion_tooltip.png b/images/ui/input_field/input_completion_tooltip.png new file mode 100644 index 00000000000..26999fd18a8 Binary files /dev/null and b/images/ui/input_field/input_completion_tooltip.png differ diff --git a/images/ui/input_field/input_completion_tooltip_dark.png b/images/ui/input_field/input_completion_tooltip_dark.png new file mode 100644 index 00000000000..ca1a6da524d Binary files /dev/null and b/images/ui/input_field/input_completion_tooltip_dark.png differ diff --git a/images/ui/input_field/input_dark.png b/images/ui/input_field/input_dark.png new file mode 100644 index 00000000000..b72e3e0ab0e Binary files /dev/null and b/images/ui/input_field/input_dark.png differ diff --git a/images/ui/input_field/input_date_picker.png b/images/ui/input_field/input_date_picker.png new file mode 100644 index 00000000000..79b5eae0247 Binary files /dev/null and b/images/ui/input_field/input_date_picker.png differ diff --git a/images/ui/input_field/input_date_picker_dark.png b/images/ui/input_field/input_date_picker_dark.png new file mode 100644 index 00000000000..ff7cd6c6767 Binary files /dev/null and b/images/ui/input_field/input_date_picker_dark.png differ diff --git a/images/ui/input_field/input_disabled.png b/images/ui/input_field/input_disabled.png new file mode 100644 index 00000000000..27a063a1da0 Binary files /dev/null and b/images/ui/input_field/input_disabled.png differ diff --git a/images/ui/input_field/input_disabled_dark.png b/images/ui/input_field/input_disabled_dark.png new file mode 100644 index 00000000000..0cab0ba4b79 Binary files /dev/null and b/images/ui/input_field/input_disabled_dark.png differ diff --git a/images/ui/input_field/input_field_completion.png b/images/ui/input_field/input_field_completion.png deleted file mode 100644 index e7bfff51697..00000000000 Binary files a/images/ui/input_field/input_field_completion.png and /dev/null differ diff --git a/images/ui/input_field/input_field_error.png b/images/ui/input_field/input_field_error.png deleted file mode 100644 index 23b52a20690..00000000000 Binary files a/images/ui/input_field/input_field_error.png and /dev/null differ diff --git a/images/ui/input_field/input_field_example.png b/images/ui/input_field/input_field_example.png deleted file mode 100644 index e0f1e2592ac..00000000000 Binary files a/images/ui/input_field/input_field_example.png and /dev/null differ diff --git a/images/ui/input_field/input_field_label_left.png b/images/ui/input_field/input_field_label_left.png deleted file mode 100644 index 8313b6d4cd2..00000000000 Binary files a/images/ui/input_field/input_field_label_left.png and /dev/null differ diff --git a/images/ui/input_field/input_field_size_1.png b/images/ui/input_field/input_field_size_1.png deleted file mode 100644 index 5e598816bbf..00000000000 Binary files a/images/ui/input_field/input_field_size_1.png and /dev/null differ diff --git a/images/ui/input_field/input_field_size_2.png b/images/ui/input_field/input_field_size_2.png deleted file mode 100644 index e2f0c77daf2..00000000000 Binary files a/images/ui/input_field/input_field_size_2.png and /dev/null differ diff --git a/images/ui/input_field/input_field_size_3.png b/images/ui/input_field/input_field_size_3.png deleted file mode 100644 index ea08a9e19a5..00000000000 Binary files a/images/ui/input_field/input_field_size_3.png and /dev/null differ diff --git a/images/ui/input_field/input_field_size_4.png b/images/ui/input_field/input_field_size_4.png deleted file mode 100644 index cf8c5f92f0a..00000000000 Binary files a/images/ui/input_field/input_field_size_4.png and /dev/null differ diff --git a/images/ui/input_field/input_field_sizes.png b/images/ui/input_field/input_field_sizes.png deleted file mode 100644 index dc1bd438822..00000000000 Binary files a/images/ui/input_field/input_field_sizes.png and /dev/null differ diff --git a/images/ui/input_field/input_focus.png b/images/ui/input_field/input_focus.png new file mode 100644 index 00000000000..cfd8d5bd27f Binary files /dev/null and b/images/ui/input_field/input_focus.png differ diff --git a/images/ui/input_field/input_focus_dark.png b/images/ui/input_field/input_focus_dark.png new file mode 100644 index 00000000000..07ea2475ded Binary files /dev/null and b/images/ui/input_field/input_focus_dark.png differ diff --git a/images/ui/input_field/input_focus_selection.png b/images/ui/input_field/input_focus_selection.png new file mode 100644 index 00000000000..9429182e61b Binary files /dev/null and b/images/ui/input_field/input_focus_selection.png differ diff --git a/images/ui/input_field/input_focus_selection_dark.png b/images/ui/input_field/input_focus_selection_dark.png new file mode 100644 index 00000000000..7f791031ac2 Binary files /dev/null and b/images/ui/input_field/input_focus_selection_dark.png differ diff --git a/images/ui/input_field/input_label_1_correct.png b/images/ui/input_field/input_label_1_correct.png new file mode 100644 index 00000000000..8fbace44752 Binary files /dev/null and b/images/ui/input_field/input_label_1_correct.png differ diff --git a/images/ui/input_field/input_label_1_correct_dark.png b/images/ui/input_field/input_label_1_correct_dark.png new file mode 100644 index 00000000000..9fc0c855a09 Binary files /dev/null and b/images/ui/input_field/input_label_1_correct_dark.png differ diff --git a/images/ui/input_field/input_label_1_incorrect.png b/images/ui/input_field/input_label_1_incorrect.png new file mode 100644 index 00000000000..397aaa91f90 Binary files /dev/null and b/images/ui/input_field/input_label_1_incorrect.png differ diff --git a/images/ui/input_field/input_label_1_incorrect_dark.png b/images/ui/input_field/input_label_1_incorrect_dark.png new file mode 100644 index 00000000000..3495c387e80 Binary files /dev/null and b/images/ui/input_field/input_label_1_incorrect_dark.png differ diff --git a/images/ui/input_field/input_label_2_correct.png b/images/ui/input_field/input_label_2_correct.png new file mode 100644 index 00000000000..3b748dea3c7 Binary files /dev/null and b/images/ui/input_field/input_label_2_correct.png differ diff --git a/images/ui/input_field/input_label_2_correct_dark.png b/images/ui/input_field/input_label_2_correct_dark.png new file mode 100644 index 00000000000..de45847de51 Binary files /dev/null and b/images/ui/input_field/input_label_2_correct_dark.png differ diff --git a/images/ui/input_field/input_label_2_incorrect.png b/images/ui/input_field/input_label_2_incorrect.png new file mode 100644 index 00000000000..ef5b46eff5b Binary files /dev/null and b/images/ui/input_field/input_label_2_incorrect.png differ diff --git a/images/ui/input_field/input_label_2_incorrect_dark.png b/images/ui/input_field/input_label_2_incorrect_dark.png new file mode 100644 index 00000000000..39549484b04 Binary files /dev/null and b/images/ui/input_field/input_label_2_incorrect_dark.png differ diff --git a/images/ui/input_field/input_label_3_correct.png b/images/ui/input_field/input_label_3_correct.png new file mode 100644 index 00000000000..823712181db Binary files /dev/null and b/images/ui/input_field/input_label_3_correct.png differ diff --git a/images/ui/input_field/input_label_3_correct_dark.png b/images/ui/input_field/input_label_3_correct_dark.png new file mode 100644 index 00000000000..6472c8ba53c Binary files /dev/null and b/images/ui/input_field/input_label_3_correct_dark.png differ diff --git a/images/ui/input_field/input_label_3_incorrect.png b/images/ui/input_field/input_label_3_incorrect.png new file mode 100644 index 00000000000..2ad2025ccc0 Binary files /dev/null and b/images/ui/input_field/input_label_3_incorrect.png differ diff --git a/images/ui/input_field/input_label_3_incorrect_dark.png b/images/ui/input_field/input_label_3_incorrect_dark.png new file mode 100644 index 00000000000..29d1ef088f4 Binary files /dev/null and b/images/ui/input_field/input_label_3_incorrect_dark.png differ diff --git a/images/ui/input_field/input_label_selected.png b/images/ui/input_field/input_label_selected.png new file mode 100644 index 00000000000..1091c0a6a99 Binary files /dev/null and b/images/ui/input_field/input_label_selected.png differ diff --git a/images/ui/input_field/input_label_selected_dark.png b/images/ui/input_field/input_label_selected_dark.png new file mode 100644 index 00000000000..6b6324a44a7 Binary files /dev/null and b/images/ui/input_field/input_label_selected_dark.png differ diff --git a/images/ui/input_field/input_password.png b/images/ui/input_field/input_password.png new file mode 100644 index 00000000000..257ef2859c6 Binary files /dev/null and b/images/ui/input_field/input_password.png differ diff --git a/images/ui/input_field/input_password_dark.png b/images/ui/input_field/input_password_dark.png new file mode 100644 index 00000000000..89805be6d57 Binary files /dev/null and b/images/ui/input_field/input_password_dark.png differ diff --git a/images/ui/input_field/input_placeholder_default.png b/images/ui/input_field/input_placeholder_default.png new file mode 100644 index 00000000000..8e37f069ed8 Binary files /dev/null and b/images/ui/input_field/input_placeholder_default.png differ diff --git a/images/ui/input_field/input_placeholder_default_dark.png b/images/ui/input_field/input_placeholder_default_dark.png new file mode 100644 index 00000000000..def76f98f3b Binary files /dev/null and b/images/ui/input_field/input_placeholder_default_dark.png differ diff --git a/images/ui/input_field/input_placeholder_default_reset.png b/images/ui/input_field/input_placeholder_default_reset.png new file mode 100644 index 00000000000..bbe63cf5378 Binary files /dev/null and b/images/ui/input_field/input_placeholder_default_reset.png differ diff --git a/images/ui/input_field/input_placeholder_default_reset_dark.png b/images/ui/input_field/input_placeholder_default_reset_dark.png new file mode 100644 index 00000000000..ced21f91bb2 Binary files /dev/null and b/images/ui/input_field/input_placeholder_default_reset_dark.png differ diff --git a/images/ui/input_field/input_placeholder_example_correct.png b/images/ui/input_field/input_placeholder_example_correct.png new file mode 100644 index 00000000000..7ffd7fa3d4d Binary files /dev/null and b/images/ui/input_field/input_placeholder_example_correct.png differ diff --git a/images/ui/input_field/input_placeholder_example_correct_dark.png b/images/ui/input_field/input_placeholder_example_correct_dark.png new file mode 100644 index 00000000000..961bfea8bf7 Binary files /dev/null and b/images/ui/input_field/input_placeholder_example_correct_dark.png differ diff --git a/images/ui/input_field/input_placeholder_example_incorrect.png b/images/ui/input_field/input_placeholder_example_incorrect.png new file mode 100644 index 00000000000..1fa298a1915 Binary files /dev/null and b/images/ui/input_field/input_placeholder_example_incorrect.png differ diff --git a/images/ui/input_field/input_placeholder_example_incorrect_dark.png b/images/ui/input_field/input_placeholder_example_incorrect_dark.png new file mode 100644 index 00000000000..1b4270be007 Binary files /dev/null and b/images/ui/input_field/input_placeholder_example_incorrect_dark.png differ diff --git a/images/ui/input_field/input_placeholder_label_correct.png b/images/ui/input_field/input_placeholder_label_correct.png new file mode 100644 index 00000000000..98a7a75afae Binary files /dev/null and b/images/ui/input_field/input_placeholder_label_correct.png differ diff --git a/images/ui/input_field/input_placeholder_label_correct_dark.png b/images/ui/input_field/input_placeholder_label_correct_dark.png new file mode 100644 index 00000000000..1ed4455a7de Binary files /dev/null and b/images/ui/input_field/input_placeholder_label_correct_dark.png differ diff --git a/images/ui/input_field/input_placeholder_label_incorrect.png b/images/ui/input_field/input_placeholder_label_incorrect.png new file mode 100644 index 00000000000..6d5a1b19e3c Binary files /dev/null and b/images/ui/input_field/input_placeholder_label_incorrect.png differ diff --git a/images/ui/input_field/input_placeholder_label_incorrect_dark.png b/images/ui/input_field/input_placeholder_label_incorrect_dark.png new file mode 100644 index 00000000000..0e3bdaa8dcc Binary files /dev/null and b/images/ui/input_field/input_placeholder_label_incorrect_dark.png differ diff --git a/images/ui/input_field/input_placeholder_optional.png b/images/ui/input_field/input_placeholder_optional.png new file mode 100644 index 00000000000..fd4acfdf05a Binary files /dev/null and b/images/ui/input_field/input_placeholder_optional.png differ diff --git a/images/ui/input_field/input_placeholder_optional_dark.png b/images/ui/input_field/input_placeholder_optional_dark.png new file mode 100644 index 00000000000..006b32161e2 Binary files /dev/null and b/images/ui/input_field/input_placeholder_optional_dark.png differ diff --git a/images/ui/input_field/input_positioning_label_1.png b/images/ui/input_field/input_positioning_label_1.png new file mode 100644 index 00000000000..52f709468ce Binary files /dev/null and b/images/ui/input_field/input_positioning_label_1.png differ diff --git a/images/ui/input_field/input_positioning_label_1_dark.png b/images/ui/input_field/input_positioning_label_1_dark.png new file mode 100644 index 00000000000..24d00bf751e Binary files /dev/null and b/images/ui/input_field/input_positioning_label_1_dark.png differ diff --git a/images/ui/input_field/input_positioning_label_2.png b/images/ui/input_field/input_positioning_label_2.png new file mode 100644 index 00000000000..a05e4e0a4fb Binary files /dev/null and b/images/ui/input_field/input_positioning_label_2.png differ diff --git a/images/ui/input_field/input_positioning_label_2_dark.png b/images/ui/input_field/input_positioning_label_2_dark.png new file mode 100644 index 00000000000..1a88592527f Binary files /dev/null and b/images/ui/input_field/input_positioning_label_2_dark.png differ diff --git a/images/ui/input_field/input_prefilled.png b/images/ui/input_field/input_prefilled.png new file mode 100644 index 00000000000..7f5bfd4ac75 Binary files /dev/null and b/images/ui/input_field/input_prefilled.png differ diff --git a/images/ui/input_field/input_prefilled_dark.png b/images/ui/input_field/input_prefilled_dark.png new file mode 100644 index 00000000000..115c962a9cc Binary files /dev/null and b/images/ui/input_field/input_prefilled_dark.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed.png b/images/ui/input_field/input_prefilled_unnamed.png new file mode 100644 index 00000000000..f5a8478ce4f Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed_correct.png b/images/ui/input_field/input_prefilled_unnamed_correct.png new file mode 100644 index 00000000000..acda0eaff3c Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed_correct.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed_correct_dark.png b/images/ui/input_field/input_prefilled_unnamed_correct_dark.png new file mode 100644 index 00000000000..61b17457b00 Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed_correct_dark.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed_dark.png b/images/ui/input_field/input_prefilled_unnamed_dark.png new file mode 100644 index 00000000000..0e4ed488d68 Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed_dark.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed_incorrect.png b/images/ui/input_field/input_prefilled_unnamed_incorrect.png new file mode 100644 index 00000000000..b705ad097d8 Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed_incorrect.png differ diff --git a/images/ui/input_field/input_prefilled_unnamed_incorrect_dark.png b/images/ui/input_field/input_prefilled_unnamed_incorrect_dark.png new file mode 100644 index 00000000000..a7ccf879893 Binary files /dev/null and b/images/ui/input_field/input_prefilled_unnamed_incorrect_dark.png differ diff --git a/images/ui/input_field/input_search.png b/images/ui/input_field/input_search.png new file mode 100644 index 00000000000..155e7e3711e Binary files /dev/null and b/images/ui/input_field/input_search.png differ diff --git a/images/ui/input_field/input_search_dark.png b/images/ui/input_field/input_search_dark.png new file mode 100644 index 00000000000..3ca7ef01626 Binary files /dev/null and b/images/ui/input_field/input_search_dark.png differ diff --git a/images/ui/input_field/input_text_area.png b/images/ui/input_field/input_text_area.png new file mode 100644 index 00000000000..dae2cdfe0e6 Binary files /dev/null and b/images/ui/input_field/input_text_area.png differ diff --git a/images/ui/input_field/input_text_area_dark.png b/images/ui/input_field/input_text_area_dark.png new file mode 100644 index 00000000000..bcaead2db86 Binary files /dev/null and b/images/ui/input_field/input_text_area_dark.png differ diff --git a/images/ui/input_field/input_text_input_expand.png b/images/ui/input_field/input_text_input_expand.png new file mode 100644 index 00000000000..73b913dd263 Binary files /dev/null and b/images/ui/input_field/input_text_input_expand.png differ diff --git a/images/ui/input_field/input_text_input_expand_dark.png b/images/ui/input_field/input_text_input_expand_dark.png new file mode 100644 index 00000000000..7c2c75d8b47 Binary files /dev/null and b/images/ui/input_field/input_text_input_expand_dark.png differ diff --git a/images/ui/input_field/input_validation.png b/images/ui/input_field/input_validation.png new file mode 100644 index 00000000000..1c7f5309db9 Binary files /dev/null and b/images/ui/input_field/input_validation.png differ diff --git a/images/ui/input_field/input_validation_dark.png b/images/ui/input_field/input_validation_dark.png new file mode 100644 index 00000000000..440fdf0ca4e Binary files /dev/null and b/images/ui/input_field/input_validation_dark.png differ diff --git a/images/ui/input_field/input_when_to.png b/images/ui/input_field/input_when_to.png new file mode 100644 index 00000000000..e55c76cda70 Binary files /dev/null and b/images/ui/input_field/input_when_to.png differ diff --git a/images/ui/input_field/input_when_to_correct.png b/images/ui/input_field/input_when_to_correct.png new file mode 100644 index 00000000000..3257341b962 Binary files /dev/null and b/images/ui/input_field/input_when_to_correct.png differ diff --git a/images/ui/input_field/input_when_to_correct_dark.png b/images/ui/input_field/input_when_to_correct_dark.png new file mode 100644 index 00000000000..b93fc11b0ab Binary files /dev/null and b/images/ui/input_field/input_when_to_correct_dark.png differ diff --git a/images/ui/input_field/input_when_to_dark.png b/images/ui/input_field/input_when_to_dark.png new file mode 100644 index 00000000000..c680d93abe6 Binary files /dev/null and b/images/ui/input_field/input_when_to_dark.png differ diff --git a/images/ui/input_field/input_when_to_incorrect.png b/images/ui/input_field/input_when_to_incorrect.png new file mode 100644 index 00000000000..ac9f93fffe3 Binary files /dev/null and b/images/ui/input_field/input_when_to_incorrect.png differ diff --git a/images/ui/input_field/input_when_to_incorrect_dark.png b/images/ui/input_field/input_when_to_incorrect_dark.png new file mode 100644 index 00000000000..b33b74f12a9 Binary files /dev/null and b/images/ui/input_field/input_when_to_incorrect_dark.png differ diff --git a/images/ui/input_field/input_width_1_correct.png b/images/ui/input_field/input_width_1_correct.png new file mode 100644 index 00000000000..230eb0b61d1 Binary files /dev/null and b/images/ui/input_field/input_width_1_correct.png differ diff --git a/images/ui/input_field/input_width_1_correct_dark.png b/images/ui/input_field/input_width_1_correct_dark.png new file mode 100644 index 00000000000..ffab513df82 Binary files /dev/null and b/images/ui/input_field/input_width_1_correct_dark.png differ diff --git a/images/ui/input_field/input_width_1_incorrect.png b/images/ui/input_field/input_width_1_incorrect.png new file mode 100644 index 00000000000..db0803de0b2 Binary files /dev/null and b/images/ui/input_field/input_width_1_incorrect.png differ diff --git a/images/ui/input_field/input_width_1_incorrect_dark.png b/images/ui/input_field/input_width_1_incorrect_dark.png new file mode 100644 index 00000000000..d4cd5092580 Binary files /dev/null and b/images/ui/input_field/input_width_1_incorrect_dark.png differ diff --git a/images/ui/input_field/input_width_2.png b/images/ui/input_field/input_width_2.png new file mode 100644 index 00000000000..5c79d854519 Binary files /dev/null and b/images/ui/input_field/input_width_2.png differ diff --git a/images/ui/input_field/input_width_2_dark.png b/images/ui/input_field/input_width_2_dark.png new file mode 100644 index 00000000000..d49cd58916c Binary files /dev/null and b/images/ui/input_field/input_width_2_dark.png differ diff --git a/images/ui/input_field/label_disabled.png b/images/ui/input_field/label_disabled.png deleted file mode 100644 index 425412f6ad2..00000000000 Binary files a/images/ui/input_field/label_disabled.png and /dev/null differ diff --git a/images/ui/input_field/label_noun.png b/images/ui/input_field/label_noun.png deleted file mode 100644 index 5977c3870cf..00000000000 Binary files a/images/ui/input_field/label_noun.png and /dev/null differ diff --git a/images/ui/input_field/label_sentence.png b/images/ui/input_field/label_sentence.png deleted file mode 100644 index bb84f78ab3a..00000000000 Binary files a/images/ui/input_field/label_sentence.png and /dev/null differ diff --git a/images/ui/input_field/label_top.png b/images/ui/input_field/label_top.png deleted file mode 100644 index 4b0b9881c83..00000000000 Binary files a/images/ui/input_field/label_top.png and /dev/null differ diff --git a/images/ui/input_field/password.png b/images/ui/input_field/password.png deleted file mode 100644 index ef0fd1741c5..00000000000 Binary files a/images/ui/input_field/password.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_default.png b/images/ui/input_field/placeholder_default.png deleted file mode 100644 index 64d2557015a..00000000000 Binary files a/images/ui/input_field/placeholder_default.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_examples.png b/images/ui/input_field/placeholder_examples.png deleted file mode 100644 index 2c514b66104..00000000000 Binary files a/images/ui/input_field/placeholder_examples.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_examples_1.png b/images/ui/input_field/placeholder_examples_1.png deleted file mode 100644 index abef877177b..00000000000 Binary files a/images/ui/input_field/placeholder_examples_1.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_label.png b/images/ui/input_field/placeholder_label.png deleted file mode 100644 index 7b8315c5e6a..00000000000 Binary files a/images/ui/input_field/placeholder_label.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_optional.png b/images/ui/input_field/placeholder_optional.png deleted file mode 100644 index d50b8f698f0..00000000000 Binary files a/images/ui/input_field/placeholder_optional.png and /dev/null differ diff --git a/images/ui/input_field/placeholder_reset.png b/images/ui/input_field/placeholder_reset.png deleted file mode 100644 index 23767be80ee..00000000000 Binary files a/images/ui/input_field/placeholder_reset.png and /dev/null differ diff --git a/images/ui/input_field/prefill.png b/images/ui/input_field/prefill.png deleted file mode 100644 index da2612e94b7..00000000000 Binary files a/images/ui/input_field/prefill.png and /dev/null differ diff --git a/images/ui/input_field/prefill_unnamed.png b/images/ui/input_field/prefill_unnamed.png deleted file mode 100644 index 4cbfe957a71..00000000000 Binary files a/images/ui/input_field/prefill_unnamed.png and /dev/null differ diff --git a/images/ui/input_field/several_labels_length.png b/images/ui/input_field/several_labels_length.png deleted file mode 100644 index 18754263ea6..00000000000 Binary files a/images/ui/input_field/several_labels_length.png and /dev/null differ diff --git a/images/ui/input_field/several_labels_length_1.png b/images/ui/input_field/several_labels_length_1.png deleted file mode 100644 index c8e27b69074..00000000000 Binary files a/images/ui/input_field/several_labels_length_1.png and /dev/null differ diff --git a/images/ui/input_field/size_long_name.png b/images/ui/input_field/size_long_name.png deleted file mode 100644 index 1c0535c2136..00000000000 Binary files a/images/ui/input_field/size_long_name.png and /dev/null differ diff --git a/images/ui/input_field/sizes_button.png b/images/ui/input_field/sizes_button.png deleted file mode 100644 index e0e806766a4..00000000000 Binary files a/images/ui/input_field/sizes_button.png and /dev/null differ diff --git a/images/ui/input_field/sizes_label.png b/images/ui/input_field/sizes_label.png deleted file mode 100644 index e6a235f57b8..00000000000 Binary files a/images/ui/input_field/sizes_label.png and /dev/null differ diff --git a/images/ui/input_field/sizes_several.png b/images/ui/input_field/sizes_several.png deleted file mode 100644 index 0f9dc87b8c5..00000000000 Binary files a/images/ui/input_field/sizes_several.png and /dev/null differ diff --git a/images/ui/input_field/user_action.png b/images/ui/input_field/user_action.png deleted file mode 100644 index db345c4a839..00000000000 Binary files a/images/ui/input_field/user_action.png and /dev/null differ diff --git a/topics/ui/controls/input_field.md b/topics/ui/controls/input_field.md index fa847fabafe..96160e5f5c8 100644 --- 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: + + + + + + + + + +
CorrectIncorrect
-* 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"} - +### 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). + +
- - + + +
IncorrectCorrectCorrectIncorrect
+ +#### Label as a phrase + +When writing a label as a phrase, don't use colon and ending punctuation. + + + + + + +
CorrectIncorrect
+ +#### 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. + + - - + +
CorrectIncorrect
-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. + + + + + +
CorrectCorrect
+ ### 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 Reset to default 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} - - - - - +#### 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)): + +
IncorrectCorrect
- - + +
CorrectIncorrect
-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. + + + + + + +
CorrectIncorrect
### 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} + +When naming a default entity like scope or notebook which can have multiple entities in a group, pre-fill it using the entity name with a sequential number: scope-1, scope-2, etc. -Do **not** prefill with "Unnamed". It takes time to read it and does not help the user to fill the form. +Don't use Unnamed 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} + + + + + +
CorrectIncorrect
### 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 Ctrl+Space. - -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. -| Correct | ![](input_field_size_1.png){width=104} | -|-----------------------------------------------------|----------------------------------------| -| Incorrect | ![](input_field_size_2.png){width=240} | -| Correct | ![](input_field_size_3.png){width=387} | -| Incorrect | ![](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 + + + + + +
CorrectIncorrect
-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. - +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 index 877429d35c2..82c15779b54 100644 --- 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 index 555300b586a..a0da358b8f8 100644 --- 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} + -![](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