Input fields

This page contains all the input fields available in Solara.

InputText

Free form text input.

@solara.component
def InputText(
    label: str,
    value: Union[str, solara.Reactive[str]] = "",
    on_value: Callable[[str], None] = None,
    disabled: bool = False,
    password: bool = False,
    continuous_update: bool = False,
    update_events: List[str] = ["focusout", "keyup.enter"],
    error: Union[bool, str] = False,
    message: Optional[str] = None,
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
    autofocus: bool = False,
):

    ...

Basic example:

import solara

text = solara.reactive("Hello world!")
continuous_update = solara.reactive(True)

@solara.component
def Page():
    solara.Checkbox(label="Continuous update", value=continuous_update)
    solara.InputText("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 world"))
    solara.Markdown(f"**You entered**: {text.value}")

Continuous update

Enter some text

You entered: Hello world!

Live output

Password input:

This will not show the entered text.

import solara

password = solara.reactive("Super secret")
continuous_update = solara.reactive(True)

@solara.component
def Page():
    solara.Checkbox(label="Continuous update", value=continuous_update)
    solara.InputText("Enter a password", value=password, continuous_update=continuous_update.value, password=True)
    with solara.Row():
        solara.Button("Clear", on_click=lambda: password.set(""))
        solara.Button("Reset", on_click=lambda: password.set("Super secret"))
    solara.Markdown(f"**You entered**: {password.value}")

Continuous update

Enter a password

You entered: Super secret

Live output

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.
password: Whether the input is a password input (typically shows input text obscured with an asterisk).
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.
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.
autofocus: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur during page load and only one component per page can have autofocus active.

InputTextArea

Free form text area input.

@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,
):

    ...

Basic example:

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}")

Continuous update

You entered: Hello World !!!

Live output

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.

InputFloat

Numeric input (floats).

@solara.component
def InputFloat(
    label: str,
    value: Union[None, float, solara.Reactive[float], solara.Reactive[Optional[float]]] = 0,
    on_value: Union[None, Callable[[Optional[float]], None], Callable[[float], None]] = None,
    disabled: bool = False,
    optional: bool = False,
    continuous_update: bool = False,
    clearable: bool = False,
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
    autofocus: bool = False,
):

    ...

Basic example:

import solara

float_value = solara.reactive(42.0)
continuous_update = solara.reactive(True)

@solara.component
def Page():
    solara.Checkbox(label="Continuous update", value=continuous_update)
    solara.InputFloat("Enter a float number", value=float_value, continuous_update=continuous_update.value)
    with solara.Row():
        solara.Button("Clear", on_click=lambda: float_value.set(42.0))
    solara.Markdown(f"**You entered**: {float_value.value}")

Continuous update

Enter a float number

You entered: 42.0

Live output

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.
optional: Whether the value can be None.
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.
clearable: Whether the input can be cleared.
classes: List of CSS classes to apply to the input.
style: CSS style to apply to the input.
autofocus: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur either during page load, or when the component becomes visible (for example, dialog being opened). Only one component per page should have autofocus on each such event.

InputInt

Numeric input (integers).

@solara.component
def InputInt(
    label: str,
    value: Union[None, int, solara.Reactive[int], solara.Reactive[Optional[int]]] = 0,
    on_value: Union[None, Callable[[Optional[int]], None], Callable[[int], None]] = None,
    disabled: bool = False,
    optional: bool = False,
    continuous_update: bool = False,
    clearable: bool = False,
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
    autofocus: bool = False,
):

    ...

Basic example:

import solara

int_value = solara.reactive(42)
continuous_update = solara.reactive(True)

@solara.component
def Page():
    solara.Checkbox(label="Continuous update", value=continuous_update)
    solara.InputInt("Enter an integer number", value=int_value, continuous_update=continuous_update.value)
    with solara.Row():
        solara.Button("Clear", on_click=lambda: int_value.set(42))
    solara.Markdown(f"**You entered**: {int_value.value}")

Continuous update

Enter an integer number

You entered: 42

Live output

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.
optional: Whether the value can be None.
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.
clearable: Whether the input can be cleared.
classes: List of CSS classes to apply to the input.
style: CSS style to apply to the input.
autofocus: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur either during page load, or when the component becomes visible (for example, dialog being opened). Only one component per page should have autofocus on each such event.

Autofocus Example

import solara
import solara.lab


@solara.component
def Page():
    show_dialog = solara.use_reactive(False)
    show_conditional = solara.use_reactive(False)
    with solara.Row():
        solara.Button("Show dialog", on_click=lambda: show_dialog.set(True))
        solara.Button("Show conditionally rendered element", on_click=lambda: show_conditional.set(not show_conditional.value))
    with solara.lab.ConfirmationDialog(open=show_dialog):
        solara.InputFloat("Float here", autofocus=True)
    if show_conditional.value:
        solara.InputFloat("Float here", autofocus=True)

Live output