> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Components overview

> Learn about all available Gradio components for building interactive UIs

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:

* **[Textbox](/components/textbox)** - Text input for strings
* **[Number](/components/number)** - Numeric input with validation
* **[Slider](/components/slider)** - Range-based numeric selection
* **[Checkbox](/components/checkbox)** - Boolean toggle
* **[CheckboxGroup](/components/checkboxgroup)** - Multiple checkbox selection
* **[Radio](/components/radio)** - Single selection from options
* **[Dropdown](/components/dropdown)** - Dropdown menu selection
* **[Image](/components/image)** - Image upload and display
* **[Audio](/components/audio)** - Audio upload and playback
* **[Video](/components/video)** - Video upload and playback
* **[File](/components/file)** - Generic file upload
* **[Dataframe](/components/dataframe)** - Spreadsheet-like data input
* **[ColorPicker](/components/colorpicker)** - Color selection
* **[DateTime](/components/datetime)** - Date and time selection

### Output components

These components display results from your functions:

* **[Label](/components/label)** - Classification labels with confidence
* **[JSON](/components/json)** - Pretty-printed JSON output
* **[HTML](/components/html)** - Custom HTML rendering
* **[Gallery](/components/gallery)** - Image/video grid display
* **[Chatbot](/components/chatbot)** - Conversational interface
* **[Plot](/components/plot)** - Interactive plots (Matplotlib, Plotly, Altair, Bokeh)
* **[BarPlot](/components/barplot)** - Native bar chart visualization
* **[LinePlot](/components/lineplot)** - Native line chart visualization
* **[ScatterPlot](/components/scatterplot)** - Native scatter plot visualization
* **[Model3D](/components/model3d)** - 3D model viewer

### Control components

These components control app behavior:

* **[Button](/components/button)** - Trigger actions with clicks
* **[UploadButton](/components/uploadbutton)** - Dedicated file upload button
* **[ClearButton](/components/clearbutton)** - Clear component values
* **[DownloadButton](/components/downloadbutton)** - Download files
* **[DuplicateButton](/components/duplicatebutton)** - Duplicate Spaces

### Special components

These components serve unique purposes:

* **[State](/components/state)** - Session state management
* **[Markdown](/components/markdown)** - Markdown rendering
* **[Code](/components/code)** - Code editor and syntax highlighting
* **[Dataset](/components/dataset)** - Example data display
* **[AnnotatedImage](/components/annotatedimage)** - Images with annotations
* **[HighlightedText](/components/highlight)** - Text with highlighting

## Common parameters

Most components share these common parameters:

<ParamField path="label" type="str | None">
  Label displayed above the component
</ParamField>

<ParamField path="visible" type="bool | Literal['hidden']" default="True">
  Whether the component is visible
</ParamField>

<ParamField path="interactive" type="bool | None">
  Whether users can interact with the component
</ParamField>

<ParamField path="elem_id" type="str | None">
  HTML DOM id for CSS styling
</ParamField>

<ParamField path="elem_classes" type="list[str] | str | None">
  HTML DOM classes for CSS styling
</ParamField>

## Usage patterns

You can use components as both inputs and outputs:

```python theme={null}
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:

```python theme={null}
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()
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.