컴포넌트 공방: 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공식 문서
공방 주문서
앱 설정 화면에 알림 켜기·끄기 스위치 세 개를 넣어 주세요. 지금 켜진 항목이 아래에 요약돼야 합니다.
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 값을 주면 스위치는 그 값을 따릅니다. 두 스위치가 같은 값을 보고 있으므로 하나를 움직이면 둘 다 바뀝니다. 두 번째 스위치는 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 대신 파이썬 리스트 내포로 줄을 만듭니다. 각 스위치는 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
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.