︲

︲

Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component checkbox
from components.ui.checkbox import checkbox

Anatomy

Use the following composition to build a Checkbox component.

checkbox.root( checkbox.indicator(), )

Examples

Basic

Pair the checkbox with field.root and field.label for proper layout and labeling.

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_basic():
    return rx.el.div(
        field.root(
            checkbox(id="terms-checkbox-basic"),
            field.label(
                "Accept terms and conditions",
                html_for="terms-checkbox-basic",
            ),
            orientation="horizontal",
        ),
        class_name="mx-auto w-56",
    )

Description

Use field.description for helper text.

By clicking this checkbox, you agree to the terms and conditions.

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_description() -> rx.Component:
    return rx.el.div(
        field.root(
            checkbox(
                id="terms-checkbox-desc",
                name="terms-checkbox-desc",
                default_checked=True,
            ),
            rx.el.div(
                field.label(
                    "Accept terms and conditions",
                    html_for="terms-checkbox-desc",
                ),
                field.description(
                    "By clicking this checkbox, you agree to the terms and conditions."
                ),
                class_name="flex flex-col",
            ),
            orientation="horizontal",
        ),
        class_name="mx-auto w-72",
    )

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the component for disabled styles.

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_disabled() -> rx.Component:
    return rx.el.div(
        field.root(
            checkbox(
                id="toggle-checkbox-disabled",
                name="toggle-checkbox-disabled",
                disabled=True,
            ),
            field.label(
                "Enable notifications",
                html_for="toggle-checkbox-disabled",
            ),
            orientation="horizontal",
            disabled=True,
        ),
        class_name="mx-auto w-56",
    )

Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

import reflex as rx

from components.ui.checkbox import checkbox
from components.ui.field import field


def checkbox_group() -> rx.Component:
    return rx.el.fieldset(
        rx.el.legend(
            "Show these items on the desktop:",
            class_name="mb-1.5 font-medium text-sm text-foreground",
        ),
        rx.el.p(
            "Select the items you want to show on the desktop.",
            class_name="mb-4 text-sm text-muted-foreground",
        ),
        rx.el.div(
            field.root(
                checkbox(id="hard-disks", default_checked=True),
                field.label(
                    "Hard disks", html_for="hard-disks", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox(id="ext-disks", default_checked=True),
                field.label(
                    "External disks", html_for="ext-disks", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox(id="cds-dvds"),
                field.label(
                    "CDs, DVDs, and iPods",
                    html_for="cds-dvds",
                    class_name="font-normal",
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox(id="servers"),
                field.label(
                    "Connected servers", html_for="servers", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            class_name="flex flex-col w-full",
        ),
    )