Type something...
class InputState(rx.State):
text: str = "Type something..."
def index():
return rx.vstack(
rx.text(InputState.text, color_scheme="green"),
rx.input(
value=InputState.text,
on_change=InputState.set_text,
),
)
value
prop from the backend without the user experiencing input lag. For advanced use cases, you can tune the debounce delay by setting the debounce_timeout
when creating the Input component. You can find examples of how it is used in DebouncedInput component.class ClearInputState(rx.State):
text: str
def clear_text(self):
self.text = ""
def index():
return rx.vstack(
rx.text(ClearInputState.text),
rx.input(
on_change=ClearInputState.set_text,
value=ClearInputState.text,
),
rx.button(
"Clear", on_click=ClearInputState.clear_text
),
)
on_blur
event handler to only change the state when the user clicks away from the input. This is useful for performance reasons, as the state will only be updated when the user is done typing.Type something...
class InputBlurState(rx.State):
text: str = "Type something..."
def set_text(self, text: str):
self.text = text.upper()
def index():
return rx.vstack(
rx.text(InputBlurState.text),
rx.input(
placeholder="Type something...",
on_blur=InputBlurState.set_text,
),
)
type_
prop. For example you can create a password input or a date picker. rx.vstack(
rx.input(type_="password"),
rx.input(type_="date"),
)
rx.password
component as a shorthand for the password input.rx.password()
{}
class InputFormState(rx.State):
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
return [
rx.set_value(field_id, "")
for field_id in form_data
]
def index():
return rx.vstack(
rx.form(
rx.vstack(
rx.input(
placeholder="First Name",
id="first_name",
),
rx.input(
placeholder="Last Name", id="last_name"
),
rx.button("Submit", type_="submit"),
),
on_submit=InputFormState.handle_submit,
),
rx.divider(),
rx.heading("Results"),
rx.text(InputFormState.form_data.to_string()),
)
The Input component is a component that is used to get user input in a text field.