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 ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ DefaultDefault ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Primary!Primary! ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Success!Success! ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Warning!Warning! ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Error!Error! ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

Checkbox

A classic checkbox control.

Checkbox reference

CheckboxApp ┌───────────────────┐ ││ ││ │▐X▌Arrakis 😓│ │▐X▌Caladan│ │▐X▌Chusuk│ │▐X▌Giedi Prime│ │▐X▌Ginaz│ │▐X▌Grumman│ │▐X▌Kaitain│ │▐X▌Novebruns│ ││ ││ └───────────────────┘

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 

DirectoryTree

A tree view of files and folders.

DirectoryTree reference

DirectoryTreeApp 📂 ./ ├── 📁 .faq ├── 📁 .git ├── 📁 .github ├── 📁 .mypy_cache ├── 📁 .pytest_cache ├── 📁 .screenshot_cache ├── 📁 .venv ├── 📁 .vscode ├── 📁 __pycache__ ├── 📁 docs ├── 📁 examples ├── 📁 imgs ├── 📁 notes▇▇ ├── 📁 questions ├── 📁 reference ├── 📁 site ├── 📁 src ├── 📁 tests ├── 📁 tools ├── 📄 .coverage ├── 📄 .coveragerc ├── 📄 .DS_Store ├── 📄 .gitignore

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 ● ● ● ● ●

MarkdownViewer

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

MarkdownViewer reference

MarkdownExampleApp ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▼ Ⅰ Markdown Viewer▋▎▋ ├── Ⅱ Features▋▎Markdown Viewer▋ ├── Ⅱ Tables▋▎▋ └── Ⅱ Code Blocks▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋This is an example of Textual's MarkdownViewer widget. ▋ ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▋▎▋ ▋▎Features▋ ▋▎▋ ▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋Markdown syntax and extensions are supported. ▋ ▋● Typography emphasis, strong, inline code etc. ▋● Headers ▋● Lists (bullet and ordered) ▋● Syntax highlighted code blocks ▋● Tables! ▋ ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▋▎▋ ▋▎Tables▋ ▋▎▋ ▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋Tables are displayed in a DataTable widget. ▋ ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▋▎▋ ▋▎NameTypeDefaultDescription▋ ▋▎ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▋ ▋▎show_headerboolTrueShow the table header▋ ▋▎fixed_rowsint0Number of fixed rows▋ ▋▎fixed_columnsint0Number of fixed columns▋ ▋▎zebra_stripesboolFalseDisplay alternating colors on rows▋ ▋▎header_heightint1Height of header row▋ ▋▎show_cursorboolTrueShow a cell cursor▋ ▋▎▋ ▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋ ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▋▎▋

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 emphasis, strong, inline code etc. ● Headers ● Lists (bullet and ordered) ● Syntax highlighted code blocks ● Tables!

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 

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 Picture││▐●▌Joe Dawson│ │▐●▌Star Wars: A New Hope││▐●▌Kurgan, The│ │▐●▌The Last Starfighter││▐●▌Methos│ │▐●▌Total Recall 👉 🔴││▐●▌Rachel Ellenstein│ │▐●▌Wing Commander││▐●▌Ramírez│ ╰───────────────────────────────────╯╰───────────────────────────────────╯

Static

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

Static reference

Switch

A 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 Paul AtreidiesDuke Leto AtreidesLady JessicaGurney HalleckBaron Vl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╸━━━━━━━━━━━━╺━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ ▊▎ ▊▎ ▊▎ ▊▎ ▊▎ ▊▎ ▊▎ ▊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 

TextLog

Display and update text in a scrolling panel.

TextLog reference

TextLogApp │   │   previous_value=next(iter_values) │   exceptStopIteration: │   │   return │   first=True▅▅ │   forvalueiniter_values: │   │   yieldfirst,False,previous_value │   │   first=False │   │   previous_value=value │   yieldfirst,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)

Tree

A tree control with expandable nodes.

Tree reference

TreeApp ▼ Dune └── ▼ Characters ├── Paul ├── Jessica └── Chani