feat: add InputTextArea component

solara/components/__init__.py

@@ -33,6 +33,7 @@
     ToggleButtonsSingle,
 )
 from .input import InputText, InputFloat, InputInt  # noqa: F401 F403
+from .input_text_area import InputTextArea  # noqa: F401 F403
 from .pivot_table import PivotTableView, PivotTable, PivotTableCard  # noqa: F401 F403
 from .head import Head  # noqa: F401 F403
 from .title import Title  # noqa: F401 F403

solara/components/input_text_area.py

@@ -0,0 +1,86 @@
+from typing import Callable, Optional, Union, List
+from .input import use_change
+import solara
+from solara.alias import rv as v
+
+
+@solara.component
+def InputTextArea(
+    label: str,
+    value: Union[str, solara.Reactive[str]] = "",
+    on_value: Callable[[str], None] = None,
+    disabled: bool = False,
+    continuous_update: bool = False,
+    update_events: List[str] = ["focusout"],
+    error: Union[bool, str] = False,
+    message: Optional[str] = None,
+    auto_grow: bool = True,
+    rows: int = 5,
+):
+    r"""Free form text area input.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    text = solara.reactive("Hello\nWorld\n!!!")
+    continuous_update = solara.reactive(True)
+
+    @solara.component
+    def Page():
+        solara.Checkbox(label="Continuous update", value=continuous_update)
+        solara.InputTextArea("Enter some text", value=text, continuous_update=continuous_update.value)
+        with solara.Row():
+            solara.Button("Clear", on_click=lambda: text.set(""))
+            solara.Button("Reset", on_click=lambda: text.set("Hello\nWorld\n!!!"))
+        solara.Markdown(f"**You entered**: {text.value}")
+    ```
+
+
+    ## Arguments
+
+    * `label`: Label to display next to the slider.
+    * `value`: The currently entered value.
+    * `on_value`: Callback to call when the value changes.
+    * `disabled`: Whether the input is disabled.
+    * `continuous_update`: Whether to call the `on_value` callback on every change or only when the input loses focus or the enter key is pressed.
+    * `update_events`: A list of events that should trigger `on_value`. If continuous update is enabled, this will effectively be ignored,
+        since updates will happen every change.
+    * `auto_grow`: Whether the text area auto grows with more text.
+    * `rows`: Number of empty rows to display.
+    * `error`: If truthy, show the input as having an error (in red). If a string is passed, it will be shown as the error message.
+    * `message`: Message to show below the input. If `error` is a string, this will be ignored.
+    * `classes`: List of CSS classes to apply to the input.
+    * `style`: CSS style to apply to the input.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def set_value_cast(value):
+        reactive_value.value = str(value)
+
+    def on_v_model(value):
+        if continuous_update:
+            set_value_cast(value)
+
+    messages = []
+    if error and isinstance(error, str):
+        messages.append(error)
+    elif message:
+        messages.append(message)
+    text_area = v.Textarea(
+        v_model=reactive_value.value,
+        on_v_model=on_v_model,
+        label=label,
+        disabled=disabled,
+        error=bool(error),
+        messages=messages,
+        solo=True,
+        hide_details=True,
+        outlined=True,
+        rows=rows,
+        auto_grow=auto_grow,
+    )
+    use_change(text_area, set_value_cast, enabled=not continuous_update, update_events=update_events)
+    return text_area

solara/website/pages/documentation/components/input/input.py

@@ -13,6 +13,8 @@
 
 
 __doc__ += apidoc(solara.InputText.f)  # type: ignore
+__doc__ += "# InputTextArea"
+__doc__ += apidoc(solara.InputTextArea.f)  # type: ignore
 __doc__ += "# InputFloat"
 __doc__ += apidoc(solara.InputFloat.f)  # type: ignore
 __doc__ += "# InputInt"