#336 add example and documentation

nicegui/elements/input.py

@@ -23,6 +23,9 @@ class Input(ValueElement):
         If you want to wait until the user confirms the input, you can register a custom event callback, e.g.
         `ui.input(...).on('keydown.enter', ...)` or `ui.input(...).on('blur', ...)`.
 
+        You can use the `validation` parameter to define a dictionary of validation rules.
+        The key of the first rule that fails will be displayed as an error message.
+
         :param label: displayed label for the text input
         :param placeholder: text to show if no value is entered
         :param value: the current value of the text input

nicegui/elements/number.py

@@ -15,10 +15,15 @@ class Number(ValueElement):
                  validation: Dict[str, Callable] = {}) -> None:
         """Number Input
 
+        This element is based on Quasar's `QInput <https://quasar.dev/vue-components/input>`_ component.
+
+        You can use the `validation` parameter to define a dictionary of validation rules.
+        The key of the first rule that fails will be displayed as an error message.
+
         :param label: displayed name for the number input
         :param placeholder: text to show if no value is entered
         :param value: the initial value of the field
-        :param format: a string like '%.2f' to format the displayed value
+        :param format: a string like "%.2f" to format the displayed value
         :param on_change: callback to execute when the input is confirmed by leaving the focus
         :param validation: dictionary of validation rules, e.g. ``{'Too small!': lambda value: value < 3}``
         """

website/reference.py

@@ -130,7 +130,8 @@ def create_full(menu: ui.element) -> None:
     @example(ui.input, menu)
     def input_example():
         ui.input(label='Text', placeholder='start typing',
-                 on_change=lambda e: result.set_text('you typed: ' + e.value))
+                 on_change=lambda e: result.set_text('you typed: ' + e.value),
+                 validation={'Input too long': lambda value: len(value) < 20})
         result = ui.label()
 
     @example(ui.number, menu)