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

The Less I Know

Rock

Breathe Deeper

Rock

Let It Happen

Rock

Borderline

Pop

Lost In Yesterday

Rock

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

TextFieldRoot

Captures user input with an optional slot for buttons and icons.

Test

Prop	Type	Default Value	Values
`size`	Union[Literal, Breakpoints]
`variant`	Literal
`color_scheme`	Literal
`radius`	Literal
`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]

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.