Components
Introduction

New to Gradio? Start here: Getting Started

To install Gradio from main, run the following command:

pip install https://gradio-builds.s3.amazonaws.com/e94a800c6f5bc007e9797f31fb5ebf3bcb2e9955/gradio-5.33.2-py3-none-any.whl

*Note: Setting share=True in launch() will not work.

←

Tab

AnnotatedImage

→

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.

	tick	upload	copy	change	download	start_recording	stop	like	pause	stop_recording	key_up	apply	release	double_click	input	option_select	blur	focus	preview_close	end	select	edit	clear	preview_open	retry	play	undo	submit	click	pause_recording	example_select	stream	delete
AnnotatedImage	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Audio	✕	✓	✕	✓	✕	✓	✓	✕	✓	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✓	✕	✕	✕	✓	✕	✓	✕
BrowserState	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Button	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
Chatbot	✕	✕	✓	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✓	✓	✕	✓	✕	✓	✕	✕	✕	✓	✕	✕
Checkbox	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
CheckboxGroup	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
ClearButton	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
Code	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
ColorPicker	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕
Dataframe	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Dataset	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
DateTime	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕
DeepLinkButton	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
DownloadButton	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
Dropdown	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✓	✕	✓	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
DuplicateButton	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
File	✕	✓	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
FileExplorer	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Gallery	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
HighlightedText	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
HTML	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
ImageEditor	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Image	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
ImageSlider	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
JSON	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Label	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
LoginButton	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
Markdown	✕	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Model3D	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
MultimodalTextbox	✕	✕	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕
BarPlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
LinePlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
ScatterPlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Number	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕
ParamViewer	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Plot	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Radio	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Slider	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
State	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Textbox	✕	✕	✓	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕
Timer	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
UploadButton	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕
Video	✕	✓	✕	✓	✕	✓	✓	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕
SimpleImage	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕

←

Tab

AnnotatedImage

→