Library
/
Chakra
/
Forms
/
Input
The input component is used to receive text input from the user.
Type something...
class InputState(rx.State):
text: str = "Type something..."
def basic_input_example():
return rx.chakra.vstack(
rx.chakra.text(
InputState.text, color_scheme="green"
),
rx.chakra.input(
value=InputState.text,
on_change=InputState.set_text,
),
)"Behind the scene, the input component is implemented using debounced input to avoid sending individual state updates per character to the backend while the user is still typing.
This allows a state var to directly control the 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 the DebouncedInput component.
class ClearInputState(rx.State):
text: str
def clear_text(self):
self.text = ""
def clear_input_example():
return rx.chakra.vstack(
rx.chakra.text(ClearInputState.text),
rx.chakra.input(
on_change=ClearInputState.set_text,
value=ClearInputState.text,
),
rx.chakra.button(
"Clear", on_click=ClearInputState.clear_text
),
)The input component can also use the 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 input_blur_example():
return rx.chakra.vstack(
rx.chakra.text(InputBlurState.text),
rx.chakra.input(
placeholder="Type something...",
on_blur=InputBlurState.set_text,
),
)You can change the type of input by using the type_ prop.
For example you can create a password input or a date picker.
rx.chakra.vstack(
rx.chakra.input(type_="password"),
rx.chakra.input(type_="date"),
)We also provide a rx.chakra.password component as a shorthand for the password input.
rx.chakra.password()You can also use forms in combination with inputs.
This is useful for collecting multiple values with a single event handler and automatically supporting Enter key submit functionality that desktop users expect.
Results
{}
class InputFormState(rx.State):
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
def input_form_example():
return rx.chakra.vstack(
rx.chakra.form(
rx.chakra.vstack(
rx.chakra.input(
placeholder="First Name",
id="first_name",
),
rx.chakra.input(
placeholder="Last Name", id="last_name"
),
rx.chakra.button("Submit", type_="submit"),
),
on_submit=InputFormState.handle_submit,
),
rx.chakra.divider(),
rx.chakra.heading("Results"),
rx.chakra.text(
InputFormState.form_data.to_string()
),
)The Input component is a component that is used to get user input in a text field.
Event Triggers
Did you find this useful?
