Skip to main content
Gradio components are the building blocks for creating interactive machine learning applications. Each component serves a specific purpose, whether it’s collecting user input, displaying output, or controlling the app flow.

​
Component categories

Gradio provides several categories of components:

​
Input components

These components allow users to provide input to your functions:

​
Output components

These components display results from your functions:
  • Label - Classification labels with confidence
  • JSON - Pretty-printed JSON output
  • HTML - Custom HTML rendering
  • Gallery - Image/video grid display
  • Chatbot - Conversational interface
  • Plot - Interactive plots (Matplotlib, Plotly, Altair, Bokeh)
  • BarPlot - Native bar chart visualization
  • LinePlot - Native line chart visualization
  • ScatterPlot - Native scatter plot visualization
  • Model3D - 3D model viewer

​
Control components

These components control app behavior:

​
Special components

These components serve unique purposes:

​
Common parameters

Most components share these common parameters:
​
label
str | None
Label displayed above the component
​
visible
bool | Literal['hidden']
default:"True"
Whether the component is visible
​
interactive
bool | None
Whether users can interact with the component
​
elem_id
str | None
HTML DOM id for CSS styling
​
elem_classes
list[str] | str | None
HTML DOM classes for CSS styling

​
Usage patterns

You can use components as both inputs and outputs: 
import gradio as gr

# As input and output
def process_text(text):
    return text.upper()

gr.Interface(
    fn=process_text,
    inputs=gr.Textbox(label="Input"),
    outputs=gr.Textbox(label="Output")
).launch()
Or use them in Blocks for more control: 
with gr.Blocks() as demo:
    input_text = gr.Textbox(label="Enter text")
    output_text = gr.Textbox(label="Result")
    btn = gr.Button("Process")
    
    btn.click(fn=process_text, inputs=input_text, outputs=output_text)
    
demo.launch()