How to use on_radio_button_changed()

[learnbyexample]

As far as I understood from the documentation, RadioSet is always displayed vertically. Is there a horizontal option? I'm trying out manually placing two radio buttons horizontally. Got stuck figuring out which button was clicked.

Here's a sample program:

from textual.app import App
from textual.containers import Horizontal
from textual.widgets import RadioButton, Label

class TestRadio(App):
    CSS = '''
        #container {
            height: auto;
            align: center middle;
        }
        #label {
            margin: 2;
            width: 100%;
        }
    '''

    def compose(self):
        self.r_str = RadioButton('str', value=True, name='str')
        self.r_repr = RadioButton('repr', name='repr')
        with Horizontal(id='container'):
            yield self.r_str
            yield self.r_repr
        self.output = Label(id='label')
        yield self.output

    def on_radio_button_changed(self, event):
        self.output.update(str(event))

    def on_mount(self):
        self.dark = False

if __name__ == '__main__':
    app = TestRadio()
    app.run()

Here's a sample screenshot:

How do I get the RadioButton name that is being clicked? I have tried things like event.RadioButton, event.radio_button, event.toggle_button and none of them worked. Using event.value gives True or False which helps to know the state of the radio button.

For on_input_submitted (Input widget), using event.input.name works. Similarly, for on_button_pressed (Button widget), using event.button.name will work.

PS: While writing this, I realized I could use self.r_str.value and thus figure out which radio button was clicked, but I'd still like to know if this is possible from on_radio_button_changed

[willmcgugan]

You can use event.sender to get the RadioButton. However, there should be a button attribute. That was an oversight.

[willmcgugan]

#1932

[davep]

For the sake of completeness, there is already an event property for the pressed button: RadioSet.Changed.pressed

[davep]

As far as I understood from the documentation, RadioSet is always displayed vertically. Is there a horizontal option?

RadioSet is horizontal vertical by default, but you can style it with layout as you would any other container. For example:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, RadioSet

class RadioSetsApp( App[ None ] ):

    CSS = """
    #horizontal {
        layout: horizontal;
    }
    #horizontal RadioButton {
        margin-right: 1;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            RadioSet( "One", "Two", "Three", id="default" ),
            RadioSet( "One", "Two", "Three", id="horizontal" ),
        )
        yield Footer()

if __name__ == "__main__":
    RadioSetsApp().run()

[learnbyexample]

RadioSet is horizontal by default

I think you meant vertical by default?

[davep]

I did. 🤦‍♀️

[davep]

Regarding getting the button's name, or any other attribute, the event has an input property which is the RadioSet that caused the event, and RadioSet has a pressed_button and pressed_index property; the former for people who need to get at the button itself, the latter for people who only care about the index of the button pressed. So an example of doing what you want would be:

from textual.app     import App, ComposeResult
from textual.widgets import Header, Footer, RadioSet, RadioButton, Label

class RadioSetButtonApp( App[ None ] ):

    CSS = """
    Screen {
        align: center middle;
    }

    RadioSet {
        width: 50%;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with RadioSet():
            yield RadioButton( "One", name="One" )
            yield RadioButton( "Two", name="Two" )
            yield RadioButton( "Three", name="Three" )
            yield RadioButton( "Four", name="Four" )
            yield RadioButton( "Five", name="Five" )
        yield Label( "Press a radio button" )
        yield Footer()

    def on_radio_set_changed( self, event: RadioSet.Changed ):
        self.query_one( Label ).update(
            f"Pressed: {event.input.pressed_button.label} named {event.input.pressed_button.name}"
        )

if __name__ == "__main__":
    RadioSetButtonApp().run()

[davep]

I forgot to mention too: there is event.pressed which is a direct reference to the RadioButton that was pressed.

In summary:

• event.input is the radio set that sent the message
• event.pressed is the button that was just pressed to cause the event to be sent
• event.input.pressed_button is a reference to the currently-pressed button in the RadioSet (this is a property of all RadioSets - useful for referencing what's pressed later too)
• event.input.pressed_index is the index of the currently-pressed button in the RadioSet (this is a property of all RadioSets - useful for referencing what's pressed later too)

[learnbyexample]

Thanks for a detailed reply. I'd suggest to add some examples like this to the documentation as well.

[davep]

Yeah, I think that'll be a good idea. Some examples in the reference tend to concentrate more on how to compose up the widgets and less on how to interact with them; I'll extend the RadioSet example out somewhat to show interacting with the press events too.

[davep]

Raised #1933 to remind me when I'm back at my desk proper.

[rodrigogiraoserrao]

Hey Sundeep,

As of today, there should be a good example in the RadioSet docs reference showing how to handle the message RadioSet.Changed.
Dave's summary should also be updated to:

• event.radio_set is the radio set that sent the message
• event.pressed is the button that was just pressed to cause the event to be sent
• event.radio_set.pressed_button is a reference to the currently-pressed button in the RadioSet (this is a property of all RadioSets - useful for referencing what's pressed later too)
• event.radio_set.pressed_index is the index of the currently-pressed button in the RadioSet(this is a property of allRadioSet`s - useful for referencing what's pressed later too)

Related PRs: #1935, #1940

[learnbyexample]

Thanks for the updated summary :)