Skip to main content

Radio

Radio buttons let people select a single option from two or more choices.

Example:

ft.RadioGroup(
    content=ft.Row(
        controls=[ft.Radio(label=f"{i}") for i in range(1, 4)],
        alignment=ft.MainAxisAlignment.CENTER,
    )
)
Radio
Simple radio buttons

Inherits: LayoutControl, AdaptiveControl

Properties

  • active_color - The color used to fill this radio when it is selected.
  • autofocus - True if the control will be selected as the initial focus.
  • fill_color - The color that fills the radio, in all or specific ControlState states.
  • focus_color - The color of this radio when it has the input focus.
  • hover_color - The color of this radio when it is hovered.
  • label - The clickable label to display on the right of a Radio.
  • label_position - Defaults to LabelPosition.RIGHT.
  • label_style - The label's style.
  • mouse_cursor - The cursor for a mouse pointer entering or hovering over this control.
  • overlay_color - The overlay color of this radio in all or specific ControlState states.
  • splash_radius - The splash radius of the circular Material ink response.
  • toggleable - Set to True if this radio button is allowed to be returned to an indeterminate state by selecting it again when selected.
  • value - The value to set to containing RadioGroup when the radio is selected.
  • visual_density - Defines how compact the radio's layout will be.

Events

  • on_blur - Called when the control has lost focus.
  • on_focus - Called when the control has received focus.

Examples​

Live example

Basic Example​

import flet as ft


def main(page: ft.Page):
    def handle_button_click(e: ft.Event[ft.Button]):
        message.value = f"Your favorite color is:  {group.value}"

    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Select your favorite color:"),
                    group := ft.RadioGroup(
                        content=ft.Column(
                            controls=[
                                ft.Radio(value="red", label="Red"),
                                ft.Radio(value="green", label="Green"),
                                ft.Radio(value="blue", label="Blue"),
                            ]
                        )
                    ),
                    ft.Button(content="Submit", on_click=handle_button_click),
                    message := ft.Text(),
                ]
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
basic

Handling selection changes​

import flet as ft


def main(page: ft.Page):
    def handle_selection_change(e: ft.Event[ft.RadioGroup]):
        message.value = f"Your favorite color is:  {e.control.value}"

    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Select your favorite color:"),
                    ft.RadioGroup(
                        on_change=handle_selection_change,
                        content=ft.Column(
                            controls=[
                                ft.Radio(value="red", label="Red"),
                                ft.Radio(value="green", label="Green"),
                                ft.Radio(value="blue", label="Blue"),
                            ]
                        ),
                    ),
                    message := ft.Text(),
                ]
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
handling-selection-changes

Styled radio buttons​

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.RadioGroup(
                ft.Column(
                    controls=[
                        ft.Radio(label="Radio with default style", value="1"),
                        ft.Radio(
                            label="Radio with constant fill color",
                            value="2",
                            fill_color=ft.Colors.RED,
                        ),
                        ft.Radio(
                            label="Radio with dynamic fill color",
                            value="3",
                            fill_color={
                                ft.ControlState.HOVERED: ft.Colors.BLUE,
                                ft.ControlState.SELECTED: ft.Colors.GREEN,
                                ft.ControlState.DEFAULT: ft.Colors.RED,
                            },
                        ),
                    ]
                )
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

active_colorclass-attributeinstance-attribute​

active_color: Optional[ColorValue] = None

The color used to fill this radio when it is selected.

autofocusclass-attributeinstance-attribute​

autofocus: bool = False

True if the control will be selected as the initial focus.

If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

fill_colorclass-attributeinstance-attribute​

fill_color: Optional[ControlStateValue[ColorValue]] = None

The color that fills the radio, in all or specific ControlState states.

focus_colorclass-attributeinstance-attribute​

focus_color: Optional[ColorValue] = None

The color of this radio when it has the input focus.

hover_colorclass-attributeinstance-attribute​

hover_color: Optional[ColorValue] = None

The color of this radio when it is hovered.

labelclass-attributeinstance-attribute​

label: str = ''

The clickable label to display on the right of a Radio.

label_positionclass-attributeinstance-attribute​

label_position: LabelPosition = LabelPosition.RIGHT

Defaults to LabelPosition.RIGHT.

label_styleclass-attributeinstance-attribute​

label_style: Optional[TextStyle] = None

The label's style.

mouse_cursorclass-attributeinstance-attribute​

mouse_cursor: Optional[MouseCursor] = None

The cursor for a mouse pointer entering or hovering over this control.

overlay_colorclass-attributeinstance-attribute​

overlay_color: Optional[ControlStateValue[ColorValue]] = None

The overlay color of this radio in all or specific ControlState states.

splash_radiusclass-attributeinstance-attribute​

splash_radius: Optional[Number] = None

The splash radius of the circular Material ink response.

toggleableclass-attributeinstance-attribute​

toggleable: bool = False

Set to True if this radio button is allowed to be returned to an indeterminate state by selecting it again when selected.

valueclass-attributeinstance-attribute​

value: Optional[str] = None

The value to set to containing RadioGroup when the radio is selected.

visual_densityclass-attributeinstance-attribute​

visual_density: Optional[VisualDensity] = None

Defines how compact the radio's layout will be.

Events​

on_blurclass-attributeinstance-attribute​

on_blur: Optional[ControlEventHandler[Radio]] = None

Called when the control has lost focus.

on_focusclass-attributeinstance-attribute​

on_focus: Optional[ControlEventHandler[Radio]] = None

Called when the control has received focus.