Custom Components GalleryNEW

Explore

New to Gradio? Start here: Getting Started

See the Release History

Components

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.

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.

submitstreamstoppausestop_recordingeditlikeclearendstart_recordingclickchangeuploadreleaseblurplayapplypause_recordingkey_upfocusinputselect
AnnotatedImage

Audio

BarPlot

Button

Chatbot

Checkbox

CheckboxGroup

ClearButton

Code

ColorPicker

Dataframe

Dataset

DownloadButton

Dropdown

DuplicateButton

File

FileExplorer

Gallery

HTML

HighlightedText

Image

ImageEditor

JSON

Label

LinePlot

LoginButton

LogoutButton

Markdown

Model3D

MultimodalTextbox

Number

ParamViewer

Plot

Radio

ScatterPlot

SimpleImage

Slider

State

Textbox

UploadButton

Video