Checkbox

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

❯buridan add checkbox

Component Guide

Use the following to build the Checkbox component.

from components.ui.checkbox import checkbox

checkbox.root(
    checkbox.indicator(),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/core/hugeicon.py

components/ui/checkbox.py

Examples

Basic

Pair the checkbox with field.root and field.label for proper layout and labeling. checkbox.root's id is what html_for should point to.

Props used: id, default_checked on checkbox.root; html_for on field.label.

Accept terms and conditions

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.root(
                checkbox.indicator(),
                id="terms-checkbox-basic",
            ),
            field.label(
                "Accept terms and conditions",
                html_for="terms-checkbox-basic",
            ),
            orientation="horizontal",
        ),
        class_name="mx-auto max-w-sm",
    )

Description

Use field.description for helper text underneath the label.

Props used: id, default_checked on checkbox.root; html_for on field.label.

Accept terms and conditions

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 field.group(
        field.root(
            checkbox.root(
                checkbox.indicator(),
                id="terms-checkbox-desc",
                name="terms-checkbox-desc",
                default_checked=True,
            ),
            field.content(
                field.label(
                    "Accept terms and conditions",
                    html_for="terms-checkbox-desc",
                ),
                field.description(
                    "By clicking this checkbox, you agree to the terms and conditions."
                ),
            ),
            orientation="horizontal",
        ),
        class_name="mx-auto w-72",
    )

Disabled

Use the disabled prop to prevent interaction — the wrapper's has-[:disabled] styling dims it automatically, no extra data attribute needed.

Props used: id, disabled on checkbox.root; html_for on field.label.

Enable notifications

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.root(
                checkbox.indicator(),
                id="toggle-checkbox-disabled",
                name="toggle-checkbox-disabled",
                disabled=True,
            ),
            field.label(
                "Enable notifications",
                html_for="toggle-checkbox-disabled",
            ),
            orientation="horizontal",
            data_disabled=True,
        ),
        class_name="mx-auto w-56",
    )

Group

Use multiple field.roots inside a fieldset to build a checkbox list.

Props used: id, default_checked on checkbox.root; html_for on field.label.

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

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.root(
                    checkbox.indicator(),
                    id="hard-disks",
                    default_checked=True,
                ),
                field.label(
                    "Hard disks", html_for="hard-disks", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox.root(
                    checkbox.indicator(),
                    id="ext-disks",
                    default_checked=True,
                ),
                field.label(
                    "External disks", html_for="ext-disks", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox.root(
                    checkbox.indicator(),
                    id="cds-dvds",
                ),
                field.label(
                    "CDs, DVDs, and iPods",
                    html_for="cds-dvds",
                    class_name="font-normal",
                ),
                orientation="horizontal",
            ),
            field.root(
                checkbox.root(
                    checkbox.indicator(),
                    id="servers",
                ),
                field.label(
                    "Connected servers", html_for="servers", class_name="font-normal"
                ),
                orientation="horizontal",
            ),
            class_name="flex flex-col w-full",
        ),
    )

API Reference

checkbox.root

Renders a <label> wrapping a visually-hidden <input type="checkbox"> and the indicator — clicking anywhere in the root toggles it, with no extra JS wiring required.

checkbox.root(
    checkbox.indicator(),
    id="terms",
    default_checked=True,
)

Prop	Type	Default
`id`	`str`	auto-passed to input
`checked`	`bool`
`default_checked`	`bool`
`disabled`	`bool`	`False`
`required`	`bool`	`False`
`name`	`str`
`value`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

If no children are passed, a default checkbox.indicator() (tick icon) is rendered automatically.

checkbox.indicator

The tick icon shown when the checkbox is checked, via peer-checked:grid — no fallback_id/menu_id-style wiring needed, it's a direct sibling of the input.

checkbox.indicator(hi("Tick02Icon"))

Prop	Type	Default
`class_name`	`str`	`""`

If no children are passed, hi("Tick02Icon") is used by default.