컴포넌트 공방: 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
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.