✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

FormControl


Provides context such as filled/focused/error/required for form inputs.
This is a help text
rx.form_control(
    rx.form_label("First Name", html_for="email"),
    rx.checkbox("Example"),
    rx.form_helper_text("This is a help text"),
    is_required=True,
)
The example below shows a form error when then name length is 3 or less.
Name should be more than four characters
class FormErrorState(rx.State):
    name: str

    @rx.var
    def is_error(self) -> bool:
        return len(self.name) <= 3


def index():
    return rx.vstack(
        rx.form_control(
            rx.input(
                placeholder="name",
                on_blur=FormErrorState.set_name,
            ),
            rx.cond(
                FormErrorState.is_error,
                rx.form_error_message(
                    "Name should be more than four characters"
                ),
                rx.form_helper_text("Enter name"),
            ),
            is_invalid=FormErrorState.is_error,
            is_required=True,
        )
    )

FormControl


Provide context to form components.


  • Base Event Triggers

FormLabel


A form label component.


  • Base Event Triggers

FormErrorMessage


A form error message component.


  • No props for FormErrorMessage.

  • Base Event Triggers

FormHelperText


A form helper text component.


  • No props for FormHelperText.

  • Base Event Triggers

← FormButton →

Copyright © 2023 Pynecone, Inc.