radiogroup high level api

[tgberkeley]

Must import as shown" from reflex.components.radix.themes.components import *

Most basic usage, pass in a list of strings :

radio_group(["1", "2", "3", "4", "5"])

Can set several props such as direction, gap:

radio_group(["1", "2", "3", "4", "5"], direction="row", gap="6"))

and any other prop that the RadioGroupRoot component takes:

radio_group(["1", "2", "3", "4", "5"], direction="row", gap="6", variant="soft", size="3", color_scheme="red", default_value="3")

The list of strings passed can also be a state var and this will still work

from reflex.components.radix.themes.components import *


class State(rx.State):
    """The app state."""

    rad: list[str] = ["Name", "Age", "Location"]


def index():
    """The main view."""
    return rx.center(
        rx.vstack(
            radio_group(["1", "2", "3", "4", "5"]),
            radio_group(State.rad),
            radio_group(["1", "2", "3", "4", "5"], direction="row", gap="6")),
            radio_group(["1", "2", "3", "4", "5"], direction="row", gap="6", variant="soft", size="3", color_scheme="red", default_value="3"),
        ),
    )

app = rx.App()
app.add_page(index)

[masenf]

should this also use the passed gap for consistency?

[tgberkeley]

This is the gap=2 is the distance between the radio group and the text it is associated with. The gap that we allow the user to pass is the distance between the different radio group items. I therefore do not think they should be passed the same value, and think we should keep the value between the radio group and the text fixed.