ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

表单

Checkbox

rx.checkbox

官方文档

工坊订单

请在注册页加一个“同意条款”复选框。勾选之前，注册按钮不能点。

rx.checkbox 用来接收一个开/关值。用于同意条款、“不再显示”、从列表中多选这类回答“是/否”的地方。第一个参数传入文字，旁边就会出现标签，点标签也能勾选。

Basic Checkbox

rx.checkbox("Basic Checkbox")

试着改属性

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 同时改变方框和标签文字的大小，spacing 是方框与标签之间的间距。

属性	取值	默认值	用途
第一个参数（`text`）	字符串	`""`	旁边的标签
`checked`	`True` / `False` / Var	无	受控的值（配合 `on_change`）
`default_checked`	`True` / `False`	`False`	只在开始时设定一次的值（非受控）
`size`	`"1"` ~ `"3"`	`"2"`	方框与标签大小
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	外观
`color_scheme`, `high_contrast`	Radix 颜色名 / `True`	主题值	勾选后的颜色与对比度
`spacing`	`"0"` ~ `"9"`	`"2"`	方框与标签的间距
`disabled`, `required`	`True` / `False`	`False`	禁用；必须勾选才能提交
`name`, `value`	字符串	无 / `"on"`	表单提交时的名字和值
`on_change`	事件		勾选状态变化时触发，传入 `True`/`False`

用 on_change 取值

每次勾选，on_change 都会传入新值（True 或 False）。这里没有给 checked，所以方框的状态由浏览器保管，State 只是把收到的值记下来。

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),
)

受控复选框：checked + on_change

把 State 的值交给 checked，方框就始终显示这个值。用户点击时用 on_change 更新 State；按钮或其他复选框改了 State，方框也会跟着变。官方文档正文把它写成 input 属性，但 0.10 中实际的属性名是 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"),
    ),
)

初始值与禁用

不需要 State、只想设定初始状态时，用 default_checked（非受控）。disabled=True 时无法点击。

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",
)

在表单中使用

在表单里，name 是提交数据的键。只有勾选的方框会以 "on"（或 value 给的值）进入数据，未勾选的方框根本不会出现。所以在处理器里要用 form_data.get("news") 这样读取。required=True 的方框必须勾选才能提交。

官方文档的表单示例用 label= 传文字，但在 0.10 的 rx.checkbox 中，标签是第一个参数（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())),
    ),
)

完成订单

用 checked 让 State 掌管是否同意，注册按钮用 disabled=~CheckboxSignupState.agreed 在同意前保持禁用。~ 是 Var 的取反（not）。

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",
    ),
)

工坊笔记

用 rx.checkbox("标签") 创建，on_change 传入 True/False。
要受控就用 checked + on_change，只定初始值就用 default_checked。
在表单中只有勾选的方框以 name: "on"（或 value）进入数据。缺失的键用 .get() 读取。
外观用 size · variant · color_scheme · spacing，提交条件用 required。

← 上一课

表单 · Text Area

下一课 →

表单 · Switch

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex