ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

コンポーネント工房：Reflexライブラリ100

フォーム

Radio Group

rx.radio_grouprx.radio_group.rootrx.radio_group.item

公式ドキュメント

工房の注文書

決済画面に、3つの配送方法からひとつを選ぶ欄を付けて、選んだ方法の送料をすぐに表示してください。

rx.radio_groupは複数の選択肢からひとつだけ選ばせるグループです。選択肢が5〜6個以下で、すべてを一目で見せたいときに使います。選択肢が多くて場所を節約したいなら Select を使います。リストを渡すと、選択肢ごとに丸印とラベルが作られます。

rx.radio_group(["1", "2", "3"], default_value="1")

プロパティを変えてみる

Small

Medium

Large

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)

direction は選択肢を並べる方向、spacing は選択肢の間隔です。この2つは高水準の rx.radio_group にだけあります。

プロパティ	値	既定値	用途
最初の引数（`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 で選んだ値を受け取る

選択肢を選ぶたびにon_changeがその選択肢の値を渡します。rx.radioはrx.radio_groupの別名なので、公式ドキュメントのようにrx.radio([...])と書いても同じです。

No Selection

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 + on_change

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",
    ),
)

子コンポーネント：root と item

ラベルを値と別にしたい、選択肢をひとつだけ無効にしたい、配置を自分で組みたいときは低水準 API を使います。rx.radio_group.rootがグループと選択値（value、default_value、on_change、name）を受け持ち、rx.radio_group.itemが丸印ひとつです。item が受け取るのはvalue、disabled、requiredだけです。ラベルはrx.text(..., as_="label")で包んで付けます。

Credit card

Bank transfer

Cash (unavailable)

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 のキーから作るので、表に1行足せば選択肢も一緒に増えます。

Shipping

Standard

Express

Same day

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 なら選ばないと送信できない。

← 前へ

フォーム · Switch

フォーム · Select

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex