Skip to main content

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()