New Component: Streamlit-tags a new way to do add tags and enter keywords

[gagan3012]

Hello,
I have created a custom component for Streamlit which is a custom tag function and keywords functions in Streamlit it returns a list and the list can be used as usual.

pip install streamlit-tags

import streamlit as st
from streamlit_tags import st_tags

keywords = st_tags(‘Enter Keyword:’, ‘Press enter to add more’, [‘One’, ‘Two’, ‘Three’])

st.write(keywords)

More details can be found here: GitHub - gagan3012/streamlit-tags: streamlit-tags
Please star the repo if you liked it and let’s also connect on Linkedin: https://www.linkedin.com/in/gbhatia30/

Example Usage: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py
Here I generate sentences using Keywords using streamlit tags.

[thiago]

Cool idea!

[Charly_Wargnier]

Love it!

As a side note, the app https://share.streamlit.io/gagan3012/keytotext/app.py
is crashing. Not sure if this is expected.

Thanks,
Charly

[gagan3012]

Hello,
Thank you so much! There were some issues in that demo. I have updated it
Please try this out:
https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

[andfanilo]

Hello @gagan3012, sounds awesome!

Could you add it to the Components Community Tracker so we don’t lose track of it?

Have a nice day,
Fanilo

[gagan3012]

Hello, @andfanilo
I have added it to the components tracker can you please approve if it is okay?
Also Now I have added support for the sidebar too:

[andfanilo]

@gagan3012

can you please approve if it is okay?

Perfect I have nothing to approve since it’s a public free-to-edit Wiki, makes it easier to all collaborate on!

[Charly_Wargnier]

Great app!

Btw, I’ve this message when trying to install it.

Is it expected?

Thanks,
Charly

[gagan3012]

Hello @Charly_Wargnier ,
Thank you so much
Please upgrade to streamlit_tags==1.0.6 using

pip install --upgrade streamlit_tags

Currently, it does not support custom theming but I am working on adding support for it.

[Charly_Wargnier]

No worries!

Just curious, can you resize the size of the tags with your component?

See my ticket here regarding the native solution

Widening multi-select labels to avoid text truncation?

Hi guys, I’d like to widen multi-select labels to avoid text truncation, is this possible? [image] Thanks, Charly

Thanks,
Charly

[gagan3012]

Hello @Charly_Wargnier
Yes, streamlit-tags does support resizing according to text size. If we use the streamlit with wide mode we can enlarge the text box too.

Try it out here: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

[Charly_Wargnier]

Brilliant! I’ll try this then!

Thanks

[gagan3012]

New Update to Streamlit-tags now it supports text suggestions. We also have conda support now too. Check out: https://github.com/gagan3012/streamlit-tags… for more details.

Original post: https://twitter.com/gbhatia30/status/1382855599529062403?s=20

[asehmi]

@gagan3012 Nice one! A couple of things that would make this useful for me would be allowing a callback to modify the value before it’s inserted into the list (e.g. validation such as spelling/type, or formatting such as lowercasing, capitalisation, etc.), and allowing suggestions to be hooked into a provider function.

[gagan3012]

The callbacks will be implemented soon. @asehmi Can you please explain more about the provider function?
Example usage of suggestion parameter can be found here: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

[asehmi]

@gagan3012 I was just hoping the suggestions list could be dynamically constructed. I can see that it won’t be straightforward to make it more generic, either via a callback or by specifying an object implementing a defined interface to return the list, since the component is written in TS/JS, and is “external” to the Streamlit host application.

[Constantine_Kurbatov]

Is that works in the white (default) theme? I have tried, and it was displayed in the following way:

[hathao3158]

@gagan3012

from streamlit_tags import st_tags

great app! it’s very useful for me! Thank you so much!

[sanjoyganguly]

Hello @gagan3012
Streamlit tags working fine for me.

Also, is there any way to disable the add functionality & remove tags functionality through configuration. I want to use the same component for display only the tags as well.

[Rom1deTroyes]

Very nice piece of UI/UX

@gagan3012

Also Now I have added support for the sidebar too

Any tips on how to add a st_tags in a already existing sidebar ?
Something like st.sidebar.st_tags(...)

(Also opened an issue about attaching the widget from outside a container, as it seems to be the same kind of feature )