User interface

Creating inputs

All input UI objects take the same first two string arguments:

  • id: an identifier used to refer to input’s value in the server code. For example, id="x1" corresponds with input.x1() in the server function.
  • label: a description for the input that will appear next to it.

Note that many inputs take additional arguments. For example, an input_checkbox lets you indicate if it should start checked or not.

In the section below we’ll show the most common input objects. If you’re curious to learn more, see the API Reference on UI Inputs (for example, here’s the page for input_checkbox())

Input examples

Checkbox inputs

#| standalone: true
#| layout: vertical

from shiny import ui, App

app_ui = ui.page_fluid(
    ui.input_checkbox("x1", "Checkbox"),
)

app = App(app_ui, None)
Note

In these UI examples there’s no server logic, so we’re just using None instead of a server function.

Number inputs

#| standalone: true
#| layout: vertical
#| viewerHeight: 300

from shiny import ui, App

app_ui = ui.page_fluid(
    ui.input_numeric("x1", "Number", value=10),
    ui.input_slider("x2", "Slider", value=10, min=0, max=20),
)

app = App(app_ui, None)

Text inputs

#| standalone: true
#| layout: vertical
#| viewerHeight: 300

from shiny import ui, App

app_ui = ui.page_fluid(
    ui.input_text("x1", "Text", placeholder="Enter text"),
    ui.input_text_area("x2", "Text area", placeholder="Enter text"),
    ui.input_password ("x3", "Password", placeholder="Enter password"),
)

app = App(app_ui, None)

Selection inputs

#| standalone: true
#| layout: vertical
#| viewerHeight: 300

from shiny import ui, App

choices = {"a": "Choice A", "b": "Choice B"}

app_ui = ui.page_fluid(
    ui.input_select("x1", "Select", choices),
    ui.input_checkbox_group("x2", "Checkbox group", choices),
    ui.input_radio_buttons("x3", "Radio buttons", choices),
)

app = App(app_ui, None)

Date inputs

#| standalone: true
#| layout: vertical
#| viewerHeight: 300

from shiny import ui, App

app_ui = ui.page_fluid(
    ui.input_date("x9", "Date input"),
    ui.input_date_range("x10", "Date range input"),
)

app = App(app_ui, None)

Creating outputs

UI outputs create a spot on the webpage to put results from the server.

At a minimum, all UI outputs require an id argument, which corresponds to the server’s output ID.

For example if you create this UI output:

ui.output_text("my_text")

Then you could connect it to the server output using the code below.

def server(input, output, session):
    @output
    @render.text
    def my_text():
        return "some text to show"

Notice that the name of the function my_text() matches the output ID.

Output examples

Text

#| standalone: true
#| layout: vertical
from shiny import ui, render, App

app_ui = ui.page_fluid(
    ui.output_text("my_cool_text"),
    ui.output_text_verbatim("a_code_block"),
)

def server(input, output, session):
    @output
    @render.text
    def my_cool_text():
        return "hello, world!"

    @output
    @render.text
    def a_code_block():
        # This function should return a string
        return str([1, 2, 3, 4, 5])

app = App(app_ui, server)

DataFrames

#| standalone: true
#| layout: vertical
#| viewerHeight: 300
from shiny import ui, render, App
import pandas as pd

app_ui = ui.page_fluid(
    ui.output_table("a_data_frame"),
)

def server(input, output, session):
    @output
    @render.table
    def a_data_frame():
        df = pd.DataFrame({"x": [1,2,3]})
        return df

app = App(app_ui, server)

## file: requirements.txt
# Note that this file is only necessary
# run the example in the browser
Jinja2

Plots

#| standalone: true
#| layout: vertical
#| viewerHeight: 400
from shiny import ui, render, App
from matplotlib import pyplot as plt

app_ui = ui.page_fluid(
    ui.output_plot("a_scatter_plot"),
)

def server(input, output, session):
    @output
    @render.plot
    def a_scatter_plot():
        return plt.scatter([1,2,3], [5, 2, 3])

app = App(app_ui, server)

HTML and UI output

#| standalone: true
#| layout: vertical
from shiny import ui, render, App

app_ui = ui.page_fluid(
    ui.output_ui("some_html")
)

def server(input, output, session):
    @output
    @render.ui
    def some_html():
        return ui.HTML("<marquee>hello, world!</marquee>")

app = App(app_ui, server)

Shiny UI is just HTML

#| components: [editor, cell]

from shiny import ui
ui.input_checkbox("x1", "a checkbox")