Example for list of value

doc/gui/extension/example_library/example_library.py

@@ -42,6 +42,15 @@ class ExampleLibrary(ElementLibrary):
                 # element, exported as GameTable in front-end/src/index.ts
                 # react_component="GameTable",
             ),
+            "list_of_languages": Element(
+                "lov",
+                {
+                    "lov": ElementProperty(PropertyType.lov),
+                },
+                # The name of the React component (TodoList) that implements this custom
+                # element, exported as TodoList in front-end/src/index.ts
+                # react_component="ListOfLanguages",
+            )
         }
 
     # The implementation of the rendering for the "fraction" static element

doc/gui/extension/example_library/front-end/src/ListOfLanguages.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { LoV, useLovListMemo } from "taipy-gui";
+
+interface ToDoListProps {
+    lov?: LoV;
+    defaultLov?: string;
+}
+
+const selectStyle = {
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "5px",
+    border: "1px solid #ccc",
+}
+
+const divStyle = {
+    margin: "20px",
+    fontFamily: "Arial, sans-serif",
+}
+
+const ListOfLanguages = (props: ToDoListProps) => {
+    const { lov, defaultLov = "" } = props;
+    const lovList = useLovListMemo(lov, defaultLov);
+
+    return (
+        <div style={divStyle}>
+            <select style={selectStyle}>
+                {lovList.map((todo, index) => (
+                    <option key={index} value={typeof todo.item === "string" ? todo.item : ""}>
+                        {typeof todo.item === "string" ? todo.item : null}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+};
+
+export default ListOfLanguages;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -8,5 +8,6 @@
 // the name used in the element declaration in the element library.
 import ColoredLabel from "./ColoredLabel";
 import GameTable from "./GameTable";
+import ListOfLanguages from "./ListOfLanguages";
 
-export { ColoredLabel as ExampleLabel, GameTable };
+export { ColoredLabel as ExampleLabel, GameTable, ListOfLanguages };

doc/gui/extension/list_of_languages.py

@@ -0,0 +1,34 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+from example_library import ExampleLibrary
+
+from taipy.gui import Gui
+
+languages = [
+    "Python",
+    "JavaScript",
+    "TypeScript",
+    "Java",
+    "C++",
+    "Ruby",
+    "Go",
+    "Swift",
+    "Kotlin",
+    "Rust",
+]
+
+page = """
+Please select the programming languages you are familiar with:
+<|{languages}|example.list_of_languages|>
+"""
+
+if __name__ == "__main__":
+    Gui(page, libraries=[ExampleLibrary()]).run(title="Programming language selection")