Components overview

​

Component categories

​

Input components

• Textbox - Text input for strings
• Number - Numeric input with validation
• Slider - Range-based numeric selection
• Checkbox - Boolean toggle
• CheckboxGroup - Multiple checkbox selection
• Radio - Single selection from options
• Dropdown - Dropdown menu selection
• Image - Image upload and display
• Audio - Audio upload and playback
• Video - Video upload and playback
• File - Generic file upload
• Dataframe - Spreadsheet-like data input
• ColorPicker - Color selection
• DateTime - Date and time selection

​

Output components

• 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

• Button - Trigger actions with clicks
• UploadButton - Dedicated file upload button
• ClearButton - Clear component values
• DownloadButton - Download files
• DuplicateButton - Duplicate Spaces

​

Special components

• State - Session state management
• Markdown - Markdown rendering
• Code - Code editor and syntax highlighting
• Dataset - Example data display
• AnnotatedImage - Images with annotations
• HighlightedText - Text with highlighting

​

Common parameters

​

Usage patterns

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()

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()