Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

Radiogroup

Radios are used when only one choice may be selected in a series of options.

No Selection
from typing import List

options: List[str] = ["Option 1", "Option 2", "Option 3"]


class RadioState(rx.State):
    text: str = "No Selection"


def basic_radio_example():
    return rx.chakra.vstack(
        rx.chakra.badge(
            RadioState.text, color_scheme="green"
        ),
        rx.chakra.radio_group(
            options,
            on_change=RadioState.set_text,
        ),
    )

The default_value and default_checked arguments can be used to set the default value of the radio group.

rx.chakra.vstack(
    rx.chakra.radio_group(
        options,
        default_value="Option 2",
        default_checked=True,
    ),
)

A hstack with the spacing argument can be used to set the spacing between the radio buttons.

rx.chakra.radio_group(
    rx.chakra.radio_group(
        rx.chakra.hstack(
            rx.foreach(
                options,
                lambda option: rx.chakra.radio(option),
            ),
            spacing="2em",
        ),
    ),
)

A vstack can be used to stack the radio buttons vertically.

rx.chakra.radio_group(
    rx.chakra.radio_group(
        rx.chakra.vstack(
            rx.foreach(
                options,
                lambda option: rx.chakra.radio(option),
            ),
        ),
    ),
)

A grouping of individual radio options.

PropTypeDescriptionValues
valueAny

State var to bind the input.

default_valueAny

The default value.

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

Fired when the radio group value changes.

Radios are used when only one choice may be selected in a series of options.

PropTypeDescriptionValues
valueAny

Value of radio.

default_valueAny

The default value.

color_schemestr

The color scheme.

default_checkedbool

If true, the radio will be initially checked.

is_checkedbool

If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)

is_disabledbool

If true, the radio will be disabled.

is_invalidbool

If true, the radio button will be invalid. This also sets aria-invalid to true.

is_read_onlybool

If true, the radio will be read-only

is_requiredbool

If true, the radio button will be required. This also sets aria-required to true.

as_str

Override the tag. The default tag is <p>.

no_of_linesint

Truncate text after a specific number of lines. It will render an ellipsis when the text exceeds the width of the viewport or max_width prop.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting