New Component: `st_btn_select` - Selectbox alternative with buttons

Logo

Homepage Demo
Streamlit Button Select Component


Sometimes you want a user to make a selection, but you only have a few options.
Using an st.selectbox component works, but wouldnā€™t it be easier to simply have a few buttons in a row ?
Well, this custom component allows just that !

Installation

pip install st_btn_select

Usage

Creating a Button Selection is really easy.

from st_btn_select import st_btn_select

selection = st_btn_select(('option 1', 'option 2', 'option 3'))
st.write('selection')

You can also use this component as a small top navigation bar.

from st_btn_select import st_btn_select

page = st_btn_select(
  # The different pages
  ('home', 'about', 'docs', 'playground'),
  # Enable navbar
  nav=True,
  # You can pass a formatting function. Here we capitalize the options
  format_func=lambda name: name.capitalize(),
)

# Display the right things according to the page
if page == 'home':
  st.write('HOMEPAGE')

NOTE
There can only be one navbar per page, as they will be displayed on top of each other.

The navbar buttons do not set any URL hashes, and thus the different pages are not bookmarkable, nor can you use the browser history.

Documentation

Check out this streamlit app for the documentation, as well as a demo.
Open in Streamlit

3 Likes

Yeah thatā€™s very nice!

Do you mind adding your component to the Component Tracker so we donā€™t lose sight of it :slight_smile: ?

Thanks again, have a nice day!
Fanilo :balloon:

I would like to, but since I just created this account I do not have a trust level 1 yetā€¦
Not sure how to reach that either :sweat_smile:

EDIT: I just reached trust level 1 and thus added my component to the wiki! :+1:

Congratulations on reaching TL1 :smiley:

I would love to be able to have buttons side by side like in this component or as a button group! But for our use case, it sounds like we need to be able to have some sort of ā€œon clickā€ functionality, which doesnā€™t seem possible with this component. Is there any way to add this functionality so itā€™s not just a selection?

Basically, Iā€™d like to be able to have side-by-side buttons to perform actions on a record, but right now we have to use stacked buttons, which takes up a lot of space. (and since we canā€™t do nested columns, we canā€™t use columns for this)

Hi @Jayne,

  1. You could use the click detector by @vivien, ref: GitHub - vivien000/st-click-detector) to have icon buttons side-by-side.
  2. Have a read through the following link by @asehmi, ref:
    Toggle buttons component using static HTML/JS. No React or extra server needed

Cheers

2 Likes

@Shawn_Pereira @Jayne - FYI, the toggle button component was my first foray into serverless components. Iā€™ve refined my understanding of this concept and documented it in the article ā€œIntroduction to Streamlit and Streamlit Componentsā€. Specifically, look at the design of ā€œComponent Zeroā€. (Part 2 is complete and in final review. Watch this space.)

@Shawn_Pereira @asehmi thanks! I think the first click detector by @vivien might actually work for us, weā€™ll give it a try! :slightly_smiling_face:

Is there a way not to have any bottom previously selected? I canā€™t find a way using this component

1 Like

Hi

Same here. Did you find a soltution for this?

Thanks in avdance!

1 Like

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.