Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

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.chakra.checkbox("Check Me!")

Checkboxes can range in size and styles.

rx.chakra.hstack(
    rx.chakra.checkbox(
        "Example", color_scheme="green", size="sm"
    ),
    rx.chakra.checkbox(
        "Example", color_scheme="blue", size="sm"
    ),
    rx.chakra.checkbox(
        "Example", color_scheme="yellow", size="md"
    ),
    rx.chakra.checkbox(
        "Example", color_scheme="orange", size="md"
    ),
    rx.chakra.checkbox(
        "Example", color_scheme="red", size="lg"
    ),
)

Checkboxes can also have different visual states.

rx.chakra.hstack(
    rx.chakra.checkbox(
        "Example",
        color_scheme="green",
        size="lg",
        is_invalid=True,
    ),
    rx.chakra.checkbox(
        "Example",
        color_scheme="green",
        size="lg",
        is_disabled=True,
    ),
)

Checkboxes can be hooked up to a state using the on_change prop.

Unchecked

import reflex as rx


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

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


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

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

PropTypeDescriptionValues
color_schemeLiteral

Color scheme for checkbox. Options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

sizeLiteral

"sm" | "md" | "lg"

is_checkedbool

If true, the checkbox will be checked.

is_disabledbool

If true, the checkbox will be disabled

is_focusablebool

If true and is_disabled is passed, the checkbox will remain tabbable but not interactive

is_indeterminatebool

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the is_checked var.

is_invalidbool

If true, the checkbox is marked as invalid. Changes style of unchecked state.

is_read_onlybool

If true, the checkbox will be readonly

is_requiredbool

If true, the checkbox input is marked as required, and required attribute will be added

namestr

The name of the input field in a checkbox (Useful for form submission).

valuestr

The value of the input field when checked (use is_checked prop for a bool)

spacingstr

The spacing between the checkbox and its label text (0.5rem)

Event Triggers

TriggerDescription
on_change

Fired when the checkbox is checked or unchecked

Did you find this useful?

HomeGalleryChangelogIntroductionHosting