컴포넌트 공방: 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.radio_group은 여러 보기 중 하나만 고르게 하는 묶음입니다. 보기가 대여섯 개 이하이고 한눈에 모두 보여야 할 때 씁니다. 보기가 많아 자리를 아껴야 하면 Select를 씁니다. 리스트를 넘기면 보기마다 동그라미와 라벨이 만들어집니다.
rx.radio_group(["1", "2", "3"], default_value="1")속성 바꿔 보기
direction
spacing
size
variant
color
high_contrast
disabled
rx.radio_group(["Small", "Medium", "Large"], default_value="Medium", direction="row", spacing="2", size="2", variant="classic", color_scheme="indigo", high_contrast=False, disabled=False)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
첫 인자(items) | 문자열 리스트 / Var | 필수 | 보기 목록. 값과 라벨이 같다 |
value | 문자열 / Var | 없음 | 제어할 선택값(on_change와 함께) |
default_value | 문자열 | "" | 처음 한 번만 고르는 값 |
direction | "row" "column" "row-reverse" "column-reverse" | "row" | 늘어놓는 방향(고수준만) |
spacing | "0" ~ "9" | "2" | 보기 사이 간격(고수준만) |
size | "1" ~ "3" | "2" | 크기 |
variant | "classic" "surface" "soft" | "classic" | 생김새 |
color_scheme, high_contrast | Radix 색 이름 / True | 테마 값 | 색과 대비 |
disabled, required, name | 막기, 골라야 제출, 폼 제출 이름 | ||
on_change | 이벤트 | 고른 보기가 바뀔 때. 그 값(문자열)을 넘긴다 |
보기를 고를 때마다 on_change가 그 보기의 값을 넘깁니다. rx.radio는 rx.radio_group의 다른 이름이라, 공식 문서처럼 rx.radio([...])로 써도 같습니다.
class RadioGroupBasicState(rx.State):
item: str = "No Selection"
@rx.event
def set_item(self, item: str):
self.item = item
rx.vstack(
rx.badge(RadioGroupBasicState.item, color_scheme="green"),
rx.radio(["1", "2", "3"], on_change=RadioGroupBasicState.set_item, direction="row"),
)value에 State 값을 주면 선택은 언제나 그 값을 따릅니다. 버튼이 State를 바꾸면 선택도 옮겨 갑니다. value 없이 default_value만 주면 비제어로, 처음 선택만 정하고 그 뒤는 브라우저가 들고 있습니다.
Selected: M
class RadioGroupControlState(rx.State):
size: str = "M"
@rx.event
def set_size(self, value: str):
self.size = value
rx.vstack(
rx.radio_group(
["S", "M", "L", "XL"],
value=RadioGroupControlState.size,
on_change=RadioGroupControlState.set_size,
),
rx.hstack(
rx.button("Pick XL", on_click=RadioGroupControlState.set_size("XL"), size="1", variant="soft"),
rx.text("Selected: ", rx.code(RadioGroupControlState.size), size="2"),
align="center",
),
)라벨을 값과 다르게 쓰거나, 보기 하나만 막거나, 배치를 직접 짜고 싶으면 저수준 API를 씁니다. rx.radio_group.root가 묶음과 선택값(value, default_value, on_change, name)을 맡고, rx.radio_group.item이 동그라미 하나입니다. item은 value, disabled, required만 받습니다. 라벨은 rx.text(..., as_="label")로 감싸 붙입니다.
rx.radio_group.root(
rx.flex(
rx.text(rx.flex(rx.radio_group.item(value="card"), "Credit card", spacing="2"), as_="label", size="2"),
rx.text(rx.flex(rx.radio_group.item(value="bank"), "Bank transfer", spacing="2"), as_="label", size="2"),
rx.text(
rx.flex(rx.radio_group.item(value="cash", disabled=True), "Cash (unavailable)", spacing="2"),
as_="label",
size="2",
color_scheme="gray",
),
direction="column",
spacing="2",
),
default_value="card",
color_scheme="teal",
)name은 묶음의 이름으로, 폼 데이터에 이름: 고른 값으로 들어갑니다. 아무것도 고르지 않았으면 키가 빠집니다. required=True이면 하나를 골라야 제출됩니다.
Results:
{}class RadioGroupFormState(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.radio_group(
["Option 1", "Option 2", "Option 3"],
name="radio_choice",
required=True,
direction="row",
),
rx.button("Submit", type="submit"),
spacing="4",
),
on_submit=RadioGroupFormState.handle_submit,
reset_on_submit=True,
),
rx.divider(),
rx.hstack(rx.text("Results:", weight="bold"), rx.badge(RadioGroupFormState.form_data.to_string())),
spacing="4",
),
)배송비 표는 상수 dict로 두고, 계산 변수 fee가 고른 방법의 배송비를 찾습니다. 보기 목록도 같은 dict의 키에서 만들므로, 표에 한 줄을 더하면 보기도 함께 늘어납니다.
Shipping
Fee: 0 KRW
RADIO_SHIPPING_FEES = {"Standard": 0, "Express": 3000, "Same day": 7000}
class RadioGroupShippingState(rx.State):
speed: str = "Standard"
@rx.event
def set_speed(self, value: str):
self.speed = value
@rx.var
def fee(self) -> int:
return RADIO_SHIPPING_FEES.get(self.speed, 0)
rx.card(
rx.vstack(
rx.text("Shipping", weight="bold"),
rx.radio_group(
list(RADIO_SHIPPING_FEES),
value=RadioGroupShippingState.speed,
on_change=RadioGroupShippingState.set_speed,
direction="column",
),
rx.divider(),
rx.text("Fee: ", RadioGroupShippingState.fee, " KRW", size="2"),
),
width="240px",
)공방 노트
rx.radio_group([보기...])는 하나만 고르기. 보기가 적을 때 Select 대신.
on_change가 고른 값을 넘긴다. 제어는 value + on_change, 처음 값만은 default_value.
direction · spacing은 고수준에만 있다. 세밀한 배치와 라벨은 root + item.
폼에서는 name: 고른 값. required면 골라야 제출된다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.