Skip to content
ReferenceSee every component, organized coherently.

All components

Components are the things you put in a page's content list. This is every one of them, grouped by purpose. Within each group, the components you are most likely to need come first.

Strings are not on this list, but remember that they are the most common page content of all: any string in a content list renders as text.

If you want to...

You want to Reach for
Let the visitor do something Button
Let the visitor go somewhere Link
Ask for text or a number TextBox, TextArea
Ask for a choice CheckBox, SelectBox, RadioButtonGroup
Show a list from your state BulletedList, NumberedList, Table
Organize a page visually Header, HorizontalRule, Div, Row
Show a picture Image
Move files in or out FileUpload, Download

Actions

Clickable controls that run a route.

Component One line
Button Trigger a route, optionally passing Arguments.
Link Navigate by text link, including external URLs.
Argument Pass extra values to a route.

Input

Form fields. Each one's name becomes a parameter of the route its button submits to; see Forms and input.

Component One line
TextBox Collect a line of text or a number.
TextArea Collect multi-line text.
CheckBox Collect a yes/no.
SelectBox Choose one option from a list.
RadioButtonGroup Choose one option with all options visible.
RelatedCheckBox Choose many options, received as a list parameter.
DateInput Collect a date.
TimeInput Collect a time.
DateTimeInput Collect a date and time.
Label Caption an input accessibly.
Output Show a computed result region.
FileUpload Receive a file from the user.
Download Let the user save a file.

Text

Words, from headings to quotations.

Component One line
Header Add section headings, levels 1-6.
Text Use the explicit text component.
Paragraph Use real paragraphs instead of strings.
PreformattedText Preserve spacing and newlines.
InlineCode Mark code in text.
BlockQuote Quote a passage.
Inline text semantics Strong, Emphasis, MarkedText, and the other inline markers, on one page.

Layout

Structure and spacing.

Component One line
LineBreak Force a new line.
HorizontalRule Add a divider line.
Div (Box) Group content for styling.
Span Group content inline.
Row Lay content out side by side.
Details Make collapsible sections and accordions.
Page regions Section, Article, Nav, and the other semantic regions, on one page.

Lists

Component One line
BulletedList Show an unordered list from a Python list.
NumberedList Show an ordered list.
DefinitionList Show term/definition pairs, including from dataclasses.

Data display

Component One line
Table Show rows of lists or dataclasses.
ProgressBar Show progress.
Meter Show a gauge value.
TimeOutput Show semantic timestamps.

Media

Component One line
Image Show images from a URL, file, Picture, or bytes.
MatPlotLibPlot Show a matplotlib figure.
Audio Play sound files, including across pages.
Video Play video files.
SVG Show inline vector graphics.
Canvas Draw on a canvas surface (with JavaScript).
RawHTML and HtmlTag Use the escape hatch to raw HTML safely.

Time

Components that trigger actions on a schedule.

Component One line
Timer Run a countdown that fires a route.
Clock Run a repeating tick route.
RemovePersistent Evict a persistent component.

Place

Component One line
Map Show an interactive map with markers.
CurrentLocation Ask for the user's location.

Capture

Component One line
Camera Take a photo into the app.

Sound

Component One line
Tone Play a single note.
Melody Play a note sequence.
Sound Play files through effects.
Microphone React to sound levels.
AudioRecorder Record audio clips.
Audio effects Echo, Reverb, and the other effects, on one page.