Input
A text field is an input field that users can type into. This component uses Radix's text field component.
Overview
The TextField component is used to capture user input and can include an optional slot for buttons and icons. It is based on the
element and supports common margin props.
Basic Example
rx.input(
rx.input.slot(
rx.icon(tag="search"),
),
placeholder="Search here...",
)Stateful Example with Blur Event
Hello World!
class TextfieldBlur1(rx.State):
text: str = "Hello World!"
def blur_example1():
return rx.vstack(
rx.heading(TextfieldBlur1.text),
rx.input(
rx.input.slot(
rx.icon(tag="search"),
),
placeholder="Search here...",
on_blur=TextfieldBlur1.set_text,
),
)Controlled Example
Hello World!
class TextfieldControlled1(rx.State):
text: str = "Hello World!"
def controlled_example1():
return rx.vstack(
rx.heading(TextfieldControlled1.text),
rx.input(
rx.input.slot(
rx.icon(tag="search"),
),
placeholder="Search here...",
value=TextfieldControlled1.text,
on_change=TextfieldControlled1.set_text,
),
)Real World Example
T
The Less I Know
Rock
ZB
Breathe Deeper
Rock
TF
Let It Happen
Rock
ZB
Borderline
Pop
TO
Lost In Yesterday
Rock
TO
Is It True
Rock
def song(title, initials: str, genre: str):
return rx.card(
rx.flex(
rx.flex(
rx.avatar(fallback=initials),
rx.flex(
rx.text(title, size="2", weight="bold"),
rx.text(
genre, size="1", color_scheme="gray"
),
direction="column",
spacing="1",
),
direction="row",
align_items="left",
spacing="1",
),
rx.flex(
rx.icon(tag="chevron_right"),
align_items="center",
),
justify="between",
)
)
def search():
return rx.card(
rx.flex(
rx.input(
rx.input.slot(
rx.icon(tag="search"),
),
placeholder="Search songs...",
),
rx.flex(
song("The Less I Know", "T", "Rock"),
song("Breathe Deeper", "ZB", "Rock"),
song("Let It Happen", "TF", "Rock"),
song("Borderline", "ZB", "Pop"),
song("Lost In Yesterday", "TO", "Rock"),
song("Is It True", "TO", "Rock"),
direction="column",
spacing="1",
),
direction="column",
spacing="3",
),
style={"maxWidth": 500},
)API Reference
rx.input
Captures user input with an optional slot for buttons and icons.
| Prop | Type | Values | Default | Interactive |
|---|---|---|---|
size | "1" | "2" | ... | | |
variant | "classic" | "surface" | ... | | |
color_scheme | "tomato" | "red" | ... | | |
radius | "none" | "small" | ... | | |
auto_complete | bool | | |
default_value | str | | |
disabled | bool | | |
max_length | int | | |
min_length | int | | |
name | str | | |
placeholder | str | | |
read_only | bool | | |
required | bool | | |
type | str | | |
value | Union[str, int, float] | | |
list | str | | |
accept | str | | |
alt | str | | |
auto_focus | bool | | |
capture | "True" | "False" | ... | | |
checked | bool | | |
default_checked | bool | | |
form | str | | |
form_action | str | | |
form_enc_type | str | | |
form_method | str | | |
form_no_validate | bool | | |
form_target | str | | |
max | Union[str, int, float] | | |
min | Union[str, int, float] | | |
multiple | bool | | |
pattern | str | | |
src | str | | |
step | Union[str, int, float] | |
Event Triggers
See the full list of default event triggers| Trigger | Description |
|---|---|
on_focus | Fired when the textarea is focused. |
on_blur | Fired when the textarea is blurred. |
on_change | Fired when the value of the textarea changes. |
on_key_down | Fired when a key is pressed down. |
on_key_up | Fired when a key is released. |
rx.input.slot
Contains icons or buttons associated with an Input.
| Prop | Type | Values | Default | Interactive |
|---|---|---|---|
color_scheme | "tomato" | "red" | ... | |