Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Forms

/

Formcontrol

Form control provides context such as filled/focused/error/required for form inputs.

This is a help text
rx.chakra.form_control(
    rx.chakra.form_label("First Name", html_for="email"),
    rx.chakra.checkbox("Example"),
    rx.chakra.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
import reflex as rx


class FormErrorState(rx.State):
    name: str

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


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

Provide context to form components.

PropTypeDescriptionValues
is_disabledbool

If true, the form control will be disabled.

is_invalidbool

If true, the form control will be invalid.

is_read_onlybool

If true, the form control will be readonly

is_requiredbool

If true, the form control will be required.

labelstr

The label text used to inform users as to what information is requested for a text field.

Event Triggers

No component specific event triggers

A form label component.

PropTypeDescriptionValues
html_forstr

Link

Event Triggers

No component specific event triggers

A form error message component.

Props

No component specific props

Event Triggers

No component specific event triggers

A form helper text component.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting