Components

Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.

info

Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.

In places where a component accepts an icon argument, you can specify any of the Office UI Fabric Icons. For example,

ui.command(name="close", label='Close', icon='ChromeClose')])

Content

Text

Use text() or one of its variants to display text content. Markdown works, too. text_xl() and text_l() support context menus.

See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()

Label

Use a label to give a name or title to other components.

See ui.label()

Link

Use link() to display a hyperlink.

See ui.link()

Template

Use template() to render dynamic content using HTML.

See ui.template()

HTML

Use markup() to display raw HTML.

See ui.markup()

Inline frame

Use frame() to embed external HTML content using an inline frame.

See ui.frame()

Table

Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.

See ui.table()

Inputs

Checkbox

Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).

See ui.checkbox()

Checklist

Use a checklist to display a list of checkboxes.

See ui.checklist()

Choice Group

Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.

See ui.choice_group()

Color Picker

Use a color picker to allow pick colors or swatches.

See ui.color_picker()

Combo Box

Use a combo box to allow picking from a list of choices, or typing in custom values.

See ui.combobox()

Date Picker

Use a date picker to allow picking a date.

See ui.date_picker()

Dropdown

Use a dropdown to allow picking from a list of choices.

See ui.dropdown()

File Upload

Use a file upload component to allow uploading files.

See ui.file_upload()

Picker

Use a picker component to allow picking multiple tags or labels from a list.

See ui.picker()

Range Slider

Use a range slider to allow selecting a range of values within another range.

See ui.range_slider()

Slider

Use a slider to allow selecting a value from a range of values.

See ui.slider()

Spin Box

Use a spin box to allow incrementally adjusting a value in small steps.

See ui.spinbox()

Table

Use a table to display tabular data, or allow selecting one or more rows.

See ui.table()

Textbox

Use a textbox to allow typing in text.

See ui.textbox()

Toggle

Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. See ui.toggle()

Commands

Command

Use a command to define menu items for cards and components that support menus and context-menus.

See ui.command()

Button

Use button() to display a clickable button.

See ui.button()

Button Set

Use buttons() to display two or more buttons side by side.

See ui.buttons()

Tabs

Use tabs() to display a set of tabs.

See ui.tabs()

Engagement

Message Bar

Use a message bar to display information, warning and error notifications.

See ui.message_bar()

Progress Bar

Use a progress bar to display progress information for tasks or operations.

See ui.progress()

Stepper

Use a stepper to display a sequence of steps in a process, and how many have been completed.

See ui.stepper()

Graphics

Visualization

Use visualization() to display visualizations defined using Q's native plot() API, based on the Grammar of Graphics.

See ui.visualization()

Vega-lite Visualization

Use vega_visualization() to display visualization defined using Vega-Lite.

See ui.vega_visualization()

Utilities

Expander

Use an expander to show or hider a group of related components.

See ui.expander()

Separator

Use a separator to visually separate components in to groups.

See ui.separator()