Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Installation

Command to install the Radio Group component.

buridan add radio_group

uv run buridan add radio_group

python -m buridan add radio_group

Component Guide

Use the following to build the Radio Group component.

from components.ui.radio_group import radio_group

radio_group.root(
    radio_group.item(name="plan", value="free"),
    radio_group.item(name="plan", value="pro"),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/radio_group.py

Examples

Description

Radio group items with a description using the Field component.

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

import reflex as rx

from components.ui.field import field
from components.ui.radio_group import radio_group

OPTIONS = [
    ("default", "Default", "Standard spacing for most use cases."),
    ("comfortable", "Comfortable", "More space between elements."),
    ("compact", "Compact", "Minimal spacing for dense layouts."),
]


def radio_group_description() -> rx.Component:
    return radio_group.root(
        *[
            field.root(
                radio_group.item(
                    name="spacing",
                    value=value,
                    id=f"desc-{value}",
                    default_checked=(value == "comfortable"),
                ),
                field.content(
                    field.label(title, html_for=f"desc-{value}"),
                    field.description(description),
                ),
                orientation="horizontal",
            )
            for value, title, description in OPTIONS
        ],
        class_name="w-fit",
    )

Choice Card

Use field.label to wrap the entire Field for a clickable card-style selection.

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

import reflex as rx

from components.ui.field import field
from components.ui.radio_group import radio_group

PLANS = [
    ("plus", "Plus", "For individuals and small teams."),
    ("pro", "Pro", "For growing businesses."),
    ("enterprise", "Enterprise", "For large teams and enterprises."),
]


def radio_group_choice_card() -> rx.Component:
    return radio_group.root(
        *[
            field.label(
                field.root(
                    field.content(
                        field.title(title),
                        field.description(description),
                    ),
                    radio_group.item(
                        name="plan",
                        value=value,
                        id=f"{value}-plan",
                        default_checked=(value == "plus"),
                    ),
                    orientation="horizontal",
                ),
                html_for=f"{value}-plan",
            )
            for value, title, description in PLANS
        ],
        class_name="max-w-sm",
    )

Fieldset

Use field.set and field.legend to group radio items with a label and description.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

import reflex as rx

from components.ui.field import field
from components.ui.radio_group import radio_group

PLANS = [
    ("monthly", "Monthly ($9.99/month)"),
    ("yearly", "Yearly ($99.99/year)"),
    ("lifetime", "Lifetime ($299.99)"),
]


def radio_group_fieldset() -> rx.Component:
    return field.set(
        field.legend("Subscription Plan", variant="label"),
        field.description("Yearly and lifetime plans offer significant savings."),
        radio_group.root(
            *[
                field.root(
                    radio_group.item(
                        name="plan",
                        value=value,
                        id=f"plan-{value}",
                        default_checked=(value == "monthly"),
                    ),
                    field.label(
                        label, html_for=f"plan-{value}", class_name="font-normal"
                    ),
                    orientation="horizontal",
                )
                for value, label in PLANS
            ],
        ),
        class_name="w-full max-w-xs",
    )

Disabled

Use the disabled prop on radio.root to disable all items.

Disabled

Option 2

Option 3

import reflex as rx

from components.ui.field import field
from components.ui.radio_group import radio_group

OPTIONS = [
    ("option1", "disabled-1", "Disabled", True),
    ("option2", "disabled-2", "Option 2", False),
    ("option3", "disabled-3", "Option 3", False),
]


def radio_group_disabled() -> rx.Component:
    return radio_group.root(
        *[
            field.root(
                radio_group.item(
                    name="disabled-demo",
                    value=value,
                    id=id_,
                    disabled=is_disabled,
                    default_checked=(value == "option2"),
                ),
                field.label(label, html_for=id_, class_name="font-normal"),
                orientation="horizontal",
                **({"data-disabled": "true"} if is_disabled else {}),
            )
            for value, id_, label, is_disabled in OPTIONS
        ],
        class_name="w-fit",
    )

Invalid

Use aria-invalid on radio.item and data-invalid on field.root to show validation errors.

Notification Preferences

Choose how you want to receive notifications.

Email only

SMS only

Both Email & SMS

import reflex as rx

from components.ui.field import field
from components.ui.radio_group import radio_group

OPTIONS = [
    ("email", "invalid-email", "Email only"),
    ("sms", "invalid-sms", "SMS only"),
    ("both", "invalid-both", "Both Email & SMS"),
]


def radio_group_invalid() -> rx.Component:
    return field.set(
        field.legend("Notification Preferences", variant="label"),
        field.description("Choose how you want to receive notifications."),
        radio_group.root(
            *[
                field.root(
                    radio_group.item(
                        name="notification-preferences",
                        value=value,
                        id_=id_,
                        default_checked=(value == "email"),
                        aria_invalid=True,
                    ),
                    field.label(label, html_for=id_, class_name="font-normal"),
                    orientation="horizontal",
                    data_invalid=True,
                )
                for value, id_, label in OPTIONS
            ],
        ),
        class_name="w-full max-w-xs",
    )

API Reference

radio_group.root

The container element for a set of radio options. Renders a native <fieldset role="radiogroup">. Setting disabled=True on the root automatically disables all descendant radio controls without needing to set it on each item individually.

radio_group.root(
    radio_group.item(name="plan", value="free", id_="plan-free"),
    radio_group.item(name="plan", value="pro", id_="plan-pro"),
    disabled=False,
)

Prop	Type	Default
`disabled`	`bool`	`False`
`class_name`	`str`	`""`
`data_slot`	`str`	`"radio-group"`
`role`	`str`	`"radiogroup"`

Any additional HTML props passed to radio_group.root are forwarded directly to the underlying <fieldset>.

radio_group.item

Represents an individual radio control wrapped in a native <label>. Automatically extracts native form input attributes (name, value, checked, disabled, aria-*, data-*, etc.) and attaches them to an internal sr-only <input type="radio">. If no children are passed, it automatically renders a radio_group.indicator.

radio_group.item(
    name="framework",
    value="reflex",
    id_="framework-reflex",
    default_checked=True,
)

Prop	Type	Default
`name`	`str`	(required)
`value`	`str`	(required)
`id` / `id_`	`str`
`checked`	`bool`
`default_checked`	`bool`
`disabled`	`bool`	`False`
`required`	`bool`	`False`
`class_name`	`str`	`""`
`data_slot`	`str`	`"radio-group-item"`

Event handlers (e.g., on_change, on_click), accessibility attributes (aria_*), and state attributes (data_*) are automatically routed to the inner <input>.

radio_group.indicator

Renders the visual selection state inside the radio item. Controlled purely via peer CSS rules (peer-checked). If called without children, it defaults to rendering a centered styled dot (ITEM_INDICATOR_DOT).

radio_group.indicator()

radio_group.indicator(
    rx.el.span(class_name="size-2 rounded-full bg-accent")
)

Prop	Type	Default
`class_name`	`str`	`""`
`data_slot`	`str`	`"radio-group-item-indicator"`

External Tools

︲

On This Page