Skip to content

Widgets

Welcome to the Textual widget gallery.

We have many more widgets planned, or you can build your own.

Info

Textual is a TUI framework. Everything below runs in the terminal.

Button

A simple button with a variety of semantic styles.

Button reference

ButtonsApp Standard ButtonsDisabled Buttons ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  Default  Default  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  Primary!  Primary!  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  Success!  Success!  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  Warning!  Warning!  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  Error!  Error!  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Checkbox

A classic checkbox control.

Checkbox reference

CheckboxApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ X Arrakis 😓 ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔ X Caladan ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔ X Chusuk ▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ XGiedi Prime ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔ XGinaz ▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔ X Grumman ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▃▃ XKaitain ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

ClassicFooter

The original Footer widget.

Warning

This has been replaced by Footer, and will be removed in Textual v1.0

ClassicFooter reference

FooterApp  q  Quit the app  ?  Show help screen  delete  Delete the thing 

Collapsible

Content that may be toggled on and off by clicking a title.

Collapsible reference

CollapsibleApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▼ Leto # Duke Leto I Atreides Head of House Atreides.                                                      ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▼ Jessica Lady Jessica   Bene Gesserit and concubine of Leto, and mother of Paul and Alia. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▶ Paul  c Collapse All  e Expand All 

ContentSwitcher

A widget for containing and switching display between multiple child widgets.

ContentSwitcher reference

DataTable

A powerful data table, with configurable cursors.

DataTable reference

TableApp  lane  swimmer               country        time    4     Joseph Schooling      Singapore      50.39   2     Michael Phelps        United States  51.14   5     Chad le Clos          South Africa   51.14   6     László Cseh           Hungary        51.14   3     Li Zhuhao             China          51.26   8     Mehdy Metella         France         51.58   7     Tom Shields           United States  51.73   1     Aleksandr Sadovnikov  Russia         51.84   10    Darren Burns          Scotland       51.84 

Digits

Display numbers in tall characters.

Digits reference

DigitApp ╔══════════════════════════════════════════════╗ ╺━┓  ┓ ╻ ╻ ┓  ┏━╸┏━┓╺━┓ ┏━╸┏━╸╺━┓ ┏━╸┏━┓┏━┓╺━┓  ━┫  ┃ ┗━┫ ┃  ┗━┓┗━┫┏━┛ ┣━┓┗━┓ ━┫ ┗━┓┣━┫┗━┫  ┃ ╺━┛.╺┻╸  ╹╺┻╸,╺━┛╺━┛┗━╸,┗━┛╺━┛╺━┛,╺━┛┗━┛╺━┛  ╹ ╚══════════════════════════════════════════════╝

DirectoryTree

A tree view of files and folders.

DirectoryTree reference

DirectoryTreeApp 📂  ┣━━ 📁 .cache ┣━━ 📁 .faq ┣━━ 📁 .git ┣━━ 📁 .github ┣━━ 📁 .ipynb_checkpoints ┣━━ 📁 .mypy_cache ┣━━ 📁 .pytest_cache ┣━━ 📁 .screenshot_cache ┣━━ 📁 .vscode ┣━━ 📁 __pycache__ ┣━━ 📁 dist▃▃ ┣━━ 📁 docs ┣━━ 📁 examples ┣━━ 📁 imgs ┣━━ 📁 notes ┣━━ 📁 questions ┣━━ 📁 reference ┣━━ 📁 sandbox ┣━━ 📁 site ┣━━ 📁 src ┣━━ 📁 tests ┣━━ 📁 tools ┣━━ 📄 .coverage

A footer to display and interact with key bindings.

Footer reference

FooterApp  q Quit the app  ? Show help screen  delete Delete the thing 

A header to display the app's title and subtitle.

Header reference

HeaderApp HeaderApp

Input

A control to enter text.

Input reference

InputApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Darren ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Last Name ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Label

A simple text label.

Label reference

ListView

Display a list of items (items may be other widgets).

ListView reference

ListViewExample One Two Three

LoadingIndicator

Display an animation while data is loading.

LoadingIndicator reference

LoadingApp ● ● ● ● 

Log

Display and update lines of text (such as from a file).

Log reference

LogApp And when it has gone past, I will turn the inner eye to see its path.          Where the fear has gone there will be nothing. Only I will remain.             I must not fear.                                                               Fear is the mind-killer.                                                       Fear is the little-death that brings total obliteration.                       I will face my fear.                                                           I will permit it to pass over me and through me.                               And when it has gone past, I will turn the inner eye to see its path.          Where the fear has gone there will be nothing. Only I will remain.             I must not fear.                                                               Fear is the mind-killer.                                                       Fear is the little-death that brings total obliteration.                       I will face my fear.                                                           I will permit it to pass over me and through me.                               And when it has gone past, I will turn the inner eye to see its path.          Where the fear has gone there will be nothing. Only I will remain.            ▄▄ I must not fear.                                                               Fear is the mind-killer.                                                       Fear is the little-death that brings total obliteration.                       I will face my fear.                                                           I will permit it to pass over me and through me.                               And when it has gone past, I will turn the inner eye to see its path.          Where the fear has gone there will be nothing. Only I will remain.            

MarkdownViewer

Display and interact with a Markdown document (adds a table of contents and browser-like navigation to Markdown).

MarkdownViewer reference

MarkdownExampleApp ▼ Ⅰ Markdown Viewer ├── Ⅱ FeaturesMarkdown Viewer ├── Ⅱ Tables └── Ⅱ Code Blocks  This is an example of Textual's MarkdownViewer widget. Features   Markdown syntax and extensions are supported. ● Typography emphasisstronginline code etc. ● Headers ● Lists (bullet and ordered) ● Syntax highlighted code blocks ● Tables! Tables   Tables are displayed in a DataTable widget. Name            Type Default Description                             ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  show_headerboolTrue     Show the table header                   fixed_rowsint0        Number of fixed rows                    fixed_columnsint0        Number of fixed columns                 zebra_stripesboolFalse    Display alternating colors on rows      header_heightint1        Height of header row                    show_cursorboolTrue     Show a cell cursor                      Code Blocks ▅▅   Code blocks are syntax highlighted, with guidelines. classListViewExample(App): │   defcompose(self)-> ComposeResult: │   │   yield ListView(

Markdown

Display a markdown document.

Markdown reference

MarkdownExampleApp Markdown Document   This is an example of Textual's Markdown widget. Features   Markdown syntax and extensions are supported. ● Typography emphasisstronginline code etc. ● Headers ● Lists (bullet and ordered) ● Syntax highlighted code blocks ● Tables!

OptionList

Display a vertical list of options (options may be Rich renderables).

OptionList reference

OptionListApp OptionListApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Aerilon                                            Aquaria                                            ────────────────────────────────────────────────── Canceron                                           Caprica                                            ────────────────────────────────────────────────── Gemenon                                            ────────────────────────────────────────────────── Leonis                                             Libran                                             ────────────────────────────────────────────────── Picon                                             ▁▁ ────────────────────────────────────────────────── Sagittaron                                         Scorpia                                            ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Placeholder

Display placeholder content while you are designing a UI.

Placeholder reference

PlaceholderApp Placeholder p2 here! This is a custom label for p1. #p4 #p3#p5Placeholde r Lorem ipsum dolor sit  26 x 6amet, consectetur 27 x 6 adipiscing elit. Etiam  feugiat ac elit sit amet  Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Etiam 40 x 6 feugiat ac elit sit amet accumsan.  Suspendisse bibendum nec libero quis  gravida. Phasellus id eleifend ligula. Nullam imperdiet sem tellus, sed  vehicula nisl faucibus sit amet. Lorem ipsum dolor sit amet,  Praesent iaculis tempor ultricies. Sedconsectetur adipiscing elit. Etiam  lacinia, tellus id rutrum lacinia, feugiat ac elit sit amet accumsan.  sapien sapien congue mauris, sit amet Suspendisse bibendum nec libero quis 

Pretty

Display a pretty-formatted Rich renderable.

Pretty reference

PrettyExample { 'title''Back to the Future', 'releaseYear'1985, 'director''Robert Zemeckis', 'genre''Adventure, Comedy, Sci-Fi', 'cast'[ {'actor''Michael J. Fox''character''Marty McFly'}, {'actor''Christopher Lloyd''character''Dr. Emmett Brown'} ] }

ProgressBar

A configurable progress bar with ETA and percentage complete.

ProgressBar reference

Funding tracking Funding tracking                Funding: ━━━━━━━━━━━━━━━━╺━━━━━━━━━━━━━━━50%                 ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ $$$ Donate  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ Donation for $50 received!                                                      

RadioButton

A simple radio button.

RadioButton reference

RadioChoicesApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Battlestar Galactica  Dune 1984  Dune 2021  Serenity  Star Trek: The Motion Picture  Star Wars: A New Hope  The Last Starfighter  Total Recall 👉 🔴  Wing Commander ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

RadioSet

A collection of radio buttons, that enforces uniqueness.

RadioSet reference

RadioChoicesApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Battlestar Galactica Amanda  Dune 1984 Connor MacLeod  Dune 2021 Duncan MacLeod  Serenity Heather MacLeod  Star Trek: The Motion Pictur Joe Dawson  Star Wars: A New Hope Kurgan, The  The Last Starfighter Methos  Total Recall 👉 🔴 Rachel Ellenstein  Wing Commander Ramírez ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

RichLog

Display and update text in a scrolling panel.

RichLog reference

RichLogApp │   │   previous_value = next(iter_values) │   exceptStopIteration: │   │   return │   first =True▅▅ │   for value in iter_values: │   │   yield first, False, previous_value │   │   first =False │   │   previous_value = value │   yield first, True, previous_value ┏━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━┳━━━━━━━┓                         lane  swimmer               country        time  ┃                        ┡━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━╇━━━━━━━┩                        │ 4    │ Joseph Schooling     │ Singapore     │ 50.39 │                        │ 2    │ Michael Phelps       │ United States │ 51.14 │                        │ 5    │ Chad le Clos         │ South Africa  │ 51.14 │                        │ 6    │ László Cseh          │ Hungary       │ 51.14 │                        │ 3    │ Li Zhuhao            │ China         │ 51.26 │                        │ 8    │ Mehdy Metella        │ France        │ 51.58 │                        │ 7    │ Tom Shields          │ United States │ 51.73 │                        │ 1    │ Aleksandr Sadovnikov │ Russia        │ 51.84 │                        └──────┴──────────────────────┴───────────────┴───────┘                        Write text or any Rich renderable! Key(key='H'character='H'name='upper_h'is_printable=True) Key(key='i'character='i'name='i'is_printable=True)

Rule

A rule widget to separate content, similar to a <hr> HTML tag.

Rule reference

HorizontalRulesApp                                 solid (default)                                  ────────────────────────────────────────────────────────────────                                      heavy                                       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                      thick                                       ████████████████████████████████████████████████████████████████                                      dashed                                      ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍                                      double                                      ════════════════════════════════════════════════════════════════                                      ascii                                       ----------------------------------------------------------------

Select

Select from a number of possible options.

Select reference

SelectApp SelectApp ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Select ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Select  I must not fear.                                         Fear is the mind-killer.                                 Fear is the little-death that brings total               obliteration.                                            I will face my fear.                                     I will permit it to pass over me and through me.        ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

SelectionList

Select multiple values from a list of options.

SelectionList reference

SelectionListApp SelectionListApp ┌─ Shall we play some games? ──────────────────────────────────┐ X Falken's Maze                                            X Black Jack                                               X Gin Rummy                                                X Hearts                                                   X Bridge                                                   X Checkers                                                 X Chess                                                    X Poker                                                    X Fighter Combat                                           └──────────────────────────────────────────────────────────────┘

Sparkline

Display numerical data.

Sparkline reference

SparklineSummaryFunctionApp ▂▂▁▁ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Static

Displays simple static content. Typically used as a base class.

Static reference

Switch

An on / off control, inspired by toggle buttons.

Switch reference

SwitchApp Example switches ▔▔▔▔▔▔▔▔                               off:      ▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔                               on:       ▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔                               focused:  ▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔                               custom:   ▁▁▁▁▁▁▁▁

Tabs

A row of tabs you can select with the mouse or navigate with keys.

Tabs reference

TabsApp  AtreidiesDuke Leto AtreidesLady JessicaGurney HalleckBaron Vladimir ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╸━━━━━━━━━━━━╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Lady Jessica ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁  a Add tab  r Remove active tab  c Clear tabs 

TabbedContent

A Combination of Tabs and ContentSwitcher to navigate static content.

TabbedContent reference

TabbedApp LetoJessicaPaul ━━━━━━━━╸━━━━━━━╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Lady Jessica   Bene Gesserit and concubine of Leto, and mother of Paul and Alia. PaulAlia ━╸━━━━╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ First child                                                               l Leto  j Jessica  p Paul 

TextArea

A multi-line text area which supports syntax highlighting various languages.

TextArea reference

TextAreaExample ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ 1  defhello(name):                    2  print("hello"+ name)           3   4  defgoodbye(name):                  5  print("goodbye"+ name)         6   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Tree

A tree control with expandable nodes.

Tree reference

TreeApp ▼ Dune ┗━━ ▼ Characters     ┣━━ Paul     ┣━━ Jessica     ┗━━ Chani