feat: add example for select all group options

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx

@@ -632,6 +632,64 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
           ></Trans>
         </p>
       </Section>
+      <Section title={t("select.usage.groupMultiSelect")}>
+        <Select
+          label={t("select.label")}
+          name="select"
+          options={[
+            {
+              label: "Europe",
+              options: [
+                { label: "Germany", value: "DE" },
+                { label: "France", value: "FR" },
+                { disabled: true, label: "Belgium", value: "BE" },
+              ],
+            },
+            {
+              label: "Asia",
+              options: [
+                { label: "Nepal", value: "NP" },
+                { label: "India", value: "IN" },
+              ],
+            },
+          ]}
+          multiple={true}
+          value={multiselectValue}
+          onChange={(value: string[]) => setMultiselectValue(value)}
+          placeholder={t("select.multiSelectPlaceholder")}
+        />
+        <CodeBlock
+          exampleCode='
+const [multiSelectPlaceholder, setMultiSelectPlaceholder] = useState<string>("");
+
+<Select
+  label={t("select.label")}
+  name="select"
+  options={
+    [
+      {
+        label: "Europe",
+        options: [
+          { label: "Germany", value: "DE" },
+          { label: "France", value: "FR" },
+          { disabled: true, label: "Belgium", value: "BE" },
+        ],
+      },
+      {
+        label: "Asia",
+        options: [
+          { label: "Nepal", value: "NP" },
+          { label: "India", value: "IN" },
+        ],
+      },
+    ]}
+  multiple={true}
+  value={multiselectValue}
+  onChange={(value: string[]) => setMultiselectValue(value)}
+  placeholder={t("select.multiSelectPlaceholder")}
+/>'
+        />
+      </Section>
       <Section
         title={t("headers.propertiesValue", {
           value: "ISelectProperties",

apps/demo/src/locales/en/ui.json

@@ -342,6 +342,7 @@
       "basic": "Basic",
       "disabled": "Disabled",
       "group": "With grouping",
+      "groupMultiSelect": "Multiselect with grouping",
       "invalid": "Invalid",
       "key": "With label and value keys",
       "multiple": "Multiple select",

apps/demo/src/locales/fr/ui.json

@@ -342,6 +342,7 @@
       "basic": "Basic",
       "disabled": "Disabled (fr)",
       "group": "With grouping (fr)",
+      "groupMultiSelect": "Multiselect with grouping (fr)",
       "invalid": "Invalid (fr)",
       "key": "With label and value keys (fr)",
       "multiple": "Multiple select (fr)",