Display radio button horizontally using ipywidgets

Question

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 :

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])

Answer 1

Combining into a more self-contained example:

from ipywidgets import Layout, HBox, HTML, RadioButtons

rbuttons = RadioButtons(options=["A", "B", "C"], value="A")
_style = HTML(
    "<style>.widget-radio-box {flex-direction: row !important;}.widget-radio-box"
    " label{margin:5px !important;width: 120px !important;}</style>",
    layout=Layout(display="none"),
)

HBox([rbuttons, _style])

Gives:

Answer 2

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])

Answer 3

Based on gavaskar's comment, add this code to the end of your .ipynb file:

HTML(
    value = "<style>.widget-radio-box {flex-direction: row !important;}.widget-radio-box label{margin:5px !important;width: 120px !important;}</style>"
)

Answer 4

I find this solution useful, which worked for me. ref link

    %%html
    <style>
        .widget-radio-box {
            flex-direction: row !important;     
        }
        .widget-radio-box label{
            margin:5px !important;
            width: 120px !important;
        }
    </style>