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

Checkbox

rx.checkbox

Documentación oficial

Pedido del taller

Pon una casilla de «Acepto los términos» en la pantalla de registro. Mientras no esté marcada, no se debe poder pulsar el botón de registro.

rx.checkbox es una casilla que recoge un único valor de encendido/apagado. Se usa donde la respuesta es sí o no: aceptar unos términos, "No volver a mostrar", elegir varios elementos de una lista. Si pasas un texto como primer argumento, se añade una etiqueta al lado, y al hacer clic en ella también se marca la casilla.

Basic Checkbox

rx.checkbox("Basic Checkbox")

Prueba las propiedades

Remember me

text

size

variant

color

spacing

high_contrast

disabled

rx.checkbox("Remember me", size="2", variant="surface", color_scheme="indigo", spacing="2", high_contrast=False, disabled=False)

size cambia a la vez la casilla y el texto de la etiqueta; spacing es la separación entre la casilla y la etiqueta.

Propiedad	Valores	Por defecto	Uso
Primer argumento (`text`)	Cadena	`""`	Etiqueta que aparece al lado
`checked`	`True` / `False` / Var	Ninguno	Valor controlado (junto con `on_change`)
`default_checked`	`True` / `False`	`False`	Valor que se fija solo al principio (no controlado)
`size`	`"1"` ~ `"3"`	`"2"`	Tamaño de la casilla y la etiqueta
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aspecto
`color_scheme`, `high_contrast`	Nombre de color Radix / `True`	Valor del tema	Color al marcar y contraste
`spacing`	`"0"` ~ `"9"`	`"2"`	Separación entre casilla y etiqueta
`disabled`, `required`	`True` / `False`	`False`	Bloquear; hay que marcarla para poder enviar
`name`, `value`	Cadena	Ninguno / `"on"`	Nombre y valor al enviar el formulario
`on_change`	Evento		Al cambiar la marca. Pasa `True`/`False`

Recibir el valor con on_change

Cada vez que marcas o desmarcas, on_change pasa el valor nuevo (True o False). Aquí no se da checked, así que el estado de la casilla lo guarda el navegador y el State solo apunta el valor que recibe.

false

Click me

class CheckboxBasicState(rx.State):
    checked: bool = False

    @rx.event
    def set_checked(self, value: bool):
        self.checked = value


rx.vstack(
    rx.heading(CheckboxBasicState.checked.to_string(), size="5"),
    rx.checkbox("Click me", on_change=CheckboxBasicState.set_checked),
)

Checkbox controlado: checked + on_change

Si pasas a checked un valor del State, la casilla muestra siempre ese valor. Cuando el usuario hace clic, on_change actualiza el State, y si un botón u otra casilla cambian el State, la casilla también cambia. El texto de la documentación oficial llama a esto la propiedad input, pero en 0.10 la propiedad se llama checked.

All fruits

Apples

Pears

class CheckboxControlState(rx.State):
    apples: bool = True
    pears: bool = False

    @rx.event
    def set_apples(self, value: bool):
        self.apples = value

    @rx.event
    def set_pears(self, value: bool):
        self.pears = value

    @rx.event
    def set_all(self, value: bool):
        self.apples = value
        self.pears = value


rx.vstack(
    rx.checkbox(
        "All fruits",
        checked=CheckboxControlState.apples & CheckboxControlState.pears,
        on_change=CheckboxControlState.set_all,
    ),
    rx.checkbox("Apples", checked=CheckboxControlState.apples, on_change=CheckboxControlState.set_apples, margin_left="1.5em"),
    rx.checkbox("Pears", checked=CheckboxControlState.pears, on_change=CheckboxControlState.set_pears, margin_left="1.5em"),
    rx.hstack(
        rx.button("Check all", on_click=CheckboxControlState.set_all(True), size="1", variant="soft"),
        rx.button("Clear", on_click=CheckboxControlState.set_all(False), size="1", variant="soft", color_scheme="gray"),
    ),
)

Valor inicial y desactivado

Si no necesitas State y solo quieres fijar el estado inicial, usa default_checked (no controlado). Con disabled=True no se puede pulsar.

Starts checked

Starts empty

Locked on

rx.flex(
    rx.checkbox("Starts checked", default_checked=True),
    rx.checkbox("Starts empty"),
    rx.checkbox("Locked on", default_checked=True, disabled=True),
    spacing="4",
    wrap="wrap",
)

En un formulario

Dentro de un formulario, name es la clave de los datos enviados. Solo las casillas marcadas entran como "on" (o el valor que des en value); las no marcadas no aparecen en absoluto. Por eso en el handler se leen con form_data.get("news"). Una casilla con required=True debe estar marcada para poder enviar.

El ejemplo de formulario de la documentación oficial pasa el texto con label=, pero en el rx.checkbox de 0.10 la etiqueta es el primer argumento (text).

Results:

{}

class CheckboxFormState(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.vstack(
                rx.checkbox("Accept terms and conditions", name="terms", required=True),
                rx.checkbox("Send me news", name="news", value="yes"),
                rx.button("Submit", type="submit"),
            ),
            on_submit=CheckboxFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(CheckboxFormState.form_data.to_string())),
    ),
)

Completar el pedido

El State guarda si se han aceptado los términos con checked, y el botón de registro queda bloqueado hasta entonces con disabled=~CheckboxSignupState.agreed. ~ es la negación (not) de un Var.

I agree to the Terms of Service

class CheckboxSignupState(rx.State):
    agreed: bool = False
    done: bool = False

    @rx.event
    def set_agreed(self, value: bool):
        self.agreed = value
        self.done = False

    @rx.event
    def sign_up(self):
        self.done = True


rx.card(
    rx.vstack(
        rx.checkbox(
            "I agree to the Terms of Service",
            checked=CheckboxSignupState.agreed,
            on_change=CheckboxSignupState.set_agreed,
        ),
        rx.button("Sign up", on_click=CheckboxSignupState.sign_up, disabled=~CheckboxSignupState.agreed),
        rx.cond(CheckboxSignupState.done, rx.badge("Welcome aboard!", color_scheme="green")),
        spacing="3",
    ),
)

Notas del taller

Se crea con rx.checkbox("etiqueta") y on_change pasa True/False.
Para controlarla, checked + on_change; para fijar solo el valor inicial, default_checked.
En un formulario solo entran las casillas marcadas, como name: "on" (o value). Las claves que faltan se leen con .get().
El aspecto se ajusta con size · variant · color_scheme · spacing; la condición de envío, con required.

← Anterior

Formularios · Text Area

Formularios · Switch

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