Scrollable Radio widget


I have a long list of options for my Radio widget and it doesn’t look/feel nice when you have to scroll. I want to limit it’s behavior of expanding vertically.

Steps to reproduce

  • Create a long Python list
  • Pass this list as the options parameter of the Radio widget

Expected behavior:

Scrollable list of selectable radio items.

Actual behavior:

Very long list that expands vertically.

Additional information

  • I thought of placing the Radio widget inside a container. Would it work?
  • I do not want to use the horizontal option of the Radio widget.

Hi @kaankorkmaz

A Radio widget allows you to choose one option of many. If screen space is a constraint, you can use a selectbox to single select an option.

Placing the radio widget in a container / expander won’t reduce the number of radio elements.

Check if the pills widget works out for you: (streamlit-pills · PyPI)



@Shawn_Pereira thanks for your answer.

Since I have a list of timestamps that I want to be seen at all times, using a selectbox isn’t the optimal solution - since the user would have to click each time to display the elements.

If I place the radio widget inside a container, that has a height parameter, wouldn’t it be forced to be contained within this container? My expected outcome would be as follow: Radio elements are expanded and visible, but the user would need to scroll within the container.

st.container does not have a height parameter. In case you manage to specify the height with css/js, you may also need to take care of the scrollbar (not sure about this - haven’t tried it)

A simple method would be to combine your timestamps into different groups, and then display these radio button groups for the user to choose from. It would become more manageable then.


1 Like

This one modifies the row-widget style.


import streamlit as st

# Add vertical scroll for radio.
        .row-widget {
            height: 200px;
            overflow-y: scroll;

big_list = [10, 85, 69, 20, 30, 52, 40, 89, 45, 12, 50, 60, 45, 14, 10,
            70, 25, 15, 20, 85, 12, 58, 12, 46, 12, 14, 57, 98, 36, 12

col = st.columns([1, 1, 4], gap='medium')

with col[0]:
    rb ='select', big_list, label_visibility='collapsed', key='rb_1')

with col[1]:
    st.text_input('Value selected', value=rb, key='ti_1')



1 Like

@Shawn_Pereira combining timestamps can be a workaround.
@ferdy This is exactly what I was looking for!

Thanks both of you!

@ferdy One follow up question - this change applies a height setting to other widgets (checkbox, dropdown etc.). Is there a way to apply it only to the radio widget?

Update - nevermind found it :slight_smile: just changed it to .row-widget.stRadio

1 Like