Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

Input

The input component is used to receive text input from the user.

Type something...

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 component.

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.

Type something...

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.

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.

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.


Results

{}

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()
        ),
    )

The Input component is a component that is used to get user input in a text field.

PropTypeDescriptionValues
valuestr

State var to bind the input.

default_valuestr

The default value of the input.

placeholderstr

The placeholder text.

type_Literal

The type of input.

error_border_colorstr

The border color when the input is invalid.

focus_border_colorstr

The border color when the input is focused.

is_disabledbool

If true, the form control will be disabled. This has 2 side effects - The FormLabel will have data-disabled attribute - The form element (e.g, Input) will be disabled

is_invalidbool

If true, the form control will be invalid. This has 2 side effects - The FormLabel and FormErrorIcon will have data-invalid set to true - The form element (e.g, Input) will have aria-invalid set to true

is_read_onlybool

If true, the form control will be readonly.

is_requiredbool

If true, the form control will be required. This has 2 side effects - The FormLabel will show a required indicator - The form element (e.g, Input) will have aria-required set to true

variantLiteral

"outline" | "filled" | "flushed" | "unstyled"

sizeLiteral

"lg" | "md" | "sm" | "xs"

namestr

The name of the form field

Event Triggers

TriggerDescription
on_focus

Fired when the input is focused.

on_blur

Fired when the input lose focus.

on_change

Fired when the input value changes.

on_key_down

Fired when a key is pressed down.

on_key_up

Fired when a key is released.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting