Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Input

/

Low

A text field is an input field that users can type into. This component uses Radix's text field component.

rx.input.root(
    rx.input.slot(
        rx.icon(tag="search"),
    ),
    rx.input.input(
        placeholder="Search here...",
    ),
)

Hello World!

class TextfieldBlur1(rx.State):
    text: str = "Hello World!"


def blur_example1():
    return rx.vstack(
        rx.heading(TextfieldBlur1.text),
        rx.input.root(
            rx.input.slot(
                rx.icon(tag="search"),
            ),
            rx.input.input(
                placeholder="Search here...",
                on_blur=TextfieldBlur1.set_text,
            ),
        ),
    )

Hello World!

class TextfieldControlled1(rx.State):
    text: str = "Hello World!"


def controlled_example1():
    return rx.vstack(
        rx.heading(TextfieldControlled1.text),
        rx.input.root(
            rx.input.slot(
                rx.icon(tag="search"),
            ),
            rx.input.input(
                placeholder="Search here...",
                value=TextfieldControlled1.text,
                on_change=TextfieldControlled1.set_text,
            ),
        ),
    )

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.root(
                rx.input.slot(
                    rx.icon(tag="search"),
                ),
                rx.input.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},
    )

High level wrapper for the Input component.

PropTypeDescriptionValues
sizeLiteral

Text field size "1" - "3"

variantLiteral

Variant of text field: "classic" | "surface" | "soft"

color_schemeLiteral

Override theme color for text field

radiusLiteral

Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"

auto_completebool

Whether the input should have autocomplete enabled

default_valuestr

The value of the input when initially rendered.

disabledbool

Disables the input

max_lengthstr

Specifies the maximum number of characters allowed in the input

min_lengthstr

Specifies the minimum number of characters required in the input

namestr

Name of the input, used when sending form data

placeholderstr

Placeholder text in the input

read_onlybool

Indicates whether the input is read-only

requiredbool

Indicates that the input is required

typestr

Specifies the type of input

valuestr

Value of the input

Event Triggers

TriggerDescription
on_focus

Function or event handler called when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.

on_blur

Function or event handler called when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.

on_change

The on_change event handler is called when the value or checked state of the component changes.

on_key_down

The on_key_down event handler is called when the user presses a key.

on_key_up

The on_key_up event handler is called when the user releases a key.

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

PropTypeDescriptionValues
sizeLiteral

Text field size "1" - "3"

variantLiteral

Variant of text field: "classic" | "surface" | "soft"

color_schemeLiteral

Override theme color for text field

radiusLiteral

Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"

Event Triggers

No component specific event triggers

The input part of a TextField, may be used by itself.

PropTypeDescriptionValues
acceptUnion

Accepted types of files when the input is file type

altUnion

Alternate text for input type="image"

auto_completeUnion

Whether the input should have autocomplete enabled

auto_focusUnion

Automatically focuses the input when the page loads

captureUnion

Captures media from the user (camera or microphone)

checkedUnion

Indicates whether the input is checked (for checkboxes and radio buttons)

default_checkedbool

The initial value (for checkboxes and radio buttons)

default_valuestr

The initial value for a text field

dirnameUnion

Name part of the input to submit in 'dir' and 'name' pair when form is submitted

disabledUnion

Disables the input

formUnion

Associates the input with a form (by id)

form_actionUnion

URL to send the form data to (for type="submit" buttons)

form_enc_typeUnion

How the form data should be encoded when submitting to the server (for type="submit" buttons)

form_methodUnion

HTTP method to use for sending form data (for type="submit" buttons)

form_no_validateUnion

Bypasses form validation when submitting (for type="submit" buttons)

form_targetUnion

Specifies where to display the response after submitting the form (for type="submit" buttons)

listUnion

References a datalist for suggested options

maxUnion

Specifies the maximum value for the input

max_lengthUnion

Specifies the maximum number of characters allowed in the input

min_lengthUnion

Specifies the minimum number of characters required in the input

minUnion

Specifies the minimum value for the input

multipleUnion

Indicates whether multiple values can be entered in an input of the type email or file

nameUnion

Name of the input, used when sending form data

patternUnion

Regex pattern the input's value must match to be valid

placeholderUnion

Placeholder text in the input

read_onlyUnion

Indicates whether the input is read-only

requiredUnion

Indicates that the input is required

sizeUnion

Specifies the visible width of a text control

srcUnion

URL for image inputs

stepUnion

Specifies the legal number intervals for an input

typeUnion

Specifies the type of input

use_mapUnion

Name of the image map used with the input

valueUnion

Value of the input

Event Triggers

TriggerDescription
on_focus

Function or event handler called when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.

on_blur

Function or event handler called when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.

on_change

The on_change event handler is called when the value or checked state of the component changes.

on_key_down

The on_key_down event handler is called when the user presses a key.

on_key_up

The on_key_up event handler is called when the user releases a key.

Contains icons or buttons associated with an Input.

PropTypeDescriptionValues
color_schemeLiteral

Override theme color for text field slot

Event Triggers

No component specific event triggers

Did you find this useful?