124 lines
2.9 KiB
Markdown
124 lines
2.9 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.text_field
|
|
- rx.radix.text_field.root
|
|
- rx.radix.text_field.input
|
|
- rx.radix.text_field.slot
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# TextField
|
|
|
|
A text field is an input field that users can type into. This component uses Radix's [text field](https://radix-ui.com/primitives/docs/components/text-field) component.
|
|
|
|
## Basic Example
|
|
|
|
```python demo
|
|
rx.radix.text_field.root(
|
|
rx.radix.text_field.slot(
|
|
rx.icon(tag="search"),
|
|
),
|
|
rx.radix.text_field.input(
|
|
placeholder="Search here...",
|
|
),
|
|
)
|
|
```
|
|
|
|
```python demo exec
|
|
class TextfieldBlur1(rx.State):
|
|
text: str = "Hello World!"
|
|
|
|
|
|
def blur_example1():
|
|
return rx.vstack(
|
|
rx.heading(TextfieldBlur1.text),
|
|
rx.radix.text_field.root(
|
|
rx.radix.text_field.slot(
|
|
rx.icon(tag="search"),
|
|
),
|
|
rx.radix.text_field.input(
|
|
placeholder="Search here...",
|
|
on_blur=TextfieldBlur1.set_text,
|
|
),
|
|
|
|
)
|
|
)
|
|
```
|
|
|
|
```python demo exec
|
|
class TextfieldControlled1(rx.State):
|
|
text: str = "Hello World!"
|
|
|
|
|
|
def controlled_example1():
|
|
return rx.vstack(
|
|
rx.heading(TextfieldControlled1.text),
|
|
rx.radix.text_field.root(
|
|
rx.radix.text_field.slot(
|
|
rx.icon(tag="search"),
|
|
),
|
|
rx.radix.text_field.input(
|
|
placeholder="Search here...",
|
|
value=TextfieldControlled1.text,
|
|
on_change=TextfieldControlled1.set_text,
|
|
),
|
|
),
|
|
)
|
|
```
|
|
|
|
# Real World Example
|
|
|
|
```python demo exec
|
|
|
|
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.radix.text_field.root(
|
|
rx.radix.text_field.slot(
|
|
rx.icon(tag="search"),
|
|
),
|
|
rx.radix.text_field.input(
|
|
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},
|
|
)
|
|
```
|