コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.checkbox公式ドキュメント
工房の注文書
会員登録の画面に「利用規約に同意」のチェックボックスを付けてください。チェックするまでは登録ボタンを押せないようにしてください。
rx.checkboxはオン・オフの値をひとつ受け取る欄です。利用規約への同意、「今後表示しない」、リストから複数を選ぶなど、はい・いいえで答える場面に使います。最初の引数に文字列を渡すと横にラベルが付き、ラベルをクリックしてもチェックされます。
rx.checkbox("Basic Checkbox")プロパティを変えてみる
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)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
最初の引数（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が新しい値（TrueまたはFalse）を渡します。ここではcheckedを渡していないので、ボックスの状態はブラウザが持っていて、State はその値を受け取って記録するだけです。
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に State の値を渡すと、ボックスは常にその値を表示します。ユーザーがクリックするとon_changeで State を更新し、ボタンや別のチェックボックスが State を変えてもボックスが追従します。公式ドキュメントの本文ではこれをinputプロパティと書いていますが、0.10 にあるプロパティ名はcheckedです。
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ならクリックできません。
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）です。
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 で送信の条件。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。