ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Formularios

Input

rx.inputrx.input.slot

Documentación oficial

Pedido del taller

Crea una casilla para suscribirse al boletín. Debe recoger una línea con el correo y no enviarse si el formato es incorrecto.

rx.input es una casilla para escribir texto de una sola línea. Se usa para valores cortos como una búsqueda, un nombre, un correo o una contraseña. Si necesitas varias líneas, usa Text Area.

rx.input(placeholder="Search the docs")

Prueba las propiedades

Al cambiar type, la misma casilla se convierte en un campo de contraseña, un selector de fecha o un selector de color. El resto de propiedades deciden su aspecto.

Prueba las propiedades

placeholder

type

variant

size

color

radius

disabled

read_only

rx.input(placeholder="Search the docs", type="text", variant="surface", size="2", color_scheme="indigo", radius="medium", disabled=False, read_only=False)

variant tiene tres opciones: classic · surface · soft. read_only solo muestra el valor; disabled atenúa la casilla y además impide el foco.

Propiedad	Valores	Por defecto	Uso
`placeholder`	Cadena	Ninguno	Texto de ayuda atenuado que se ve cuando está vacía
`type`	`"text"` `"password"` `"email"` `"number"` `"date"` …	`"text"`	Tipo de entrada, igual que en HTML `<input type>`
`value` / `default_value`	Cadena · número	Ninguno	Valor controlado / valor que se pone solo al principio
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aspecto
`size`	`"1"` ~ `"3"`	`"2"`	Altura y tamaño de letra
`color_scheme`, `radius`	Nombre de color Radix / `"none"` ~ `"full"`	Valor del tema	Color de acento y esquinas
`name`, `required`	Cadena / `True`	Ninguno	Nombre usado al enviar el formulario; impide el envío si está vacía
`max_length`, `min_length`, `pattern`	Número / expresión regular	Ninguno	Longitud y formato que comprueba el navegador
`min`, `max`, `step`	Número	Ninguno	Rango e intervalo para `type="number"`, `"date"`, etc.
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	Bloquear, solo lectura, foco nada más abrir la página
`auto_complete`	`True` / `False`	Valor del navegador	Autocompletado del navegador. La documentación oficial menciona cadenas como `"off"`, pero 0.10 solo acepta bool
`on_change`	Evento		Al cambiar el valor. Pasa el valor nuevo (cadena)
`on_blur`, `on_focus`	Evento		Al perder / ganar el foco. `on_blur` también pasa el valor
`on_key_down`, `on_key_up`	Evento		Al pulsar / soltar una tecla. Pasa el nombre de la tecla

on_blur: una vez, al terminar de escribir

on_blur se llama una sola vez, cuando el foco sale de la casilla. Al hacer clic fuera o pasar a otra con Tab, el valor de ese momento llega al State. Es lo adecuado cuando no hace falta llamar al servidor con cada letra.

Hello World!

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

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputBlurState.text, size="5"),
    rx.input(placeholder="Type, then click outside", on_blur=InputBlurState.set_text),
)

Entrada controlada: value + on_change

Si pasas a value un valor del State y lo actualizas con on_change, el contenido de la casilla coincide siempre con el State. Esto se llama entrada controlada (controlled). Si el servidor cambia el valor, la casilla también cambia.

Cuando rx.input recibe value y on_change a la vez, se envuelve internamente en una entrada con debounce (DebounceInput). Mientras escribes, el texto aparece al instante en pantalla y se envía al servidor una sola vez cuando haces una breve pausa (300 ms por defecto). Por eso la escritura no se entrecorta aunque el valor lo tenga el State.

Hello World!

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

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputControlledState.text, size="5"),
    rx.input(
        placeholder="Type here",
        value=InputControlledState.text,
        on_change=InputControlledState.set_text,
    ),
)

Si usas solo on_change u on_blur, sin value, es una entrada no controlada (uncontrolled). El valor inicial se pone con default_value y, a partir de ahí, es el navegador quien guarda el valor.

Slots: añadir iconos y texto

Si pones rx.input.slot como hijo, se coloca un icono o un texto corto dentro de la casilla. Con side="right" va a la derecha. El slot también acepta su propio color_scheme.

@example.com

rx.vstack(
    rx.input(
        rx.input.slot(rx.icon("search", size=16)),
        placeholder="Search the docs",
    ),
    rx.input(
        rx.input.slot(rx.icon("at-sign", size=16)),
        rx.input.slot(rx.text("@example.com", size="1"), side="right"),
        placeholder="username",
    ),
)

Tipos de entrada (type)

type acepta los mismos valores que HTML <input type>: "text" (por defecto), "password", "email", "number", "date", "time", "url", "color", etc., y el navegador muestra la herramienta de entrada adecuada. La lista completa está en la documentación de input de MDN.

rx.vstack(
    rx.input(placeholder="Username", type="text"),
    rx.input(placeholder="Password", type="password"),
    rx.input(placeholder="Email", type="email"),
    rx.input(type="number", min=0, max=10, step=1, default_value="3"),
    rx.input(type="date"),
    rx.input(type="color", default_value="#3e63dd", width="80px"),
)

Enviar con un formulario

Una entrada dentro de un formulario necesita name para aparecer en los datos enviados como nombre: valor. Con required=True, el navegador impide el envío si está vacía. pattern y max_length también los comprueba el navegador antes de enviar. La segunda casilla de abajo solo acepta tres dígitos.

Results:

{}

class InputFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.input(name="username", placeholder="Username", required=True),
                rx.input(name="code", placeholder="3 digits", pattern="[0-9]{3}", max_length=3),
                rx.button("Submit", type="submit"),
            ),
            on_submit=InputFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(InputFormState.form_data.to_string())),
    ),
)

El formulario en sí se trata en detalle en la página Form.

Cambiar el valor sin State: rx.set_value

rx.set_value("id", valor) cambia directamente el valor de la entrada indicada por id. Sirve para vaciar o rellenar una casilla sin crear una variable de State.

rx.hstack(
    rx.input(id="input_erase_demo", default_value="Erase me"),
    rx.button("Erase", on_click=rx.set_value("input_erase_demo", "")),
    rx.button("Fill", on_click=rx.set_value("input_erase_demo", "Hello"), variant="soft"),
)

Eventos de teclado

on_key_down pasa el nombre de la tecla ("Enter", "a" …) cada vez que se pulsa una. Si quieres ejecutar algo con Enter, normalmente es más sencillo meter la entrada en un formulario.

Last key: -

class InputKeyState(rx.State):
    last_key: str = "-"

    @rx.event
    def on_key(self, key: str):
        self.last_key = key


rx.vstack(
    rx.input(placeholder="Press any key", on_key_down=InputKeyState.on_key),
    rx.text("Last key: ", rx.code(InputKeyState.last_key)),
)

Completar el pedido

Con type="email" y required=True, el navegador comprueba primero el formato, y el formulario gestiona tanto Enter como el botón de envío. De las direcciones recibidas solo se muestran las tres últimas.

class InputNewsletterState(rx.State):
    emails: list[str] = []

    @rx.event
    def subscribe(self, form_data: dict):
        email = form_data.get("email", "").strip()
        if email and email not in self.emails:
            self.emails = (self.emails + [email])[-3:]


rx.vstack(
    rx.form(
        rx.hstack(
            rx.input(
                rx.input.slot(rx.icon("mail", size=16)),
                name="email",
                type="email",
                placeholder="you@example.com",
                required=True,
                flex="1",
            ),
            rx.button("Subscribe", type="submit"),
            width="100%",
        ),
        on_submit=InputNewsletterState.subscribe,
        reset_on_submit=True,
        width="100%",
    ),
    rx.foreach(InputNewsletterState.emails, lambda e: rx.badge(e, variant="soft")),
    width="100%",
    max_width="420px",
)

Notas del taller

Se crea con rx.input(placeholder=...) y el tipo de entrada se elige con type.
on_blur, una vez al terminar de escribir; value + on_change, entrada controlada (con debounce automático).
Los iconos van en rx.input.slot; a la derecha, con side="right".
En un formulario, name es la clave, y el navegador comprueba required · pattern · max_length.
Para cambiar el valor sin State: rx.set_value("id", valor).

← Anterior

Formularios · Button

Formularios · Text Area

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex