textual/docs/widget_gallery.md

hide

hide
navigation

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{ .md-button .md-button--primary }

Checkbox

A classic checkbox control.

Checkbox reference{ .md-button .md-button--primary }

Collapsible

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

Collapsible reference{ .md-button .md-button--primary }

ContentSwitcher

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

ContentSwitcher reference{ .md-button .md-button--primary }

DataTable

A powerful data table, with configurable cursors.

DataTable reference{ .md-button .md-button--primary }

Digits

Display numbers in tall characters.

Digits reference{ .md-button .md-button--primary }

DirectoryTree

A tree view of files and folders.

DirectoryTree reference{ .md-button .md-button--primary }

Footer

A footer to display and interact with key bindings.

Footer reference{ .md-button .md-button--primary }

Header

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

Header reference{ .md-button .md-button--primary }

Input

A control to enter text.

Input reference{ .md-button .md-button--primary }

Label

A simple text label.

Label reference{ .md-button .md-button--primary }

Link

A clickable link that opens a URL.

Link reference{ .md-button .md-button--primary }

ListView

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

ListView reference{ .md-button .md-button--primary }

LoadingIndicator

Display an animation while data is loading.

LoadingIndicator reference{ .md-button .md-button--primary }

Log

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

Log reference{ .md-button .md-button--primary }

MarkdownViewer

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

MarkdownViewer reference{ .md-button .md-button--primary }

Markdown

Display a markdown document.

Markdown reference{ .md-button .md-button--primary }

MaskedInput

A control to enter input according to a template mask.

MaskedInput reference{ .md-button .md-button--primary }

OptionList

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

OptionList reference{ .md-button .md-button--primary }

Placeholder

Display placeholder content while you are designing a UI.

Placeholder reference{ .md-button .md-button--primary }

Pretty

Display a pretty-formatted Rich renderable.

Pretty reference{ .md-button .md-button--primary }

ProgressBar

A configurable progress bar with ETA and percentage complete.

ProgressBar reference{ .md-button .md-button--primary }

RadioButton

A simple radio button.

RadioButton reference{ .md-button .md-button--primary }

RadioSet

A collection of radio buttons, that enforces uniqueness.

RadioSet reference{ .md-button .md-button--primary }

RichLog

Display and update text in a scrolling panel.

RichLog reference{ .md-button .md-button--primary }

Rule

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

Rule reference{ .md-button .md-button--primary }

Select

Select from a number of possible options.

Select reference{ .md-button .md-button--primary }

SelectionList

Select multiple values from a list of options.

SelectionList reference{ .md-button .md-button--primary }

Sparkline

Display numerical data.

Sparkline reference{ .md-button .md-button--primary }

Static

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

Static reference{ .md-button .md-button--primary }

Switch

An on / off control, inspired by toggle buttons.

Switch reference{ .md-button .md-button--primary }

Tabs

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

Tabs reference{ .md-button .md-button--primary }

TabbedContent

A Combination of Tabs and ContentSwitcher to navigate static content.

TabbedContent reference{ .md-button .md-button--primary }

TextArea

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

TextArea reference{ .md-button .md-button--primary }

Tree

A tree control with expandable nodes.

Tree reference{ .md-button .md-button--primary }