Skip to content


The visibility rule may be used to make a widget invisible while still reserving spacing for it.


visibility: [visible|hidden];


Value Description
visible (default) The widget will be displayed as normal
hidden The widget will be invisible


Note that the second widget is hidden, while leaving a space where it would have been rendered.

from import App
from textual.widgets import Static

class VisibilityApp(App):
    def compose(self):
        yield Static("Widget 1")
        yield Static("Widget 2", classes="invisible")
        yield Static("Widget 3")

app = VisibilityApp(css_path="visibility.css")
Screen {
    background: green;
Static {             
    height: 5;        
    background: white;        
    color: blue;   
    border: heavy blue;     
Static.invisible {
    visibility: hidden;

VisibilityApp ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃Widget 1 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃Widget 3 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛


/* Widget is on screen */
visibility: visible;

/* Widget is not on the screen */
visibility: hidden;


# Widget is invisible
self.styles.visibility = "hidden"

# Widget is visible
self.styles.visibility = "visible"

There is also a shortcut to set a Widget's visibility. The visible property on Widget may be set to True or False.

# Make a widget invisible
widget.visible = False

# Make the widget visible again
widget.visible = True