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

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Checkbox

A checkbox is a common way to toggle boolean value. The checkbox component can be used on its own or in a group.
rx.checkbox("Check Me!")
Checkboxes can range in size and styles.
rx.hstack(
    rx.checkbox("Example", color_scheme="green", size="sm"),
    rx.checkbox("Example", color_scheme="blue", size="sm"),
    rx.checkbox(
        "Example", color_scheme="yellow", size="md"
    ),
    rx.checkbox(
        "Example", color_scheme="orange", size="md"
    ),
    rx.checkbox("Example", color_scheme="red", size="lg"),
)
Checkboxes can also have different visual states.
rx.hstack(
    rx.checkbox(
        "Example",
        color_scheme="green",
        size="lg",
        is_invalid=True,
    ),
    rx.checkbox(
        "Example",
        color_scheme="green",
        size="lg",
        is_disabled=True,
    ),
)
Checkboxes can be hooked up to a state using the on_change prop.

Unchecked

Example
class CheckboxState(rx.State):
    checked: bool = False

    def toggle(self):
        self.checked = not self.checked


def index():
    return rx.hstack(
        rx.cond(
            CheckboxState.checked,
            rx.text("Checked", color="green"),
            rx.text("Unchecked", color="red"),
        ),
        rx.checkbox(
            "Example",
            on_change=CheckboxState.set_checked,
        ),
        rx.box(
            "Example",
            on_blur=CheckboxState.toggle,
        ),
    )

Checkbox Group

You can group checkboxes together using checkbox group.
rx.checkbox_group(
    rx.checkbox("Example", color_scheme="green"),
    rx.checkbox("Example", color_scheme="blue"),
    rx.checkbox("Example", color_scheme="yellow"),
    rx.checkbox("Example", color_scheme="orange"),
    rx.checkbox("Example", color_scheme="red"),
    space="1em",
)

Checkbox

The Checkbox component is used in forms when a user needs to select multiple values from several options.

← ButtonEditable →

Copyright © 2023 Pynecone, Inc.