111 lines
3.3 KiB
Markdown
111 lines
3.3 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Input
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
from pcweb.pages.docs import library
|
|
```
|
|
|
|
# Input
|
|
|
|
The input component is used to receive text input from the user.
|
|
|
|
```python demo exec
|
|
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]({library.forms.debounce.path}) component.
|
|
|
|
```python demo exec
|
|
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.
|
|
|
|
```python demo exec
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo exec
|
|
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()),
|
|
)
|
|
```
|
|
|