From 59be74538440c981ab73e7b2e42ea1303140c237 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 26 Jul 2023 15:47:57 -0400 Subject: [PATCH 1/7] [DON'T MERGE] Created selection components FAQ post --- wiki/temp/selection-components.md | 55 +++++++++++++++++++++++++++++ wiki/temp/spiderman_selection.jpeg | Bin 0 -> 159010 bytes 2 files changed, 55 insertions(+) create mode 100644 wiki/temp/selection-components.md create mode 100644 wiki/temp/spiderman_selection.jpeg diff --git a/wiki/temp/selection-components.md b/wiki/temp/selection-components.md new file mode 100644 index 00000000000..878ede33059 --- /dev/null +++ b/wiki/temp/selection-components.md @@ -0,0 +1,55 @@ +# The Ultimate Guide to EUI Selection Components + +EUI offers different selection solutions and choosing the right one may seem tricky. Welcome to a comprehensive guide on the EUI selection components. This guide will include explanations and comparisons for each component. + +![Spiderman Selection components meme](spiderman_selection.jpeg) + +## Meet the EUI selection components + +EUI currently offers **5** different selection solutions. + +### [`EuiSelect`](https://elastic.github.io/eui/#/forms/form-controls#select) +EuiSelect renders a basic HTML `` element. It should be used when you need to render 7 to 12 single items where only one option will be selected. This is a no-frills selection component that renders options as a string. If you would like to customize how the options are rendered and selected, you can use [`EuiSuperSelect`](#euisuperselect) instead. For lists over 12 items, consider using [`EuiComboBox`](#euicombobox) which has search and multi-select capabilities. +`EuiSelect` renders a basic HTML `` element. This is a no-frills selection component that renders `` as a string. It should be used when you need to render 7 to 12 single items where only one option will be selected. If you would like to customize how the options are rendered and selected, you can use [`EuiSuperSelect`](#euisuperselect) instead. For lists over 12 items, consider using [`EuiComboBox`](#euicombobox) which has search and multi-select capabilities. +`EuiSelect` renders a basic HTML `` element. This is a no-frills selection component that renders `` as a string. It should be used when you need to render 7 to 12 items where only one option will be selected. **In general**, we strongly recommend reaching for `EuiSelect` first when possible over other more complex selection components. Native form controls tend to have better cross-browser and cross-device affordances (particularly for mobile devices), and are more familiar to end users due to their ubiquity across the internet. +`EuiSelect` renders a basic HTML `