ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Formulare

Radio Group

rx.radio_grouprx.radio_group.rootrx.radio_group.item

Offizielle Doku

Werkstattauftrag

Bitte setz auf die Bezahlseite eine Auswahl aus drei Versandarten und zeig sofort die Versandkosten der gewählten Art an.

rx.radio_group ist eine Gruppe, aus der man genau eine Option wählt. Du nimmst sie, wenn es höchstens fünf oder sechs Optionen gibt und alle auf einen Blick sichtbar sein sollen. Bei vielen Optionen, wo Platz knapp ist, nimm Select. Übergibst du eine Liste, entstehen pro Option ein Kreis und ein Label.

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

Props ausprobieren

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 ist die Richtung, in der die Optionen stehen, spacing der Abstand dazwischen. Beides gibt es nur beim High-Level-rx.radio_group.

Prop	Werte	Standard	Verwendung
Erstes Argument (`items`)	Liste von Strings / Var	erforderlich	Optionen. Wert und Label sind gleich
`value`	String / Var	keiner	Gesteuerte Auswahl (zusammen mit `on_change`)
`default_value`	String	`""`	Auswahl, die nur einmal am Anfang gesetzt wird
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Anordnungsrichtung (nur High-Level)
`spacing`	`"0"` bis `"9"`	`"2"`	Abstand zwischen den Optionen (nur High-Level)
`size`	`"1"` bis `"3"`	`"2"`	Größe
`variant`	`"classic"` `"surface"` `"soft"`	`"classic"`	Aussehen
`color_scheme`, `high_contrast`	Radix-Farbname / `True`	Theme-Wert	Farbe und Kontrast
`disabled`, `required`, `name`			Sperren, Auswahl zum Absenden nötig, Name beim Absenden
`on_change`	Event		Wenn sich die gewählte Option ändert. Übergibt deren Wert (String)

Gewählten Wert per on_change empfangen

Bei jeder Auswahl übergibt on_change den Wert dieser Option. rx.radio ist ein anderer Name für rx.radio_group, rx.radio([...]) wie in der offiziellen Doku bewirkt also dasselbe.

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

Gesteuerte Radio Group: value + on_change

Gibst du value einen State-Wert, folgt die Auswahl immer diesem Wert. Ändert ein Button den State, wandert die Auswahl mit. Mit nur default_value ohne value ist sie ungesteuert: Du legst nur die Anfangsauswahl fest, danach hält der Browser den Wert.

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

Unterkomponenten: root und item

Willst du Labels abweichend vom Wert schreiben, einzelne Optionen sperren oder die Anordnung selbst bauen, nimm die Low-Level-API. rx.radio_group.root übernimmt die Gruppe und die Auswahl (value, default_value, on_change, name), rx.radio_group.item ist ein einzelner Kreis. item nimmt nur value, disabled und required. Labels fügst du an, indem du mit rx.text(..., as_="label") umschließt.

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

Mit einem Formular absenden

name ist der Name der Gruppe und erscheint in den Formulardaten als Name: gewählter Wert. Ist nichts gewählt, fehlt der Schlüssel. Mit required=True muss eine Option gewählt sein, damit abgeschickt wird.

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

Auftrag erledigt

Die Versandkosten liegen als konstantes dict vor, und die berechnete Variable fee sucht die Kosten der gewählten Art heraus. Auch die Optionen entstehen aus den Schlüsseln desselben dicts: Kommt eine Zeile dazu, wächst die Auswahl mit.

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

Werkstattnotizen

rx.radio_group([Optionen...]) heißt genau eine Auswahl. Bei wenigen Optionen statt Select.
on_change übergibt den gewählten Wert. Gesteuert mit value + on_change, nur Anfangswert mit default_value.
direction · spacing gibt es nur High-Level. Feine Anordnung und Labels über root + item.
Im Formular gilt name: gewählter Wert. Mit required muss gewählt werden, bevor abgesendet wird.

← Zurück

Formulare · Switch

Weiter →

Formulare · Select

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex