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] = ["blur", "keyup.enter"],
    error: Union[bool, str] = False,
    message: Optional[str] = None,
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
):

    ...

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 passsword", 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 passsword

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.

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

    ...

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.

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

    ...

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.