[go: up one dir, main page]

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 ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ XArrakis 😓 ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔ XCaladan ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔ XChusuk ▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ XGiedi Prime ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔ XGinaz ▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔ XGrumman ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▃▃ XKaitain ▁▁▁▁▁▁▁▁▁▁▁▁▁ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

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 ^p palette

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 ├── 📁 .ruff_cache ├── 📁 .screenshot_cache ├── 📁 .vscode ├── 📁 __pycache__▅▅ ├── 📁 dist ├── 📁 docs ├── 📁 examples ├── 📁 imgs ├── 📁 notes ├── 📁 questions ├── 📁 reference ├── 📁 sandbox ├── 📁 site ├── 📁 src ├── 📁 tests ├── 📁 tools

A footer to display and interact with key bindings.

Footer reference

FooterApp  q Quit the app  ? Show help screen  del Delete the thing ^p palette

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

A clickable link that opens a URL.

Link reference

ListView

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

ListView reference

ListViewExample One Two Three ^p palette

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 BlocksThis 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_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                     Code Blocks ▅▅ Code blocks are syntax highlighted, with guidelines. classListViewExample(App): │   defcompose(self)->ComposeResult: │   │   yieldListView(

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!

MaskedInput

A control to enter input according to a template mask.

MaskedInput reference

MaskedInputApp Enter a valid credit card number. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ 0000-0000-0000-0000 ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

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 ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ^p palette

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 GalacticaAmanda Dune 1984Connor MacLeod Dune 2021Duncan MacLeod SerenityHeather MacLeod Star Trek: The Motion PicturJoe Dawson Star Wars: A New HopeKurgan, The The Last StarfighterMethos Total Recall 👉 🔴Rachel Ellenstein Wing CommanderRamírez ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

RichLog

Display and update text in a scrolling panel.

RichLog reference

RichLogApp │   │   previous_value=next(iter_values) │   exceptStopIteration: │   │   return │   first=True▅▅ │   forvalueiniter_values: │   │   yieldfirst,False,previous_value │   │   first=False │   │   previous_value=value │   yieldfirst,True,previous_value ┏━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━┳━━━━━━━┓ laneswimmer             country      time  ┡━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━╇━━━━━━━┩ 4   Joseph Schooling    Singapore    50.39 2   Michael Phelps      United States51.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 States51.73 1   Aleksandr SadovnikovRussia       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? ────────────────────────────────── XFalken's Maze XBlack Jack XGin Rummy XHearts XBridge XCheckers XChess XPoker XFighter Combat ────────────────────────────────────────────────────────────── ^p palette

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 ul AtreidiesDuke Leto AtreidesLady JessicaGurney HalleckBaron Vladimir H ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Lady Jessica ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁  a Add tab  r Remove active tab  c Clear tabs ^p palette

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 ^p palette

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