docs/widget_gallery.md
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*.
A simple button with a variety of semantic styles.
Button reference{ .md-button .md-button--primary }
A classic checkbox control.
Checkbox reference{ .md-button .md-button--primary }
Content that may be toggled on and off by clicking a title.
Collapsible reference{ .md-button .md-button--primary }
A widget for containing and switching display between multiple child widgets.
ContentSwitcher reference{ .md-button .md-button--primary }
A powerful data table, with configurable cursors.
DataTable reference{ .md-button .md-button--primary }
Display numbers in tall characters.
Digits reference{ .md-button .md-button--primary }
A tree view of files and folders.
DirectoryTree reference{ .md-button .md-button--primary }
A footer to display and interact with key bindings.
Footer reference{ .md-button .md-button--primary }
A header to display the app's title and subtitle.
Header reference{ .md-button .md-button--primary }
A control to enter text.
Input reference{ .md-button .md-button--primary }
A simple text label.
Label reference{ .md-button .md-button--primary }
A clickable link that opens a URL.
Link reference{ .md-button .md-button--primary }
Display a list of items (items may be other widgets).
ListView reference{ .md-button .md-button--primary }
Display an animation while data is loading.
LoadingIndicator reference{ .md-button .md-button--primary }
Display and update lines of text (such as from a file).
Log reference{ .md-button .md-button--primary }
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 }
Display a markdown document.
Markdown reference{ .md-button .md-button--primary }
A control to enter input according to a template mask.
MaskedInput reference{ .md-button .md-button--primary }
Display a vertical list of options (options may be Rich renderables).
OptionList reference{ .md-button .md-button--primary }
Display placeholder content while you are designing a UI.
Placeholder reference{ .md-button .md-button--primary }
Display a pretty-formatted Rich renderable.
Pretty reference{ .md-button .md-button--primary }
A configurable progress bar with ETA and percentage complete.
ProgressBar reference{ .md-button .md-button--primary }
A simple radio button.
RadioButton reference{ .md-button .md-button--primary }
A collection of radio buttons, that enforces uniqueness.
RadioSet reference{ .md-button .md-button--primary }
Display and update text in a scrolling panel.
RichLog reference{ .md-button .md-button--primary }
A rule widget to separate content, similar to a <hr> HTML tag.
Rule reference{ .md-button .md-button--primary }
Select from a number of possible options.
Select reference{ .md-button .md-button--primary }
Select multiple values from a list of options.
SelectionList reference{ .md-button .md-button--primary }
Display numerical data.
Sparkline reference{ .md-button .md-button--primary }
Displays simple static content. Typically used as a base class.
Static reference{ .md-button .md-button--primary }
An on / off control, inspired by toggle buttons.
Switch reference{ .md-button .md-button--primary }
A row of tabs you can select with the mouse or navigate with keys.
Tabs reference{ .md-button .md-button--primary }
A Combination of Tabs and ContentSwitcher to navigate static content.
TabbedContent reference{ .md-button .md-button--primary }
A multi-line text area which supports syntax highlighting various languages.
TextArea reference{ .md-button .md-button--primary }
A tree control with expandable nodes.
Tree reference{ .md-button .md-button--primary }