meta:
  path: /examples/interactive
  name: Interactive .md
  desc: Advanced callback patterns and state management examples
  type: documentation
  format: toon/3.3

context: 7-page Dash docs site
relatedPages[5]:
  Home: /
  AI/LLM Integration: /examples/ai-integration
  Custom Directives: /examples/directives
  Data Visualization: /examples/visualization
  Getting Started: /getting-started

sections[20]:
  1. [3] Introduction
     This page demonstrates **advanced interactive patterns** using Dash callbacks, state management, and component interactions. Learn how to build complex, responsive user interfaces with real-time updates.
     ---
  2. [3] Callback Basics
     Callbacks are the heart of interactivity in Dash. They connect component properties and define how your app responds to user actions.
  3. [4] Simple Callback Example
  4. [3] Multiple Inputs
     Handle multiple input sources in a single callback:
     Source code:
     ---
  5. [3] State Management
     Use `State` to access component values without triggering the callback:
     Source code:
     ---
  6. [3] Pattern Matching Callbacks
     Create dynamic components with pattern-matching callbacks:
     Source code:
     ---
  7. [3] Chained Callbacks
     Connect multiple callbacks to create complex workflows:
     Source code:
     ---
  8. [3] Loading States
     Provide visual feedback during long-running operations:
     Source code:
     ---
  9. [5] Pattern 1: Single Input, Single Output
     ```python
     @callback(
     Output("output-id", "children"),
  10. [5] Pattern 2: Multiple Inputs, Single Output
     ```python
     @callback(
     Output("result", "children"),
  11. [5] Pattern 3: Single Input, Multiple Outputs
     ```python
     @callback(
     Output("output1", "children"),
  12. [5] Pattern 4: Using State
     ```python
     @callback(
     Output("display", "children"),
  13. [5] Pattern 5: Pattern Matching with ALL
     ```python
     @callback(
     Output("summary", "children"),
  14. [5] Pattern 6: Pattern Matching with MATCH
     ```python
     @callback(
     Output({"type": "output", "index": MATCH}, "children"),
  15. [4] Preventing Initial Calls
     Prevent callbacks from firing on page load:
     ```python
     @callback(
  16. [4] Circular Callbacks
     Allow circular callback chains with `allow_duplicate=True`:
     ```python
     @callback(
  17. [4] Determining Trigger
     Find out which input triggered the callback:
     ```python
     from dash import ctx
  18. [4] Background Callbacks
     For long-running operations (requires `diskcache` or `celery`):
     ```python
     from dash import DiskcacheManager
  19. [4] 1. Keep Callbacks Simple
     Break complex logic into multiple callbacks:
     ✅ **Good:**
     ```python
  20. [4] 2. Use State for Form Inputs
     Use `State` to avoid triggering callbacks on every keystroke:
     ```python
     # Good for forms

directives:
  llms_copy: [Interactive Components]
  toc: [(none)]
  exec[6]: docs.interactive-components.simple_callback, docs.interactive-components.multiple_inputs, ...
  source[6]: docs/interactive-components/simple_callback.py, docs/interactive-components/multiple_inputs.py, ...

execComponents[6]:
  - docs.interactive-components.simple_callback [callback]
  - docs.interactive-components.multiple_inputs [callback]
  - docs.interactive-components.state_example [callback]
  - docs.interactive-components.pattern_matching [callback]
  - docs.interactive-components.chained_callbacks [callback]
  - docs.interactive-components.loading_states [callback]

codeExamples[6]:
  1:
    file: docs/interactive-components/simple_callback.py
    lang: python
    code: |
      from dash import html, callback, Input, Output
      import dash_mantine_components as dmc
      
      component = html.Div([
          dmc.Title("Simple Callback Example", order=4, mb=10),
          dmc.Button(
              "Click Me!",
              id="simple-button",
              variant="filled",
              color="teal",
              mb=15
          ),
          dmc.Paper([
              html.Div(
                  "Button not clicked yet",
                  id="simple-output"
              )
          ], p="md", withBorder=True, radius="md")
      ])
      
      # ... (11 more lines)
  2:
    file: docs/interactive-components/multiple_inputs.py
    lang: python
    code: |
      from dash import html, callback, Input, Output
      import dash_mantine_components as dmc
      
      component = html.Div([
          dmc.Title("Multiple Inputs Example", order=4, mb=10),
          dmc.Text("Enter two numbers to see their sum:", mb=10),
      
          dmc.Stack([
              dmc.NumberInput(
                  label="First Number",
                  id="num1-input",
                  value=0,
                  min=0,
                  max=100
              ),
              dmc.NumberInput(
                  label="Second Number",
                  id="num2-input",
                  value=0,
                  min=0,
      # ... (26 more lines)
  3:
    file: docs/interactive-components/state_example.py
    lang: python
    code: |
      from dash import html, callback, Input, Output, State
      import dash_mantine_components as dmc
      
      component = html.Div([
          dmc.Title("State Management Example", order=4, mb=10),
          dmc.Text(
              "Type your name and click submit. Notice the callback only fires when you click submit, not on every keystroke.",
              mb=10,
              c="dimmed",
              size="sm"
          ),
      
          dmc.Stack([
              dmc.TextInput(
                  label="Enter Your Name",
                  placeholder="John Doe",
                  id="name-input-state"
              ),
              dmc.Button(
                  "Submit",
      # ... (29 more lines)
  4:
    file: docs/interactive-components/pattern_matching.py
    lang: python
    code: |
      from dash import html, callback, Input, Output, State, ALL, MATCH
      import dash_mantine_components as dmc
      from dash_iconify import DashIconify
      
      component = html.Div([
          dmc.Title("Pattern Matching Callbacks", order=4, mb=10),
          dmc.Text("Click 'Add Item' to dynamically create new inputs with pattern-matching callbacks.", mb=15, c="dimmed", size="sm"),
      
          dmc.Button(
              "Add Item",
              id="add-item-btn",
              variant="filled",
              color="teal",
              leftSection=DashIconify(icon="mdi:plus"),
              mb=15
          ),
      
          html.Div(id="items-container"),
      
          dmc.Paper([
      # ... (67 more lines)
  5:
    file: docs/interactive-components/chained_callbacks.py
    lang: python
    code: |
      from dash import html, callback, Input, Output, State, dcc
      import dash_mantine_components as dmc
      
      # Sample data structure
      data = {
          "USA": {
              "California": ["Los Angeles", "San Francisco", "San Diego"],
              "Texas": ["Houston", "Dallas", "Austin"],
              "Florida": ["Miami", "Orlando", "Tampa"]
          },
          "Canada": {
              "Ontario": ["Toronto", "Ottawa", "Hamilton"],
              "Quebec": ["Montreal", "Quebec City", "Laval"],
              "British Columbia": ["Vancouver", "Victoria", "Kelowna"]
          },
          "Mexico": {
              "Jalisco": ["Guadalajara", "Puerto Vallarta", "Zapopan"],
              "Nuevo León": ["Monterrey", "San Pedro", "Santa Catarina"]
          }
      }
      # ... (90 more lines)
  6:
    file: docs/interactive-components/loading_states.py
    lang: python
    code: |
      from dash import html, callback, Input, Output, dcc
      import dash_mantine_components as dmc
      import time
      
      component = html.Div([
          dmc.Title("Loading States Example", order=4, mb=10),
          dmc.Text(
              "Click the button to trigger a slow operation. Notice the loading indicator while processing.",
              mb=15,
              c="dimmed",
              size="sm"
          ),
      
          dmc.Button(
              "Process Data",
              id="process-btn",
              variant="filled",
              color="teal",
              mb=15
          ),
      # ... (36 more lines)

keyLists[1]:
  - unordered: **Data Visualization** - Create interactive charts, **AI Integration** - Make your components AI-friendly, **Getting Started** - Learn the basics

tips[16]:
  Pattern 1: Single Input, Single Output:
    [python] @callback(...
  Pattern 2: Multiple Inputs, Single Output:
    [python] @callback(...
  Pattern 3: Single Input, Multiple Outputs:
    [python] @callback(...
  Pattern 4: Using State:
    [python] @callback(...
  Pattern 5: Pattern Matching with ALL:
    [python] @callback(...
  Pattern 6: Pattern Matching with MATCH:
    [python] @callback(...
  Preventing Initial Calls:
    [python] @callback(...
  Circular Callbacks:
    [python] @callback(...
  Memoization:
    [python] from functools import lru_cache...
  Clientside Callbacks:
    [python] app.clientside_callback(...
  Partial Updates:
    [python] @callback(...
  Circular Dependency:
    [python] @callback(Output("a", "value"), Input("b", "value"))...
  Circular Dependency:
    [python] @callback(...
  Modifying Global State:
    [python] global_data = []...
  Modifying Global State:
    [python] @callback(...
  Example Test:
    [python] from dash.testing import DashComposite...

bestPractices[5]:
  1. Keep Callbacks Simple
     Break complex logic into multiple callbacks:
     code[python]: |
       @callback(Output("processed", "data"), Input("raw", "data"))
       def process_data(raw):
           return process(raw)
       
       @callback(Output("chart", "figure"), Input("processed", "data"))
       def create_chart(processed):
           return make_figure(processed)
  2. Use State for Form Inputs
     Use
     code[python]: |
       # Good for forms
       @callback(
           Output("result", "children"),
           Input("submit-button", "n_clicks"),
           State("text-input", "value")
       )
  3. Validate Inputs
     Always validate input values:
     code[python]: |
       @callback(Output("output", "children"), Input("input", "value"))
       def update(value):
           if value is None or value == "":
               return "Please enter a value"
       
           if not isinstance(value, str):
               return "Invalid input type"
       
  4. Handle None Values
     Check for
     code[python]: |
       @callback(Output("output", "children"), Input("input", "value"))
       def update(value):
           if value is None:
               return "Waiting for input..."
       
           return f"Processing: {value}"
  5. Use Proper IDs
     Choose descriptive, unique IDs:

summary: Interactive .md: | 20 sections | 6 code examples | 16 tips | 5 best practices | uses exec, llms_copy, source, toc | 6 interactive components