コンポーネント工房：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.switch公式ドキュメント
工房の注文書
アプリの設定画面に、通知のオン・オフを切り替えるスイッチを3つ付けてください。いまオンになっている項目が下にまとめて表示されるようにしてください。
rx.switchはチェックボックスと同じ、はい・いいえの値をスイッチの形で受け取ります。「すぐに反映される設定」のように、オンにした瞬間に何かが変わる場面に向いています。同意やリストからの選択のように、送信時にまとめて送る値には Checkbox のほうが自然です。
rx.switch(default_checked=True)プロパティを変えてみる
size
variant
color
radius
high_contrast
disabled
rx.switch(default_checked=True, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
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 | テーマの値 | オン時の色とコントラスト |
radius | "none" "small" "full" | テーマの値 | 角の丸み |
disabled | True / False | False | ユーザーが押せないようにする |
name, value, required | 文字列 / True | なし / "on" | フォーム送信時の名前・値、オンにしないと送信できない |
on_change | イベント | オン・オフしたとき。True/Falseを渡す |
スイッチを動かすたびにon_changeが新しい値を渡します。受け取って State に記録すれば、画面のほかの場所でその値を使えます。
class SwitchBasicState(rx.State):
value: bool = False
@rx.event
def set_value(self, value: bool):
self.value = value
rx.hstack(
rx.switch(on_change=SwitchBasicState.set_value),
rx.badge(SwitchBasicState.value.to_string()),
align="center",
)checkedに State の値を渡すと、スイッチはその値に従います。2つのスイッチが同じ値を見ているので、片方を動かすと両方が変わります。2つ目のスイッチはdisabled=Trueなので直接は押せませんが、checkedが変われば一緒に動きます。ボタンのようにサーバー側で値を変えても同じです。
class SwitchControlState(rx.State):
checked: bool = True
@rx.event
def change_checked(self, checked: bool):
self.checked = checked
@rx.event
def flip(self):
self.checked = not self.checked
rx.hstack(
rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked),
rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked, disabled=True),
rx.button("Flip from server", on_click=SwitchControlState.flip, size="1", variant="soft"),
align="center",
spacing="4",
)Checkbox と違って、rx.switchにはラベルの引数がありません。rx.text(..., as_="label")でスイッチと文字をまとめて包むと、文字をクリックしてもスイッチが動きます。
rx.text(
rx.flex(rx.switch(default_checked=True), "Wi-Fi", spacing="2", align="center"),
as_="label",
size="2",
)nameがあればフォームデータに入ります。オンのスイッチだけが"on"（またはvalueで渡した値）として入り、オフのスイッチは入りません。valueは送信する値にすぎず、オンかどうかはcheckedで決まります。required=Trueのスイッチはオンにしないと送信できません。
Results:
{}class SwitchFormState(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.text(rx.flex(rx.switch(name="email_alerts", value="yes"), "Email alerts", spacing="2"), as_="label", size="2"),
rx.text(rx.flex(rx.switch(name="age_check", required=True), "I am over 14 (required)", spacing="2"), as_="label", size="2"),
rx.button("Submit", type="submit"),
),
on_submit=SwitchFormState.handle_submit,
reset_on_submit=True,
),
rx.divider(),
rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SwitchFormState.form_data.to_string())),
),
)設定名のリストは定数なので、rx.foreachではなく Python のリスト内包表記で行を作ります。各スイッチはsettings[name]を見て、on_changeが名前と新しい値を一緒に渡します。ラムダのn=nameは、ループのたびに名前を捕まえておくためのデフォルト引数です。
Order updates
Delivery alerts
Coupons
On: Order updates, Delivery alerts
SWITCH_SETTING_NAMES = ["Order updates", "Delivery alerts", "Coupons"]
class SwitchSettingsState(rx.State):
settings: dict[str, bool] = {"Order updates": True, "Delivery alerts": True, "Coupons": False}
@rx.event
def toggle(self, name: str, value: bool):
self.settings = {**self.settings, name: value}
@rx.var
def summary(self) -> str:
on = [k for k in SWITCH_SETTING_NAMES if self.settings.get(k)]
return ", ".join(on) if on else "Nothing"
rx.card(
rx.vstack(
*[
rx.hstack(
rx.text(name, size="2"),
rx.spacer(),
rx.switch(
checked=SwitchSettingsState.settings[name],
on_change=lambda v, n=name: SwitchSettingsState.toggle(n, v),
),
width="100%",
align="center",
)
for name in SWITCH_SETTING_NAMES
],
rx.divider(),
rx.text("On: ", SwitchSettingsState.summary, size="1", color_scheme="gray"),
width="260px",
),
)工房ノート
rx.switch はオンにした瞬間に反映される設定に、送信時にまとめる値は Checkbox に。
on_change が True/False を渡す。制御するなら checked + on_change。
disabled が止めるのはユーザー操作だけ。checked が変わればスイッチも変わる。
ラベルは rx.text(..., as_="label") で包んで付ける。
フォームではオンのものだけが name: "on"（または value）として入る。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。