Disabling UI at runtime

At a glance

The community member is looking for a way to disable certain UI components at runtime, specifically to create a modal to confirm a choice. They have tried using a UI wrapper with mo.stop and states, but this is limiting as they need to pass the UI components to hide. The community member wants to disable the UI components (grey them out) while still showing them, but they are unsure if this is possible. The comments suggest using the <fieldset> approach, which could potentially work, but the community member couldn't get it to work. Another suggestion is to create a custom function to wrap the UI components and apply the disabled state. However, the community member was unable to get this solution to work either. There is no explicitly marked answer in the provided information.

jjohn_helt

I'm looking for a way to disable a certain UI component at runtime. In particular, I want to create a modal to confirm a choice. Until the choice is confirmed (True/False), I want the rest of the UI to remain disabled in this time. I've created a UI wrapper that uses mo.stop, and states to generate a choice like the one showed on the image, and hide the rest of the rest of the wrapped UI component, until the choice is accepted or declined, but this is rather limiting as I need to pass the UI components that I want to hide. Really what I want is to disable the UI components (grey them out), while still showing them, but I can't figure out if that's possible.

Attachment

7 comments

MMyles Scolnick

Which ui components specifically? Most should have a disabled argument on them

jjohn_helt

It could be a stack of components assembled with vstack or hstack.

jjohn_helt

I'm working alot with composite components stacked using vstack or batch

MMyles Scolnick

got it - i wonder if we could leverage "<fieldset disabled>". this usually disabled everything inside, but i bet our css styles don't quite adhere perfectly

MMyles Scolnick

you could like create your own still

Plain Text

def disabled(obj, disabled: bool = True):
   if not disabled:
       return obj
   return mo.Html(f"<fieldset disabled="true" style="opacity: 60">{mo.as_html(obj)}</fieldset>")

jjohn_helt

great! I'll try this out!

jjohn_helt

Unfortunately, I couldn't get that to work. Maybe it would be an idea to add "disabled" as a keyword to any type of HTML (or a callout style)?

Add a reply

Get help from the marimo community

Disabling UI at runtime