Introducing Gradio ClientsJoin us on Thursday, 9am PST

Livestream

New to Gradio? Start here: Getting Started

See the Release History

Components

Introduction

Gradio includes pre-built components that can be used as inputs or outputs in your Interface or Blocks with a single line of code. Components include preprocessing steps that convert user data submitted through browser to something that be can used by a Python function, and postprocessing steps to convert values returned by a Python function into something that can be displayed in a browser.

Consider an example with three inputs (Textbox, Number, and Image) and two outputs (Number and Gallery), below is a diagram of what our preprocessing will send to the function and what our postprocessing will require from it.

Events

Components also come with certain events that they support. These are methods that are triggered with user actions. Below is a table showing which events are supported for each component. All events are also listed (with parameters) in the component’s docs.

endfocusdeletelikestop_recordinguploadsubmitclickplayclearkey_upchangeblurapplyinputeditselectpausestoppause_recordingreleasestart_recordingstream
AnnotatedImage

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Audio

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ“

βœ•

βœ“

βœ“

Plot

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

BarPlot

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Button

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Chatbot

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Checkbox

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

CheckboxGroup

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

ClearButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Code

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

ColorPicker

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Dataframe

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Dataset

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

DownloadButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Dropdown

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ“

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

DuplicateButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

File

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

FileExplorer

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Gallery

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

HighlightedText

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

HTML

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Image

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

ImageEditor

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

JSON

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Label

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

LinePlot

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

LoginButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

LogoutButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Markdown

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Model3D

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

MultimodalTextbox

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Number

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

ParamViewer

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Radio

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

ScatterPlot

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Slider

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

State

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Textbox

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

UploadButton

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

Video

βœ“

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ•

βœ“

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ“

βœ•

βœ•

βœ“

βœ•

SimpleImage

βœ•

βœ•

βœ•

βœ•

βœ•

βœ“

βœ•

βœ•

βœ•

βœ“

βœ•

βœ“

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•

βœ•