Search code examples
jupyter-notebookipywidgets

Display radio button horizontally using ipywidgets


I would like to display radio buttons horizontally using ipywidgets.

radio_input1 = widgets.RadioButtons(options=['Option 1', 'Option 2'])

But it shows the radio button vertically :

enter image description here

One hack i was trying to put radio buttons with only one option in HBox, and adding observer event to each radio button, then deselect the selected radio button from the observer method but before that unobserving the event then re-register the observe event. Somehow its calling 3 times:

output_radio_selected = widgets.Text() # Used to take the user input and access it when needed
radio_input1 = widgets.RadioButtons(options=['Option 1', 'Option 2']) # Declare the set of radio buttons and provide options
radio_input2 = widgets.RadioButtons(options=['Option 3', 'Option 4'])
def bind_selected_to_output(sender): # Connect the input from the user to the output so we can access it
    #radio_input1.unobserve(bind_selected_to_output)
    radio_input1.unobserve_all()
    radio_input1.index=0
    #print(sender)
    global selected_option # Global variable to hold the user input for reuse in your code
    output_radio_selected.value = radio_input1.value
    selected_option = output_radio_selected.value # Example variable assigned the selected value
    print('Selected option set to: ' + selected_option) # For test purposes
    radio_input1.observe(bind_selected_to_output)


radio_input1.observe(bind_selected_to_output) # Run the bind... function when the radio button is changed
#radio_input1.observe(bind_selected_to_output, names=['value'])
#radio_input1 # Display the radio buttons to the user

widgets.HBox([radio_input1])

Solution

  • I could do it with possible hack, i don't know its right solution but it works. I took 4 different radio buttons and HBox widgets.HBox([radio1,radio2,radio3,radio4]) Then after selecting one radio button i m de-selecting the other radio button which is selected. Here how i done :

    import ipywidgets as widgets
    
    
    output_radio_selected = widgets.Text()
    radio1 = widgets.RadioButtons(options=['Option 1'])
    radio2 = widgets.RadioButtons(options=['Option 2'])
    radio3 = widgets.RadioButtons(options=['Option 3'])
    radio4 = widgets.RadioButtons(options=['Option 4'])
    
    radio1.index = None
    radio2.index = None
    radio3.index = None
    radio4.index = None
    
    def radio1_observer(sender):
        #print(sender)
        radio2.unobserve(radio2_observer, names=['value'])
        radio2.index = None
        
        radio3.unobserve(radio3_observer, names=['value'])
        radio3.index = None
        
        radio4.unobserve(radio4_observer, names=['value'])
        radio4.index = None
        
        global selected_option
        output_radio_selected.value = radio1.value
        selected_option = output_radio_selected.value
        print('Selected option set to: ' + selected_option)
        
        radio2.observe(radio2_observer, names=['value'])
        radio3.observe(radio3_observer, names=['value'])
        radio4.observe(radio4_observer, names=['value'])
    
    def radio2_observer(sender):
        radio1.unobserve(radio1_observer, names=['value'])
        radio1.index = None
        
        radio3.unobserve(radio3_observer, names=['value'])
        radio3.index = None
        
        radio4.unobserve(radio4_observer, names=['value'])
        radio4.index = None
    
        global selected_option2
        output_radio_selected.value = radio2.value
        selected_option2 = output_radio_selected.value
        print('Selected option set to: ' + selected_option2)
        
        radio1.observe(radio1_observer, names=['value'])
        radio3.observe(radio3_observer, names=['value'])
        radio4.observe(radio4_observer, names=['value'])
        
    def radio3_observer(sender):
        radio1.unobserve(radio1_observer, names=['value'])
        radio1.index = None
        
        radio2.unobserve(radio2_observer, names=['value'])
        radio2.index = None
        
        radio4.unobserve(radio4_observer, names=['value'])
        radio4.index = None
    
        global selected_option3
        output_radio_selected.value = radio3.value
        selected_option3 = output_radio_selected.value
        print('Selected option set to: ' + selected_option3)
        
        radio1.observe(radio1_observer, names=['value'])
        radio2.observe(radio2_observer, names=['value'])
        radio4.observe(radio4_observer, names=['value'])
    
    def radio4_observer(sender):
        radio1.unobserve(radio1_observer, names=['value'])
        radio1.index = None
        
        radio2.unobserve(radio2_observer, names=['value'])
        radio2.index = None
        
        radio3.unobserve(radio3_observer, names=['value'])
        radio3.index = None
    
        global selected_option4
        output_radio_selected.value = radio4.value
        selected_option4 = output_radio_selected.value
        print('Selected option set to: ' + selected_option4)
        
        radio1.observe(radio1_observer, names=['value'])
        radio2.observe(radio2_observer, names=['value'])
        radio3.observe(radio3_observer, names=['value'])
    
    radio1.observe(radio1_observer, names=['value'])
    radio2.observe(radio2_observer, names=['value'])
    radio3.observe(radio3_observer, names=['value'])
    radio4.observe(radio4_observer, names=['value'])
    
    widgets.HBox([radio1,radio2,radio3,radio4])