Display radio button horizontally using ipywidgets - jupyter-notebook

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

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
import numpy
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 2

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>

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