Radio buttons allow users to select a single option from multiple choices, making them ideal for scenarios where only one selection is required at a time. Flet provides a robust implementation of radio buttons using the Radio and RadioGroup components.

Basic Example of RadioGroup

The RadioGroup component in Flet groups multiple Radio buttons, ensuring that only one option is selected at a time. Below is a basic example demonstrating how to use RadioGroup in a Flet application.

import flet as ft

def main(page):
  def button_clicked(e):
    t.value = f"Your favorite color is:  {cg.value}"
    page.update()

  t = ft.Text()
  b = ft.ElevatedButton(text='Submit', on_click=button_clicked)
  cg = ft.RadioGroup(content=ft.Column([
    ft.Radio(value="red", label="Red"),
    ft.Radio(value="green", label="Green"),
    ft.Radio(value="blue", label="Blue")]))
  
  page.add(ft.Text("Select your favorite color:"), cg, b, t)

ft.app(main)

In this example:

  • RadioGroup contains multiple Radio buttons with different values and labels.

  • Clicking the submit button updates a text field with the selected color.

Using on_change Event with RadioGroup

To trigger an event when the selection changes, use the on_change event:

import flet as ft

def main(page):
  def radiogroup_changed(e):
    t.value = f"Your favorite color is:  {e.control.value}"
    page.update()

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

ft.app(main)

This example updates the text field immediately when a selection is made, without requiring a separate button click.

Properties of RadioGroup

  • content: A container (like Column or Row) holding multiple Radio controls.

  • value: The currently selected value in the RadioGroup.

Events of RadioGroup

  • on_change: Fires when the selection changes.

Properties of Radio

  • active_color: The color used when the radio button is selected.

  • adaptive: When set to True, adapts to the platform (iOS/macOS uses CupertinoRadio).

  • autofocus: If True, the radio button gets initial focus.

  • fill_color: The color filling the radio button.

  • focus_color: The color when the button has focus.

  • hover_color: The color when hovered.

  • label: A clickable label displayed next to the radio button.

  • label_style: Defines the style of the label.

  • label_position: Default is LabelPosition.RIGHT, defining where the label appears.

  • mouse_cursor: The cursor type when hovered.

  • overlay_color: The overlay color in different states.

  • splash_radius: The radius of the selection ripple effect.

  • toggleable: Allows toggling between selected and unselected states if True.

  • value: The value assigned when the radio button is selected.

  • visual_density: Defines the spacing and density of the radio button layout.

Events of Radio

  • on_blur: Fires when the radio button loses focus.

  • on_focus: Fires when the radio button gains focus.

Conclusion

Flet’s Radio and RadioGroup components provide a powerful way to implement single-selection options in an application. With customization options like colors, focus styles, and event handling, they offer flexibility for different UI needs. Whether you want a simple selection or dynamic behavior, these components are easy to integrate into any Flet-based application.

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/radio-buttons-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License