title: Changing the pattern-matching call depending on value of radio button in Dash
body: <p>I am creating a Dash app that allows the user to either enter URLS to be screenshot and then analyzed or the user can upload their own images. I am trying to get the main app.py file right so the inputs can be sent to one of three different functions (one that only takes screenshots of the websites they listed, one that uses robots to search for similar websites and then takes screenshots of those to be analyzed, or just having the user upload their own images to be analyzed). Note that once they hit the &quot;Submit&quot; button, that the relevant inputs (the email, company name, and URL/images) will be passed off to an rq job. I understand how to do this part, so for the example, we can just print out the relevant inputs in the web app just to confirm that we have the right inputs.</p>
  <p>The idea for the UI is that it would first have a section to put your email (and other info), and then start with radio buttons for each screenshot option. Then depending on the user's preference of the inputs they want to provide, they would either be shown a place for them to enter the different URLs or a place to upload their images (<a href="https://i.stack.imgur.com/bUscU.png" rel="nofollow noreferrer">See image here</a>).</p>
  <p>It seems that <a href="https://dash.plotly.com/pattern-matching-callbacks" rel="nofollow noreferrer">pattern-matching</a> would be useful for them to add more URLs, but I can't quite figure out how to allow different types of inputs using it. Here's what I have so far:</p>
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output, State, MATCH, ALL
  
  
  app = dash.Dash(__name__, external_stylesheets = ['https://codepen.io/chriddyp/pen/dZVMbK.css'])
  server = app.server
  
  app.layout = html.Div([
      html.Div([
          html.H6(&quot;&quot;&quot;E-mail address:&quot;&quot;&quot;),
          dcc.Input(
              id='rec-email',
              placeholder=&quot;youremail@domain.com&quot;,
              size=30
          ),
          html.H6(&quot;&quot;&quot;Company Name:&quot;&quot;&quot;),
          dcc.Input(
              id='company-name',
              size=30
          ),
      ]),
      html.Div([
          dcc.RadioItems(
              id='radio-option',
              options=[
                  {'label': &quot;Only analyze these websites&quot;, 'value': 'exact_sites'},
                  {'label': &quot;Allow robot to analyze additional related websites&quot;, 'value': 'robot_sites'},
                  {'label': &quot;I want to upload my own images&quot;, 'value': 'upload_images'}
              ],
              value='exact_sites'
          ),
          ]),
      html.Div(id='website-methods-output')
      ])
  
  @app.callback(
      Output('website-method', 'children'),
      [Input('radio-option', 'value')],
      [State('rec-email', 'value'),
      State('company-name', 'value')]
  )
  
  def display_inputs(radio_option, email, company):
      if radio_option==&quot;upload_images&quot;:
          return html.Div([
              id='inputs-start',
              dcc.Upload(
                  id='input-upload',
                  children=html.Div([
                      'Drag and Drop or ',
                      html.A('Select Image to be Analyzed.')
                      ]),
                      style={
                          'width': '30%',
                          'height': '60px',
                          'lineHeight': '60px',
                          'borderWidth': '1px',
                          'borderStyle': 'dashed',
                          'borderRadius': '5px',
                          'textAlign': 'center',
                          'margin': '10px'
                          },
                          # Allow multiple files to be uploaded
                          multiple=False # Maybe change to True?
                  ),
              children=[],
              html.Button(&quot;Add Image&quot;, id=&quot;add-image&quot;, n_clicks=0)
              ])
  
      else:
          return html.Div([
              id='inputs-start'
              dcc.Input(
                  placeholder='www.website.com'
                  ),
              children=[],
              html.Button(&quot;Add URL&quot;, id=&quot;add-url&quot;, n_clicks=0)
          ])
  
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  
  
  </code></pre>